使用服务器端数据表对每一列执行搜索

Question

我正在使用服务器端数据表，我想知道如何启用对每一列的搜索（某些列包含 select 框）。我指的是 http://legacy.datatables.net/ref link，这里我看到 aoSearchCols 可以用于搜索，但它不起作用我当前的脚本是

     $(document).ready(function() {
      $('#LogTable').dataTable({
        "bFilter": true,
        "bSort": true, 
        "bProcessing" : false,
        bServerSide : true,
        sAjaxSource : "./Log!List.action",
        sServerMethod : "POST",
        "columns": [
            { "data": "LogId" },
            { "data": "tableName" },
            { "data": "columnName" },
            { "data": "oldValue" },
            { "data": "newValue" },
            { "data": "changeTypeText" },
            { "data": "changedByName" },
            { "data": "changedOn" },
        ],
        "aoSearchCols": [
            { "data": "LogId" },
            { "data": "tableName" },
            { "data": "columnName" },
            { "data": "oldValue" },
            { "data": "newValue" },
            { "data": "changeTypeText" },
            { "data": "changedByName" },
            { "data": "changedOn" },
        ]
    });
});

有谁知道如何做到这一点

我正在使用的东西： JQuery 数据table 和 Java Struts 2
---编辑---
我尝试手动放置然后它没有将它与参数一起使用

   initComplete : function() {
        var r = $('#LogTableSearch tr');
        var i=0;
        r.find('td').each(function() {
            $(this).attr('id','sSearch_'+i++);
       });
    $('#LogTable tfoot').append(r);
    $('#sSearch_0').css('text-align', 'center');
   },

它在 table 的底部显示了搜索框，但在 ajax 请求时它没有将其与请求一起使用

Answer 1

根据文档

     $(document).ready( function() {
         $('#example').dataTable( {
           "aoSearchCols": [
             null,
             { "sSearch": "My filter" },
             null,
             { "sSearch": "^[0-9]", "bEscapeRegex": false }
,null,
null,
null,
null
           ]
         } );
       } )

应该是在这种情况下，我应该根据 tableName

进行过滤

Answer 2

经过大量研究，我终于找到了一种可行的方法，我不知道它是否正确，但这对我有用这是我的脚本：

<script>
    $(document).ready(function() {
       var table =  $('#LogTable').DataTable({
            "bSort" : true,
            "bProcessing" : false,
            "bInfo" : true,
            bServerSide : true,
            sAjaxSource : "./Log!List.action",
            sServerMethod : "POST",
            "aoColumns" : [ 
                {"data" : "LogId"}, 
                {"data" : "tableName"}, 
                {"data" : "columnName"}, 
                {"data" : "oldValue"}, 
                {"data" : "newValue"}, 
                {"data" : "changeTypeText"}, 
                {"data" : "changedByName"}, 
                {"data" : "changedOn"}, ],
        });
        // Apply the search
        table.columns().every( function () {
            var that = this;
            $('input', this.footer() ).on( 'keyup change', function () {
                that
                    .search( this.value )
                    .draw();
            } );
            $( 'select', this.footer() ).on( 'keyup change', function () {
                that
                    .search( this.value )
                    .draw();
            } );
        } );
    });
</script>

我在 table

的 tfoot 标签中手动创建了我的搜索字段

现在搜索参数转到服务器端，我从请求中获取它们，我的工作完成了。 :)

使用服务器端数据表对每一列执行搜索

Perform searcing on every column using serverside dataTable

java

datatable

jquery

server-side