Question

我的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>

现在，在第一张桌子上，我想展示一切。在第二个表格中，我只想显示有＆＃34;是＆＃34;的行。因为它们在最后一列和第三个表中的值显示所有具有＆＃34; No＆＃34;作为他们在最后一栏中的价值。此外，有些行既没有＆＃34;是＆＃34;或者＆＃34;否＆＃34;。他们可以被完全忽略。为此，我试图将其实现为：

  $(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：

<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抱怨，然后您的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 here。希望有所帮助（可能有更好的方法来做TBH - 也许其他人会填补，因为这是相当hackie - 它总是有帮助看到... JSFiddle是你的朋友）。

从JQuery Datatable中删除特定行

1 个答案: