按下拉选择项筛选的数据表

datatables filtered by dropdown selected item

本文关键字：筛选 数据表 选择      更新时间：2023-09-26

我在一个网站（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 :)");
    });
}

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

根据您使用的数据表的版本，有不同的推荐方法。假设你有一个像这样的<select>：

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

数据表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/

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

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

请参阅演示->http://jsfiddle.net/92ttv3o4/

相关文章：