开发者

jquery datatables row count across pages

I'm using the jQuery DataTables plug-in for my HTML table.

Is there a way to get the row count of the number of rows in my table across pages.

For example, if I have 70 rows in my table, and let's say 50 of them get displayed on the 1st page, and 20 on the 2nd page. Is there a way to get the count of 70?

I've tried all the suggestions included in this post: jQuery: count number开发者_运维问答 of rows in a table

This includes:

var rowCount = $('#myTable tr').length;

var rowCount = $('#myTable tr').size();

var rowCount = $('#myTable >tbody >tr').length;

var rowCount = $("#myTable").attr('rows').length;

But all the above suggestions seem to return the number of rows on the existing page (in this case, 50 and not 70).


It looks like DataTables is removing the rows that aren't on the current page from the DOM, so you aren't going to be able to count them with a jQuery selector. You'll have to use the DataTables API, specifically the fnGetData function:

$(document).ready(function() {

    // Initialize your table
    var oTable = $('#myTable').dataTable();

    // Get the length
    alert(oTable.fnGetData().length);
} );


SOLUTION

For DataTables 1.10

Use page.info() to retrieve information about the table as shown below.

Property recordsTotal will hold total number of records in the table.

var table = $('#example').DataTable({
    "initComplete": function(settings, json){ 
        var info = this.api().page.info();
        console.log('Total records', info.recordsTotal);
        console.log('Displayed records', info.recordsDisplay);
    }
});

DEMO

See this jsFiddle for code and demonstration.

NOTES

This solution will work for both client-side and server-side processing modes as long as you use page.info() once data has been retrieved, for example in initComplete callback function.


When using server-side paging you can access the total record count like so...

dt.fnSettings()._iRecordsTotal;

If you're using server side paging, you could hook into the fnDrawCallback and update your html whenever the table is drawn...

$('#Table').dataTable({
    "fnDrawCallback": function (oSettings) {
        alert(oSettings._iRecordsTotal);
     }
});


If you are using the Scroller extension, and use search to filter down the rows to a subset, you can get the length of that subset like this

$('#foo').dataTable().fnSettings().aiDisplay.length;


In the JSON response of your datatable ajax call, we get 'iTotalDisplayRecords' as one of the property of that response JSON object. You can directly use the value of 'iTotalDisplayRecords' as number of records in your Data Table.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜