How can I catch search text with a parameter in server side. It's always null when I debug the program. I saw this Request.Form.GetValues("search[value]")[0] but I want to take it as a parameter. Is it possible ?
$('#datatableClients').DataTable({
"processing": true,
"serverSide": true,
"filter": true,
"orderMulti": false,
"ajax": {
"url": "/Custom/Data/GetRows",
"type": "POST",
"datatype": "json"
},
"columns": [
{ "data": "FirstName", "name": "First Name", "autoWidth": true },
{ "data": "LastName", "name": "Last Name", "autoWidth": true }
]
});
public JsonResult GetRows(int draw, int start, int length, string search)
{
// search parameter is null
}
Related
I have dropdownlist but its outside my DataTable and needs to be inside, but i am struggling to achieve this and see my code below for logic. Please help me to improve this logic for user readability. The reason for this logic that i want my dropdownlist it should allow user the option to select from the given data not data being exposed outside this record list, i hope i am making sense as exactly to what i am aiming to achieve.
// Drop downlist for WhoAttended.
public enum Attendees
{
Engineers,
Technicians,
Inspectors
}
// View cshtml
<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.15/css/dataTables.semanticui.min.css" rel="stylesheet" />
#section scripts{
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.semanticui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script>
<script>
$(document).ready(function () {
$("#EventsManagementsTable").DataTable({
"columnDefs": [
{ "width": "5%", "targets": [0] },
{ "className": "text-center custom-middle-align" ,"targets":[0, 1, 2, 3, 4, 5, 6] },
],
"serverSide": "true",
"order":[0,"asc"],
"processing": "true",
"language": {
"processing": "processing...... please wait"
},
"ajax": {
"url": "/Dashboard/GetData",
"type": "POST",
"datatype": "JSON"
},
"columns": [
{"data": "TrainingType", "name": "TrainingType"},
{ "data": "TrainingDescription", "name": "TrainingDescription"},
{ "data": "Price", "name": "Price"},
{ "data": "Venue", "name": "Venue"},
{ "data": "Facilitator", "name":"Facilitator" },
{ "data": "WhoAttend", "name" : "WhoAttend" },
{"data": "RSVP", "name":"RSVP" },
]
});
});
</script>
// What i am doing currently to get dropdownlist on DataTable.
<script>
$(document).ready(function () {
$("#EventsManagementsTable").DataTable({
"columnDefs": [
{ "width": "5%", "targets": [0] },
{ "className": "text-center custom-middle-align" ,"targets":[0, 1, 2, 3, 4, 5, 6] },
],
"serverSide": "true",
"order":[0,"asc"],
"processing": "true",
"language": {
"processing": "processing...... please wait"
},
"ajax": {
"url": "/Dashboard/GetData",
"type": "POST",
"datatype": "JSON",
},
"columns": [
{"data": "TrainingType", "name": "TrainingType"},
{ "data": "TrainingDescription", "name": "TrainingDescription"},
{ "data": "Price", "name": "Price"},
{ "data": "Venue", "name": "Venue"},
{ "data": "Facilitator", "name":"Facilitator" },
{ "data": "WhoAttend", "name" : "WhoAttend" },
{ "data": "RSVP", "name": "RSVP" },
"columns":[
{
"data": "WhoAttend",
"name": "WhoAttend",
"render": function (value) {
return $("<select/>")
.addClass("form-control")
.attr("name", "WhoAttend")
.append($("<option/>").text("Engineers"))
.append($("<option/>").text("Inspectors"))
.append($("<option/>").text("Technicians"))
.val(value)
.html();
}
}
],
]
});
});
Hi in your columns section add this code to add a custom HTML element:
"columns": [
{"data": "TrainingType", "name": "TrainingType"},
{ "data": "TrainingDescription", "name": "TrainingDescription"},
{ "data": "Price", "name": "Price"},
{ "data": "Venue", "name": "Venue"},
{ "data": "Facilitator", "name":"Facilitator" },
{ "data": "WhoAttend", "name" : "WhoAttend" },
{"data": "RSVP", "name":"RSVP" }
{
className: "center",
defaultContent:`<select name='slcCustom' class='custom' >
<option value='default'>select something</option>
<option value='1'>Apple</option>
</select>`
}
]
Here is a jsfiddle you can check.
Hope it helps
I have a firewall configuration file that goes like this:
{
"javaClass": "some text",
"rules": {
"javaClass": "java.util.LinkedList",
"list": [
{
"block": true,
"conditions": {
"javaClass": "java.util.LinkedList",
"list": [
{
"conditionType": "DST_PORT",
"invert": false,
"javaClass": "some text",
"value": "21"
}
]
},
"description": "Block and flag all traffic destined to port 21",
"enabled": false,
"flag": true,
"javaClass": "some text",
"ruleId": 100018
},
{
"block": true,
"conditions": {
"javaClass": "java.util.LinkedList",
"list": [
{
"conditionType": "SRC_ADDR",
"invert": false,
"javaClass": "some text",
"value": "1.2.3.4/255.255.255.0"
}
]
},
"description": "Block and flag all TCP traffic from 1.2.3.0 netmask 255.255.255.0",
"enabled": false,
"flag": true,
"javaClass": "some text",
"ruleId": 100019
},
{
"block": true,
"conditions": {
"javaClass": "java.util.LinkedList",
"list": [
{
"conditionType": "DST_ADDR",
"invert": false,
"javaClass": "some text",
"value": "1.2.3.4/255.255.255.0"
},
{
"conditionType": "DST_PORT",
"invert": false,
"javaClass": "some text",
"value": "1000-5000"
}
]
},
"description": "Accept and flag all traffic to the range 1.2.3.1 - 1.2.3.10 to ports 1000-5000",
"enabled": false,
"flag": true,
"javaClass": "some text",
"ruleId": 100020
}
]
},
"version": 1
}
I'm trying to extract the list part, then, extract parts of it for storing the data.
Now, I'm able to load the whole file using myConfigDetails.Text = File.ReadAllLines("firewall.settings_9.js");, but I'm unable to extract the data I want .. The rule can have no conditions, single conditions or multiple conditions ...
I created the class below to store the data in temporarily for further usage:
public class fwDATA
{
public string ruleID;
public bool ruleBlock;
public string ruleValue;
public string ruleDesc;
public bool ruleEnabled;
public bool ruleFlag;
}
Can someone guide me to the correct way to extract the list parts (both the rule and conditions)
Parts I need:
"block"
"conditionType"
"value"
"description"
"enabled"
"flag"
"ruleId"
I want to send custom object to my controller method with jquery datatables default parameters for paging, sorting, searching and # of records binding.
The issue is :
When I Post object to server using datatable ajax it successfully post my object and also send parameters for length, start and draw BUT stops sending parameters for sorting n searching.
When I do GET request it sends all parameters but not only my custom object and obviously it should not
I want to send custom object with datatable defaults parameters for paging and sorting
WHAT IS THE SOLUTION FOR IT ?
here is code:
$('#example').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "/Color/Fetch",
"type": 'Post',
// "dataType": "json"
data: { color: $scope.colorSearch }
// dataSrc: 'data'
},
"columns": [
{ "data": "Active" },
{ "data": "Company_Id" },
{ "data": "Id" },
{ "data": "IsActive" },
{ "data": "Name" }
]
});
Controller action:
public JsonResult Fetch(Color color, int draw, int start, int length)
{
string search = Request.QueryString["search[value]"];
int sortColumn = -1;
string sortDirection = "asc";
if (length == -1)
{
length = 90;
}
// note: we only sort one column at a time
if (Request.QueryString["order[0][column]"] != null)
{
sortColumn = int.Parse(Request.QueryString["order[0][column]"]);
}
if (Request.QueryString["order[0][dir]"] != null)
{
sortDirection = Request.QueryString["order[0][dir]"];
}}
Try to use the following approach:
$('#example').DataTable({
"processing": true,
"serverSide": true,
/*
"ajax": {
"url": "/Color/Fetch",
"type": 'Post',
// "dataType": "json"
data: { color: $scope.colorSearch }
// dataSrc: 'data'
},
*/
"ajaxSource": "/Color/Fetch",
//fnServerData method used to inject the parameters into the AJAX call sent to the server-side
"fnServerData": function (sSource, aoData, fnCallback) {
aoData.push({ "name": "color", "value": "Blue" }); // Add some extra data to the sender
$.getJSON(sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json);
});
},
"columns": [
{ "data": "Active" },
{ "data": "Company_Id" },
{ "data": "Id" },
{ "data": "IsActive" },
{ "data": "Name" }
]
});
Here is the information about my development environment:
Microsoft Visual Studio Professional 2013
.NET Framework 4.0
jquery.min.js 1.11.3
jquery-ui.min.js 1.11.2
jQuery DataTables 1.10.7
Newtonsoft.Json.7.0.1
We implemented the tables on our website using jQuery DataTables that involved Server-Side Pagination. In other words, the application will only retrieve data from the database as the user clicks on the Page numbers or Page arrow keys at the bottom of the table.
$('#GameMatchRecordsLogTable').DataTable({
"aoColumns": [
{ "sTitle": "MatchId" },
{ "sTitle": "OrganizerUserID" }, {
"sTitle": "Team1", "bSortable":
true }, { "sTitle": "Team2",
"bSortable": true },
{ "sTitle": "DATE", "sType":
"datetime-us-asc", "bSortable":
true },
],
"bAutoWidth":false,
"fnRowCallback": function (nRow, aData,
iDisplayIndex) {
$(nRow).addClass("gradeX");
},
"iDisplayLength": 10,
"sDom": '<"clear">frtip',
"bProcessing": true,
"bServerSide": true,
"bLengthChange": false,
"bPaginate": true,
"bDestroy": true,
"bSort": true,
"aaSorting": [],
"bInfo": true,
"bFilter": false,
"sAjaxSource":
'GameMatchesList.aspx/SearchBasedOnMultipleCriteriaForGameMatches',
"bJQueryUI": true,
"bDeferRender": true,
"fnServerParams": function (aoData) {
aoData.push(
{ "name": "sortColumnArg",
"value": sortColumnArg }
, { "name": "isDescendingArg",
"value": isDescendingArg }
, { "name": "startDateArg",
"value": startDateArg }
, { "name": "endDateArg", "value":
endDateArg }
, { "name": "OwnersNameArg",
"value": OwnersNameArg }
, { "name":
"searchDrpDutyCycleArg", "value":
searchDrpDutyCycleArg }
, { "name":
"searchDrpSignedStateArg", "value":
searchDrpSignedStateArg }
);
},
"fnServerData": function (sSource, aoData,
fnCallback) {
$.ajax({
"dataType": 'json',
"contentType": "application/json;
charset=utf-8",
"type": "GET",
"url": sSource,
"data": aoData,
"success":
function (msg) {
var obj =
jQuery.parseJSON(msg.d);
fnCallback(obj);
},
beforeSend: function () {
$('.loader').show()
},
complete: function () {
$('.loader').hide()
}
});
}
});
The back-end C# code will resemble something like the following:
[WebMethod]
[ScriptMethod(UseHttpGet = true)]
[WebInvoke(ResponseFormat = WebMessageFormat.Json, BodyStyle =
WebMessageBodyStyle.Bare, Method = "GET")]
public static string
SearchBasedOnMultipleCriteriaForGameMatches()
{
return null;
}
We also need Server-side based sorting for the title headers of the jquery DataTable.
To elaborate, we want user to be able to click on the title Header of the DATE column which would in turn invoke AJAX method which in turn invokes a Server-side C# to get all the Data based on a particular order of the Date , therefore, if user toggles then it would go back and forth between descending and ascending of Date ).
Could someone please explain how I could implementing the aforementioned requirement?
I'm having problem with jQuery DataTables date range filtering. I'm getting (sSearch_0 = undefined~undefined) value with Bootstrap Datepicker. When I put a null value on first column instead of type: "date-range", the 3rd column filter is working fine.
(function ($) {
$(document).ready(function () {
// Implements the dataTables plugin on the HTML table
var oTable = $('#transactionHistoryDataTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bServerSide": true,
"sAjaxSource": "api/Sitecore/Account/DataProviderAction",
"bProcessing": true,
"aoColumns": [
{ "sName": "Date", "bSortable": false },
{ "sName": "Name", "bSortable": false },
{ "sName": "Bracket", "bSortable": false },
{ "sName": "Activity", "bSortable": false },
],
"sDom": '<"top">tip',
"oLanguage": {
"sEmptyTable": "Your custom message for empty table"
}
}).columnFilter({
"aoColumns": [
{ type: "date-range" },
null,
{ type: "select"},
null,
]
});
});
})(jQuery);
UPDATE
I changed my code into server side filtering like this
"fnServerParams": function (aoData) {
aoData.push({ "name": "activityParam", "value": $('#activityList').val() });
aoData.push({ "name": "dateFrom", "value": $('#dateFrom').val() });
aoData.push({ "name": "dateTo", "value": $('#dateTo').val() });
}
The workaround that I've come up with works with jquery ui the problem is I can't use Jquery UI is there any other workaround?