从JQuery Datatable中删除特定行

我的JSP页面中有三个JQuery DataTables在不同的选项卡上，我想要显示几乎相同的表，稍作修改。 第一个选项卡上的表格如下：

 
  
 
${alist.A}
 
${alist.B}</td 
${alist.C}
 
${alist.D}
 
  
  

现在，第二个选项卡上的第二个表：

  
 
  
 
${alist.A}
 
${alist.B}</td 
${alist.C}
 
${alist.D}
 
  
  

第三个表格如下：

 
 
  
 
${alist.A}
 
${alist.B}</td 
${alist.C}
 
${alist.D}
 
  
  

现在，在第一张桌子上，我想展示一切。 在第二个表中，我想只显示在最后一列中具有“是”作为其值的行，而第三个表显示在最后一列中具有“否”作为其值的所有行。 另外，有些行既没有“是”也没有“否”。 他们可以被完全忽略。 为此，我尝试将其实现为：

  $(function(){ var firstTable = $('#firstTable').DataTable(); var secondTable = $('#secondTable').DataTable(); var thirdTable = $('#thirdTable').DataTable(); $.fn.dataTable.ext.search.push( function(settings, data, dataIndex) { return $(firstTable.row(dataIndex).node()).attr('data-user') == 'YES'; }); secondTable.draw(); $.fn.dataTable.ext.search.push( function(settings, data, dataIndex) { return $(secondTable.row(dataIndex).node()).attr('data-user') == 'NO'; }); thirdTable.draw(); }); 

但是，这给出了不按预期的方式。 第二个选项卡确实出现了，但是当我尝试使用搜索选项卡，第一个和第二个选项过滤掉任何内容时，两个表都混乱了。 我也试过fnDeleteRow 。 也没用。 提前致谢！

Answer 1

你需要确保你有一个thead ：

 
 
 
 
 
One
 
Two
 
Three
 
Yes/No
 
 
 
 
 
1 One
 
1 Two
 
1 Three
 
Yes
 
 
 
2 One
 
2 Two
 
2 Three
 
No
 
 
 
3 One
 
3 Two
 
3 Three
 
Yes
 
 
 
4 One
 
4 Two
 
4 Three
 
Yes
 
 
 
4 One
 
4 Two
 
4 Three
 
Yes
 
 
 
5 One
 
5 Two
 
5 Three
 
No
 
 
 
 
 
 
 
 
 
One
 
Two
 
Three
 
Yes/No
 
 
 
 
 
1 One
 
1 Two
 
1 Three
 
Yes
 
 
 
2 One
 
2 Two
 
2 Three
 
No
 
 
 
3 One
 
3 Two
 
3 Three
 
Yes
 
 
 
4 One
 
4 Two
 
4 Three
 
Yes
 
 
 
4 One
 
4 Two
 
4 Three
 
Yes
 
 
 
5 One
 
5 Two
 
5 Three
 
No
 
 
 
 
 
 
 
 
 
One
 
Two
 
Three
 
Yes/No
 
 
 
 
 
1 One
 
1 Two
 
1 Three
 
Yes
 
 
 
2 One
 
2 Two
 
2 Three
 
No
 
 
 
3 One
 
3 Two
 
3 Three
 
Yes
 
 
 
4 One
 
4 Two
 
4 Three
 
Yes
 
 
 
4 One
 
4 Two
 
4 Three
 
Yes
 
 
 
5 One
 
5 Two
 
5 Three
 
No
 
 
 
  

哪会阻止DataTables抱怨，那么你的DataTable可以这样创建：

 $(function() { var firstTable = $('#firstTable').DataTable(); var secondTable = $('#secondTable').DataTable({ "initComplete": function(settings) { var api = this.api(); api.rows().every(function(rowIdx, tableLoop, rowLoop) { var data = this.data(); if (data && data[3] !== "Yes") { api.rows(rowIdx).nodes().to$().addClass('remove'); } }); api.rows('.remove').remove().draw(); } }); var thirdTable = $('#thirdTable').DataTable({ "initComplete": function(settings) { var api = this.api(); api.rows().every(function(rowIdx, tableLoop, rowLoop) { var data = this.data(); if (data && data[3] !== "No") { api.rows(rowIdx).nodes().to$().addClass('remove'); } }); api.rows('.remove').remove().draw(); } }); }); 

在这里工作JSFiddle 。 希望有所帮助（可能有更好的方法做TBH – 也许其他人会填补，因为这是相当hackie – 它总是有助于看到… JSFiddle是你的朋友）。