Delete specific rows from a JQuery Datatable

Question

I have three JQuery DataTables in my JSP page on different tabs where I want to display almost the same table, with a slight modification. The table on the first tab goes as:

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

Now, the second table on the second tab:

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

And the third table goes as:

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

Now, on the first table, I want to display everything. On the second table, I want to display only the rows which have "Yes" as their value in the last column and the third table displays all the rows which have "No" as their value in the last column. Additionally, there are rows which neither have a "Yes" or a "No". They can be completely ignored. For this, I tried to implement it as:

  $(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();
        });

However, this gives doesn't do as intended. The second tab does appear, but when I try to filter out anything using the search tab, the first and the second, both tables are messed up. I also tried fnDeleteRow. Didn't work either. Thanks in advance!

Answer 1

You need to make sure you've got a 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>

Which will stop DataTables complaining, then your DataTables can be created like this:

$(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();
         }
     });
 });

Working JSFiddle here. Hope that helps (there are probably better ways of doing it TBH - perhaps someone else will chip in as this is quite hackie - it always helps to have something to look at... JSFiddle is your friend).