如何使 DataTables 能夠過濾選定的列

Question

我有以下帶有數據表的 JavaScript。

 $(document).ready(function() { var columns = [ {title: "Name"}, {title: "Position"}, {title: "Office"}, {title: "Extn."}, {title: "Start date"}, {title: "Salary"} ]; // Footer construction var $tfoot = $("#example tfoot tr"); for (var i = 0, len = columns.length; i < len ; i++){ $tfoot.append("<th>"); } $('#example').DataTable( { data: dataSet, columns: columns, initComplete: function (setting, json) { this.api().columns().every( function () { var column = this; var select = $('<select><option value=""></option></select>') .appendTo( $(column.footer()).empty() ) .on( 'change', function () { var val = $.fn.dataTable.util.escapeRegex( $(this).val() ); column .search( val ? '^'+val+'$' : '', true, false ) .draw(); } ); column.data().unique().sort().each( function ( d, j ) { select.append( '<option value="'+d+'">'+d+'</option>' ) } ); } ); } } ); } ); var dataSet = [ ["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"], ["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000"], ["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575"], ["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650"], ["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850"], ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000"], ["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000"], ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050"], ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"] ];

 <link href="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.css" rel="stylesheet"/> <script src="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.js"></script> <table id="example" class="display" width="100%"> <tfoot><tr></tr></tfoot> </table>

如您所見，當您運行代碼片段時，我可以使用底部的下拉列表過濾每一列。 .但是我打算做的只是在上應用該。 我怎樣才能做到這一點？

Answer 1

every()函數將索引參數傳遞給回調。 您可以使用它來檢查是否要添加過濾器。

this.api().columns().every( function (index) {
    if (index != 1 && index != 2) return;

 $(document).ready(function() { var columns = [ {title: "Name"}, {title: "Position"}, {title: "Office"}, {title: "Extn."}, {title: "Start date"}, {title: "Salary"} ]; // Footer construction var $tfoot = $("#example tfoot tr"); for (var i = 0, len = columns.length; i < len ; i++){ $tfoot.append("<th class='select-filter'>"); } $('#example').DataTable( { data: dataSet, columns: columns, initComplete: function (setting, json) { this.api().columns().every( function (index) { // just continue if index 1 and 2 if (index != 1 && index != 2) return; var column = this; var select = $('<select><option value=""></option></select>') .appendTo( $(column.footer()).empty() ) .on( 'change', function () { var val = $.fn.dataTable.util.escapeRegex( $(this).val() ); column .search( val ? '^'+val+'$' : '', true, false ) .draw(); } ); column.data().unique().sort().each( function ( d, j ) { select.append( '<option value="'+d+'">'+d+'</option>' ) } ); } ); } } ); } ); var dataSet = [ ["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"], ["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000"], ["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575"], ["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650"], ["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850"], ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000"], ["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000"], ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050"], ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"] ];

 <link href="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.css" rel="stylesheet"/> <script src="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.js"></script> <table id="example" class="display" width="100%"> <tfoot><tr></tr></tfoot> </table>

Answer 2

將 js 從 -- this.api().columns().every( function () {改為this.api().columns('.select-filter').every( function () { ，然后添加 class "選擇過濾器”到表頭：

<thead>
            <tr>
                <th>Name</th>
                <th class="select-filter">Position</th>
                <th class="select-filter">Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>

Answer 3

解決方案

您可以在對columns() API 方法的調用中指定具有列索引的數組。

例如，僅在第二列和第三列中顯示過濾器：

this.api().columns([1,2]).every( function (index) {

演示

 $(document).ready(function() { var columns = [ {title: "Name"}, {title: "Position"}, {title: "Office"}, {title: "Extn."}, {title: "Start date"}, {title: "Salary"} ]; // Footer construction var $tfoot = $("#example tfoot tr"); for (var i = 0, len = columns.length; i < len ; i++){ $tfoot.append("<th class='select-filter'>"); } $('#example').DataTable( { data: dataSet, columns: columns, initComplete: function (setting, json) { this.api().columns([1,2]).every( function (index) { var column = this; var select = $('<select><option value=""></option></select>') .appendTo( $(column.footer()).empty() ) .on( 'change', function () { var val = $.fn.dataTable.util.escapeRegex( $(this).val() ); column .search( val ? '^'+val+'$' : '', true, false ) .draw(); } ); column.data().unique().sort().each( function ( d, j ) { select.append( '<option value="'+d+'">'+d+'</option>' ) } ); } ); } } ); } ); var dataSet = [ ["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"], ["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000"], ["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575"], ["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650"], ["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850"], ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000"], ["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000"], ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050"], ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"] ];

 <link href="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.css" rel="stylesheet"/> <script src="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.js"></script> <table id="example" class="display" width="100%"> <tfoot><tr></tr></tfoot> </table>