数据表filter单个列输入和选择
我的问题是与DataTables相似：在各个列上过滤不同类型的过滤 ，但是这个问题没有得到回答，所以我希望有人可以帮助我们。
我正在使用jQuery Datatables 1.10.8，我目前对我的6列中的4列进行了单独的列过滤（最后一列不需要过滤）。
我想要做的是：
– 第1-4列：“文本输入”filter
– 第5列：“选择”filter
我正在尝试在表中使用多种filter类型，但我找不到任何可以帮助我的东西。
这是我目前的代码：
HTML：
ID OBJECT ID PREFERRED DESCRIPTION CATEGORY EDIT 1 nai_comp_1 1A-35 Compressor 1 - Suction Analog Input 2 nao_comp_1_en 1B-35 Compressor 1 - Enable Analog Output ID OBJECT ID GROUP DESCRIPTION CATEGORY
jQuery的：
//Setup jQuery DataTables $(function() { $.extend( $.fn.dataTable.defaults, { autoWidth: false, columnDefs: [{ orderable: false, width: '100px', targets: [ 5 ] }], dom: '', language: { search: 'Filter: _INPUT_', lengthMenu: 'Show: _MENU_', paginate: { 'first': 'First', 'last': 'Last', 'next': '→', 'previous': '←' } }, drawCallback: function () { $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup'); }, preDrawCallback: function() { $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup'); } }); //Uses jQuery Datatable API to include <input type='text' searchable filters $('.tfoot_search').each(function() { var title = $('.datatable-column-search-inputs thead th').eq($(this).index()).text(); $(this).html(''); }); var table = $('.datatable-column-search-inputs').DataTable(); table.columns().every( function () { var that = this; $('input', this.footer()).on('keyup change', function () { that.search(this.value).draw(); }); }); ////////////// ***** EXPERIMENTAL CODE **** REF ONLY ***** //////////////// // --- This is to make it to where all "td" elements in a footer have "select" elements for filtering --- // $('.datatable-column-search-selects').DataTable({ initComplete: function () { this.api().columns().every( function() { var column = this; var select = $('') .appendTo($(column.footer()).not(':last-child').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(''+d+'') }); }); } });
****** 解决了 ******
终于解决了。 这是我现在的整个代码（与上面的编辑比较）
jQuery的：
//NO CHANGES HERE $.extend( $.fn.dataTable.defaults, { autoWidth: false, columnDefs: [{ orderable: false, width: '100px', targets: [ 5 ] }], dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>', language: { search: 'Filter: _INPUT_', lengthMenu: 'Show: _MENU_', paginate: { 'first': 'First', 'last': 'Last', 'next': '→', 'previous': '←' } }, drawCallback: function () { $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup'); }, preDrawCallback: function() { $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup'); } }); //NO CHANGES HERE $('.tfoot_search').each(function() { var title = $('.datatable-column-search-inputs thead th').eq($(this).index()).text(); $(this).html(''); }); //**** CHANGES HERE **** $('.datatable-column-search-inputs').DataTable({ initComplete: function () { this.api().columns().every( function () { var column = this; if ($(column.footer()).hasClass('tfoot_search')) { var that = this; $('input', this.footer()).on('keyup change', function () { that.search(this.value).draw(); }); } else if ($(column.footer()).hasClass('tfoot_select')) { var column = this; var select = $('') .appendTo($('td.tfoot_select').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('') }); } }); } });
我注意到上面的代码在尝试执行多个选择下拉时包含一个错误。
使用下面的代码使用多个选择下拉列表：
$('.datatable-column-search-inputs').DataTable({ initComplete: function() { this.api().columns().every(function() { var column = this; if ($(column.footer()).hasClass('tfoot_search')) { var that = this; $('input', this.footer()).on('keyup change', function() { that.search(this.value).draw(); }); } else if ($(column.footer()).hasClass('tfoot_select')) { //Updated this section var 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('') }); } }); } });