如何在数据表中使用列筛选(包括选择菜单和输入元素)

Question

我正在使用DataTables来显示表值。。。我已经使用选择菜单进行了列筛选。。。但我必须同时使用选择菜单和输入框。。。

Answer 1

本质上没有什么不同。通过回调处理两者。下面的方法将允许您根据服务器端创建的表上的任何输入字段筛选列：

var oTable = $('#disporeport').dataTable( {
        "aaSorting": [[ 7, "asc" ]],
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "http://urltosubmit",
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bAutoWidth": false,
        "bFilter":true,
        "bLengthChange": true,
        "bPaginate": true,
        "bSort": true,
        "iDisplayLength": 25,
        "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "bInfo": true,
        "aoColumns": [
             { "sTitle": "col1", "bVisible":false},
             { "sTitle": "col2", "sWidth": "20%"},
             { "sTitle": "col3", "sWidth": "20%"}
        ],
        "fnServerParams": function ( aoData ) {
            aoData.push({ "name": "selboxparam", "value": $('#selboxid').val() },
                        { "name": "inputboxval", "value": $('#inputboxid').val() },
        }
    });

因此，fnServerParams是您所关心的。您为要传递的每个框提供一个名称和值。这些值作为$_REQUEST值传递到ajax页面，然后您可以在服务器端脚本中使用这些值来通过您选择的方法进行筛选。要重新绘制表格，只需单击按钮或用鼠标向上拖动字段即可完成fnDraw。

以下是使用基于dom的表进行此操作的官方数据表示例。也许它的参与度有点低，但它也受到表的大小的限制（我个人不会用基于dom的表做超过10000条记录）