jQuery 如何使用数据表和服务器端处理进行自定义过滤
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13644350/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to do custom filtering with Datatables and server-side processing
提问by aknuds1
I am using Datatablesto 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?
我正在使用Datatables在我的 Web 应用程序中显示表格数据，并将其配置为使用服务器端处理，即通过 AJAX 查询服务器以获取过滤数据。我想根据特定于我的应用程序的附加参数进行过滤，即对应于某些用户选项（例如，通过 UI 中的复选框）。如何让 DataTables 将这些额外的过滤器参数传递给服务器？
回答by Quannt
This answer is updated for version 1.10.6
此答案已针对 1.10.6 版更新
This is now can be done using the ajaxoption.
这现在可以使用ajax选项来完成。
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.
Foo、Bar 和 FooBar 将作为表单数据作为附加参数与其他现有参数一起发布，例如绘制、开始、长度等，因此根据您的服务器端语言，您可以相应地阅读它们。
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.
单击按钮时。
回答by aknuds1
The solution is to employ DataTables' fnServerParamsoption, which allows you to add custom parameters to be sent in the XMLHttpRequest sent to the server. For example:
解决方案是使用 DataTables 的fnServerParams选项，该选项允许您在发送到服务器的 XMLHttpRequest 中添加要发送的自定义参数。例如：
$(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});
}
});
});
回答by Peeyush
Finally did it after spending hours!
花了几个小时终于做到了！
I will post the complete method here for everyone's help.
我会在这里发布完整的方法以供大家帮助。
One needs to use fnServerParamsoption, which allows adding custom parameters to be sent in the XMLHttpRequest sent to the server. For example:
一个需要使用fnServerParams选项，它允许在发送到服务器的 XMLHttpRequest 中添加要发送的自定义参数。例如：
Here is the coffescript I used:
这是我使用的coffescript：
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.
我的 HTML 文件包含带有 id 的 input 元素applicationName。请注意fnDraw()我用来在输入值更改时启用重绘请求的元素。
回答by Arun Prasad E S
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'
});
回答by Shridhar U Patil
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(); }
}
},
} );