如何在数据表中使用列过滤(选择菜单和输入元素)?

时间:2012-07-17 15:24:37

标签: jquery datatables

我使用DataTables显示表格值...我已经使用选择菜单进行了列过滤...但我必须同时使用选择菜单和输入框...

1 个答案:

答案 0 :(得分: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的表执行此操作的official datatables example。也许它的参与程度稍微低一些,但它也受到表格大小的限制(我个人不会用基于dom的表格做超过10,000条记录)