Jquery DataTables to exclude rows with a certain class

Question

I have an HTML table in which I have applied the DataTables function to. I use the first row of the table with the class 'template' applied as my template row. Then pick this formatting up and populate all the rows in the table using a JSON feed. The problem is that the pagination provided by DataTables includes this hidden template row so always makes my first page display 1 less row than all the others.

Is there a way to exclude any rows (of which there will only be one) with the class 'template' applied to the tr?

<!-- DataTables CSS -->
<link href="/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">

<!-- DataTables Responsive CSS -->
<link href="/bower_components/datatables-responsive/css/dataTables.responsive.css" rel="stylesheet">

<div class="alert-message"></div>

<div class="dataTable_wrapper">

    <table class="loadtable table table-hover table-stripped" id="problem_table" data-page="0" data-params="" data-orderby="p.name" data-orderdir="DESC" data-url="/admin/problem/ajax/tables/problem" cellpadding="0" cellspacing="0" border="0">
        <thead>
            <tr>
                <th class="orderable asc">Name</th>
                <th class="orderable no-sort" width="10%">Helpful?</th>
                <th class="orderable" width="15%">Created</th>
                <th class="orderable c" width="10%">Live?</th>
                <th class="r no-sort" width="12%">Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr id="problem_#PROBLEMID#" class="template #ROWCLASS#">
                <td class="orderable asc">#NAME#</td>
                <td class="orderable"><span class="fa fa-thumbs-o-up"> #UP_VOTE#</span> <span class="fa fa-thumbs-o-down"> #DOWN_VOTE#</span></td>
                <td class="orderable">#CREATED#</td>
                <td class="orderable c"><span class="fa #IS_LIVE#"></span></td>
                <td class="r last">#ACTIONS#</td>
            </tr>
         </tbody>
    </table>
</div>

$(document).ready(function() {

    delay( function() {
        $('#problem_table').DataTable({
            responsive: true,
            pageLength: 20,
            aLengthMenu: [[20, 40, 60, -1], [20, 40, 60, "All"]],
            aoColumnDefs : [{ "bSortable" : false, "aTargets" : [ "no-sort"     ] }]
        });
    }, 200 );

});

Yes, I need it to populate the table. Although I can remove it once I have done this. However, I have never needed to before and some of my tables run ajax to re-populate the data and once again use this hidden row as a template — Eth
– Eth, Commented Apr 13, 2015 at 9:37
I think this hidden row has only significance for design. As it doesn't seem that you require any information from that row. Am I right? — Nimesh
– Nimesh, Commented Apr 13, 2015 at 9:54
Thats correct. I need the row in the table hidden for data but not for design so I dont need/want dataTables to include it in any of its interactions Here is an example of the side effect of this hidden field !Screenshot — Eth
– Eth, Commented Apr 13, 2015 at 10:58
Can you show how the markup looks like? (include an example in the question) — davidkonrad
– davidkonrad, Commented Apr 13, 2015 at 11:24

davidkonrad · Accepted Answer · 2015-04-13 13:16:42Z

6

You can use the good old custum row filter for this :

$.fn.dataTableExt.afnFiltering.push(
    function( oSettings, aData, iDataIndex ) {
        var row = oSettings.aoData[iDataIndex].nTr;
        return $(row).hasClass('template') ? false : true;
    }
);

Even though it is pre-1.10.x hungarian notation, it still works with DataTable() instances.

demo -> http://jsfiddle.net/zaxkrc49/

answered Apr 13, 2015 at 13:16

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Eth Over a year ago

Spot on, thanks. I tried to do this earlier but was obviously looking at in completely the wrong way!

Aditya Shanker Tagirisa Over a year ago

it is showing filtered from 3 entries how to remove that?

davidkonrad Over a year ago

@AdityaShankerTagirisa - you can use the info : false option.

Collectives™ on Stack Overflow

Jquery DataTables to exclude rows with a certain class

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related