编辑jQuery dataTables信息

我正在使用Jquery Data表来呈现我的表。 我有一个列有活动或非活动记录的列。 现在，我希望在显示72个条目中显示1到10之后显示有效值和非活动值的列数。

我的桌子就像这样

jQuery的

 $(document).ready(function () { $('#example').dataTable({ "bLengthChange": true, "paging": true, "sPaginationType": "full_numbers" , //For Different Paging Style "scrollY": 400, // For Scrolling "jQueryUI": false, //Enabling JQuery UI(User InterFace) "lengthMenu": [[30, 50, 100, -1], [30, 25, 50, "All"]], drawCallback: function (settings) { var api = this.api(); // get the number of rows, but remove the page:current if you want number of rows in entire dataset var count = api.rows({ api: $('#example tbody tr td[value="active"]') }).data().length; // this takes the count and appends it in a span tag to the dataTables pageinate div element $('').html(count + ' rows').appendTo($('.dataTables_info')); } }); });  

Answer 1

我会在#active添加一个唯一的#active元素：

 dom: 'lfrt<"info"i<"#active">>p', 

然后像这样使用drawCallback

 drawCallback: function() { var active = 0; this.api().rows({'filter':'applied'}).every(function() { if (this.data().active == 'active') active++ }) $('#active').html(active+ ' active ...'); } 

演示 – > http://jsfiddle.net/3dmpwokd/

注意 ：如果您使用的是基于DOM的表，请使用例如this.data()[2]而不是this.data().active来评估。

我添加了这个CSS，我不知道你想如何呈现信息

 .dataTables_info { float: left !important; clear: none !important; } #active { display: inline-block; margin: 12px; } 

Answer 2

看看事件并使用抽奖后被解雇的事件 。 然后，您可以调用jQuery来覆盖info元素中的文本。

具体来说，drawCallBack将获得表中的结果，您可以根据需要过滤它们然后获取计数。 之后，只需在.dataTables_paginate元素中附加一个span或一些标记。 希望它有所帮助。

 var table = $('#notifications') .DataTable({ drawCallback: function (settings) { //gets the table api instance var api = this.api(); // get the number of rows, but remove the page:current if you want number of rows in entire dataset var count = api.rows({ page: 'current' }).data().length; // this takes the count and appends it in a span tag to the dataTables pageinate div element $('').html(count + ' rows').appendTo($('.dataTables_paginate')); } });