在我的JSP页面上的不同选项卡上，我有三个JQuery DataTables，在其中我希望显示几乎相同的表，并稍加修改。第一个标签上的表格如下：
<table id="firstTable"> <tbody> <c:forEach items="${A_List}" varStatus="status" var="alist"> <tr role="row" id="colorRow" data-user="${alist.D}"> <td>${alist.A}</td> <td>${alist.B}</td <td>${alist.C}</td> <td>${alist.D}</td> </tr> </c:forEach> </tbody> </table>
现在，第二个选项卡上的第二个表：
<table id="secondTable"> <tbody> <c:forEach items="${A_List}" varStatus="status" var="alist"> <tr role="row" id="colorRow" data-user="${alist.D}"> <td>${alist.A}</td> <td>${alist.B}</td <td>${alist.C}</td> <td>${alist.D}</td> </tr> </c:forEach> </tbody> </table>
第三张表如下：
<table id="thirdTable"> <tbody> <c:forEach items="${A_List}" varStatus="status" var="alist"> <tr role="row" id="colorRow" data-user="${alist.D}"> <td>${alist.A}</td> <td>${alist.B}</td <td>${alist.C}</td> <td>${alist.D}</td> </tr> </c:forEach> </tbody> </table>
现在，在第一张桌子上，我想显示所有内容。在第二个表上，我只想在最后一列中显示以“是”作为其值的行，而在第三个表中，最后一列显示所有以“否”作为其值的行。此外，有些行既没有“是”也没有“否”。它们可以完全忽略。为此，我尝试将其实现为：
$(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。也没用。提前致谢！
fnDeleteRow
您需要确保您拥有thead：
thead
<div id="first"> <table id="firstTable"> <thead> <tr> <th>One</th> <th>Two</th> <th>Three</th> <th>Yes/No</th> </tr> </thead> <tbody> <tr role="row" data-user="Yes"> <td>1 One</td> <td>1 Two</td> <td>1 Three</td> <td>Yes</td> </tr> <tr> <td>2 One</td> <td>2 Two</td> <td>2 Three</td> <td>No</td> </tr> <tr> <td>3 One</td> <td>3 Two</td> <td>3 Three</td> <td>Yes</td> </tr> <tr> <td>4 One</td> <td>4 Two</td> <td>4 Three</td> <td>Yes</td> </tr> <tr> <td>4 One</td> <td>4 Two</td> <td>4 Three</td> <td>Yes</td> </tr> <tr> <td>5 One</td> <td>5 Two</td> <td>5 Three</td> <td>No</td> </tr> </tbody> </table> </div> <div id="second"> <table id="secondTable"> <thead> <tr> <th>One</th> <th>Two</th> <th>Three</th> <th>Yes/No</th> </tr> </thead> <tbody> <tr> <td>1 One</td> <td>1 Two</td> <td>1 Three</td> <td>Yes</td> </tr> <tr> <td>2 One</td> <td>2 Two</td> <td>2 Three</td> <td>No</td> </tr> <tr> <td>3 One</td> <td>3 Two</td> <td>3 Three</td> <td>Yes</td> </tr> <tr> <td>4 One</td> <td>4 Two</td> <td>4 Three</td> <td>Yes</td> </tr> <tr> <td>4 One</td> <td>4 Two</td> <td>4 Three</td> <td>Yes</td> </tr> <tr> <td>5 One</td> <td>5 Two</td> <td>5 Three</td> <td>No</td> </tr> </tbody> </table> </div> <div id="third"> <table id="thirdTable"> <thead> <tr> <th>One</th> <th>Two</th> <th>Three</th> <th>Yes/No</th> </tr> </thead> <tbody> <tr> <td>1 One</td> <td>1 Two</td> <td>1 Three</td> <td>Yes</td> </tr> <tr> <td>2 One</td> <td>2 Two</td> <td>2 Three</td> <td>No</td> </tr> <tr> <td>3 One</td> <td>3 Two</td> <td>3 Three</td> <td>Yes</td> </tr> <tr> <td>4 One</td> <td>4 Two</td> <td>4 Three</td> <td>Yes</td> </tr> <tr> <td>4 One</td> <td>4 Two</td> <td>4 Three</td> <td>Yes</td> </tr> <tr> <td>5 One</td> <td>5 Two</td> <td>5 Three</td> <td>No</td> </tr> </tbody> </table> </div>
这将停止DataTables的抱怨，然后可以这样创建DataTables：
$(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是您的朋友）。
