使用serverside dataTable对每列执行搜索

时间:2015-05-28 13:57:02

标签: java jquery datatable server-side

我正在使用服务器端dataTable,我想知道如何在每个列上启用搜索(某些列包含选择框)。 我指的是http://legacy.datatables.net/ref链接,在这里我看到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数据表和 Java Struts 2
--- --- EDIT
我试图手动,然后它没有把它与params

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

它显示了表格的fotter中的搜索框,但是在ajax请求中它没有带请求

2 个答案:

答案 0 :(得分:0)

根据文件

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

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

进行过滤

答案 1 :(得分:0)

经过大量的研究,我终于找到了一种有效的方法,但我不知道它的正确与否,但这对我有用 这是我的剧本:

<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>

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

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