使用下拉列表过滤表（dataTables）

我正在使用dataTables jQuery插件（这非常棒），但是根据我的选择框的更改，我无法让我的表进行过滤。

function：

$(document).ready(function() { $("#msds-table").dataTable({ "sPaginationType": "full_numbers", "bFilter": false }); var oTable; oTable = $('#msds-table').dataTable(); $('#msds-select').change( function() { oTable.fnFilter( $(this).val() ); }); }); 

HTML：

    All Group 1 Group 2 Group 3 Group 4 Group 5 Group 6  
 
 
 
Column 1
 
Column 2
 
etc
 
 
 
 
Group 1
 
 
Download
 
 
 
Group 1
 
 
Download
 
 
 
Group 1
 
 
Download
 
 
  

表继续显示一堆项目，直到“Group 6”，但你明白了。 有没有人试过这样做过？

Answer 1

dataTablesfunction

我知道我以前做过这个，你必须看一下这条小信息：

请注意，如果您希望在DataTables中使用过滤，则必须保持“true” – 要删除默认过滤输入框并保留过滤function，请使用sDom 。

您需要设置{bFilter：true}，并将到通过sDom注册的自定义元素中。 我猜你的代码看起来像这样：

 $(document).ready(function() { $("#msds-table").dataTable({ "sPaginationType": "full_numbers", "bFilter": true, "sDom":"lrtip" // default is lfrtip, where the f is the filter }); var oTable; oTable = $('#msds-table').dataTable(); $('#msds-select').change( function() { oTable.fnFilter( $(this).val() ); }); }); 

oTable.fnFilter( $(this).val() );的代码oTable.fnFilter( $(this).val() ); {bFilter:false}; 根据文件

Answer 2

  $.extend( true, $.fn.dataTable.defaults, { "bFilter": true, initComplete: function () { this.api().column(1).every( function () { var column = this; var select = $('All Subjects') .appendTo( $(column.header()).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+'' ) } ); } ); }, } ); 

Answer 3

使用此代码：

  $('.btn-success').on('click',function (e) { //to prevent the form from submitting use e.preventDefault() e.preventDefault(); var res = $("#userid").val(); var sNewSource = "myaccount/MyData_select?userid=" + res + ""; var oSettings = ETable.fnSettings(); oSettings.sAjaxSource = sNewSource; ETable.fnDraw(); });