Jquery DataTable可以排除某些类的行 [英] Jquery DataTables to exclude rows with a certain class

问题描述

我有一个HTML表，我已经应用了DataTables函数。我使用表的第一行，应用类模板作为我的模板行。然后选择此格式，并使用JSON Feed填充表中的所有行。问题是数据表提供的分页包括这个隐藏的模板行，所以总是让我的第一页显示的行数比所有其他的少一些。

有没有办法排除任何行（其中只有一个）应用于tr的类'模板'

 <！ -  DataTables CSS  - > 
< link href =/ bower_components / datatables-plugins / integration / bootstrap / 3 / dataTables.bootstrap.css =stylesheet> 
 
<！ - 数据表响应CSS  - > 
< link href =/ bower_components / datatables-responsive / css / dataTables.responsive.css =stylesheet> 
 
< div class =alert-message>< / div> 
 
< div class =dataTable_wrapper> 
 
< table class =loadtable table table-hover table-strippedid =problem_tabledata-page =0data-params =data-orderby =p.name data-orderdir =DESCdata-url =/ admin / problem / ajax / tables / problemcellpadding =0cellspacing =0border =0> 
< thead> 
< tr> 
< th class =orderable asc> Name< / th> 
< th class =orderable no-sortwidth =10％>有用？< / th> 
< th class =orderablewidth =15％>创建< / th> 
< th class =orderable cwidth =10％> Live？< / th> 
< th class =r no-sortwidth =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 =可订购>＃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（{
 respond：true，
 pageLength：20 ，
 aLengthMenu：[[20，40，60，-1]，[20，40，60，全部]]，
 aoColumnDefs：[{bSortable：false，aTargets [no-sort]}] 
}）; 
}，200）; 
 
}）; 
  

解决方案

您可以使用旧的 custum行过滤器 ：

< pre class =lang-js prettyprint-override> $。fn.dataTableExt.afnFiltering.push（
function（oSettings，aData，iDataIndex）{
var row = oSettings。 aoData [iDataIndex] .nTr;
return $（row）.hasClass（'template'）？false：true;
}
）;


即使它是1.10.x之前的匈牙利符号，它仍然适用于 DataTable（）实例

演示 - > http://jsfiddle.net/zaxkrc49/

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

});

解决方案

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/

这篇关于Jquery DataTable可以排除某些类的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！