jquery - 如何在数据表中使用列过滤（选择菜单和输入元素）？

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 的表做超过 10,000 条记录）