从 JQuery 数据表中删除特定行答案

【问题标题】：Delete specific rows from a JQuery Datatable从 JQuery 数据表中删除特定行
【发布时间】：2016-04-12 06:40:27
【问题描述】：

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

<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。也没有用。提前致谢！

【问题讨论】：

看起来是个有趣的问题，也许你可以用静态值创建一个 JSFiddle，这样我们就可以玩得更多了？我还要提防您对每一行使用id="colorRow" 会导致html 无效（id 应该是唯一的）。不过，最初隐藏的 div 上的表格有时会出现问题...检查gyrocode.com/articles/…
jsfiddle.net/nu3hLqLk/2 我已经按照要求设置了 Fiddle。谢谢。 :)
啊，现在你去，那里的 JSFiddle 不是有效的 HTML 是吗？我可以花 20 分钟将其分类为有效的 HTML 并添加库（jQuery、DataTables、Bootstrap...？），但这并不是我真正想要帮助您的。如果您至少可以将其用作 DataTables 的三个示例，我将看看您的问题...
我已经添加了 JQuery 和 DataTable 库。但是，只有第一个表被初始化为 DataTable。我不知道似乎是什么问题。你能看一下吗。另外，过去我没有太多使用 Fiddle，所以很抱歉给您带来不便。 ://
好吧，你的IDs 仍然有问题，firstTable、secondTable 和 thirdTable 的id 有两件事（div 和 table...DataTables 应该做什么?)，您的表格也没有thead...并且该链接不代表您的更改。也许 JSFiddle 以外的东西可能会更好。您可以将代码提交到某个静态页面吗？

标签： jquery jsp datatables

【解决方案1】：

你需要确保你有一个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 here。希望有所帮助（TBH 可能有更好的方法 - 也许其他人会参与进来，因为这很老套 - 有一些东西可以看...... JSFiddle 是你的朋友）。

【讨论】：

非常感谢。你真棒！ :D