I am using Datatables to display tabular data in my Web application, and have configured it to make use of server-side processing, i.e. query the server via AJAX for filtered data. I want to filter according to additional parameters that are specific to my application, i.e. corresponding to some user options (f.ex. via a checkbox in the UI). How do I make DataTables pass these additional filter parameters to the server?
Add a comment
|
5 Answers
This answer is updated for version 1.10.6
This is now can be done using the ajax option.
Sample code
$table.dataTable({
"ajax": {
"url": "example.com/GetData",
"type": "POST",
"data": function(d) {
d.Foo = "bar";
d.Bar = "foo";
d.FooBar = "foobarz";
}
},
"serverSide":true,
});
Foo, Bar and FooBar will be posted as Form Data as additional parameters along with other existing ones like draw, start, length, etc so depending on your server side language you can read them accordingly.
In a real life scenerio, you would probably have a Search button and some input, you can trigger the filtering process by calling
var table = $table.DataTable();
table.ajax.reload();
when the button is clicked.
1 Comment
luisluix
this worked for me, also it should be: table.api().ajax.reload(). for dataTable(); note the lowercase
The solution is to employ DataTables' fnServerParams option, which allows you to add custom parameters to be sent in the XMLHttpRequest sent to the server. For example:
$(document).ready(function() {
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/IndexXhr",
"fnServerParams": function (aoData) {
var includeUsuallyIgnored = $("#include-checkbox").is(":checked");
aoData.push({name: "includeUsuallyIgnored", value: includeUsuallyIgnored});
}
});
});
1 Comment
Jerzy Gebler
you can redraw datatable by adding event function to your element:
$('#id').change( function() { oTable.fnDraw(); } ); where oTable is a variable with your datable object oTable = $('#itemsTable').dataTable({....})Finally did it after spending hours!
I will post the complete method here for everyone's help.
One needs to use fnServerParams option, which allows adding custom parameters to be sent in the XMLHttpRequest sent to the server. For example:
Here is the coffescript I used:
jQuery ->
table = $('#logs').dataTable
bProcessing: true
bServerSide: true
sAjaxSource: $('#logs').data('source')
fnServerParams: (aoData) ->
applicationName = $("#applicationName").val()
aoData.push
name: "applicationName"
value: applicationName
return
$("#applicationName").on "change", ->
table.fnDraw()
return
My HTML file contains the input element with id applicationName. Note the fnDraw() element I used to enable redraw request whenever input value changes.
5 Comments
aknuds1
How does this technique differ from the one in my answer, except it is in CoffeeScript?
Peeyush
Your answer does not tell how to bind the html element with event that will redraw the table. More specifically, the
fnDraw() functionality. This method does not seem very useful to me without this.aknuds1
But binding to an HTML element has nothing to do with the question. I can vouch that my answer is useful without your functionality, since it solved my original problem (my being the author of this question).
Peeyush
This is exactly the reason I upvoted your answer. I added it because many people ( like me and the one who commented on your answer) are looking for both. This answer will save some time for them. Still I can delete my answer if you want.
aknuds1
I think it'd be much less confusing if you asked a question about what you're trying to do, and linked to its answer here instead.
Dynamic parameter, This one is working for me, seems best solution
t = $("#tbl_SearchCustomer").DataTable({
processing: true,
serverSide: true,
info: true,
ajax: {
url: '../Data/SearchCustomer',
data: function (data) {
data.CustomerCategoryID = $("#CustomerCategoryID").val(); // dynamic parameter
delete data.columns;
}
},
deferRender: true,
columns: [
{ "data": "FullName" },
],
dom: 'lfrtip'
});
Comments
This worked for me
$(document).ready(function() {
table = $('#okmorders').DataTable( {
// "ajax": 'http://cdpaha2.dev/admin/organizations/okm_orders'
serverSide: true,
"paging": true,
"searching": false ,
// "info": false,
"bLengthChange": false,
// "iDisplayLength":50,
// "aaSorting": [],
// "oLanguage": { "sEmptyTable": "No orders present " } ,
"aoColumnDefs" : [
{ 'bSortable' : false, 'aTargets' : [ 6 ]}
],
// "fnServerParams": function (aoData) {
// aoData.push({name: "includeUsuallyIgnored"});
// },
ajax: {
url: 'yoururl.json' ,
type: 'POST',
data:
{
'startDate':function(){return $("#startDate").val(); },
'endDate': function(){return $("#endDate").val(); } ,
'placedBy':function(){return $("#placedBy").val(); },
'customer_po': function(){return $("#customer_po").val(); } ,
'customer_ref': function(){return $("#customer_ref").val(); }
}
},
} );