如何做到自定义筛选与数据表和服务器端处理(How to do custom filtering wi

我使用的数据表显示在我的Web应用程序中的表格数据，并已将其配置为使用服务器端的处理，即查询通过AJAX服务器进行过滤的数据。我想根据特定于我的应用程序的附加参数来筛选，即对应于一些用户的选项（通过f.ex.在UI复选框）。如何让我的DataTable通过这些额外的过滤器参数的服务器？

Answer 1:

这个答案是为1.10.6版本更新

这是现在可以使用来实现AJAX选项。

示例代码

 $table.dataTable({
            "ajax":  {
                "url": "example.com/GetData",
                "type": "POST",
                "data": function(d) {
                    d.Foo = "bar";
                    d.Bar = "foo";
                    d.FooBar = "foobarz";
                }
            },
            "serverSide":true,
        });

富，酒吧和FooBar的将被张贴表单数据与平局一样，开始，长度等其他现有因此根据服务器端语言一起作为附加参数可以相应地阅读。

在现实生活中之情况，你可能有一个搜索按钮和一些输入，你可以通过调用触发过滤过程

        var table = $table.DataTable();
        table.ajax.reload();

当按钮被点击。

Answer 2:

该解决方案是使用数据表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});
    }
  });
});

Answer 3:

终于做到了花小时后！

我将在这里张贴大家的帮助完整的方法。

人们需要使用fnServerParams选项，允许添加自定义参数发送到服务器的XMLHttpRequest来发送。例如：

下面是我用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

我的HTML文件包含ID输入元素applicationName 。注意fnDraw()我用于启用重绘请求每当输入值改变元件。

Answer 4:

这为我工作

 $(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(); } } }, } );

Answer 5:

动态参数，这一个是为我工作，似乎是最好的解决办法

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'
});

文章来源: How to do custom filtering with Datatables and server-side processing