javascript - 按下拉选择项过滤的数据表

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/