按下拉选定项过滤的数据表

Question

我在一个网站 (asp.net) 中工作，我正在使用一个包含数据表的模板，这是该表上的初始化代码：

 if ($('body').data('page') == 'products') {


    var opt = {};

     // Tools: export to Excel, CSV, PDF & Print
    opt.sDom = "<'row m-t-10'<'col-md-6'f><'col-md-6'T>r>t<'row'<'col-md-6'><'col-md-6 align-right'p>>",
    opt.oLanguage = { "sSearch": "" } ,
    opt.iDisplayLength = 15,

    opt.oTableTools = {
        "sSwfPath": "assets/plugins/datatables/swf/copy_csv_xls_pdf.swf",
        "aButtons": ["csv", "xls", "pdf", "print"]
    };
    opt.aoColumnDefs = [
          { 'bSortable': false, 'aTargets': [6, 7, 8, 9] }

       ];



    var oTable = $('#products-table').dataTable(opt);

    oTable.fnDraw();



    /* Add a placeholder to searh input */
    $('.dataTables_filter input').attr("placeholder", "Search a product...");

    /* Delete a product */
    $('#products-table a.delete').on('click', function (e) {
        e.preventDefault();
        if (confirm("Are you sure to delete this product ?") == false) {
            return;
        }
        var nRow = $(this).parents('tr')[0];
        oTable.fnDeleteRow(nRow);
        // alert("Deleted! Do not forget to do some ajax to sync with backend :)");
    });

}

我想为特定列添加过滤器类型选择（下拉框）。 有什么帮助吗？

Answer 1

有不同的推荐方法，具体取决于您使用的数据表版本。假设您有这样的<select>：

<select id="filter">
    <option value="firefox">firefox</option>
    <option value="mozilla">mozilla</option>
</select>

dataTables 1.10.x（使用DataTable() 构造函数）：

$("#filter").on('change', function() {
    //filter by selected value on second column
    table.column(1).search($(this).val()).draw();
}); 

查看演示 -> http://jsfiddle.net/qxc26rmd/

dataTables 1.9.x（使用dataTable() 构造函数）：

$("#filter").on('change', function() {
    //filter by selected value on second column
    table.fnFilter($(this).val(), 1);
}); 

查看演示 -> http://jsfiddle.net/92ttv3o4/