jquery datatables row count across pages

Question

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

Matt Peterson · Accepted Answer · 2010-07-13 14:39:38Z

26

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

answered Jul 13, 2010 at 14:39

Matt Peterson

5,8694 gold badges35 silver badges34 bronze badges

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

4 Comments

Pritish Over a year ago

Thanks, this seems to work. Sorry, but wanted to know something else about datatables too. I'm extracting some of the data from the datatables, and passing them in an AJAX call. How do I make sure that I pass data from all rows and not only those on the first page ? Thanks, Pritish.

Matt Peterson Over a year ago

@Pritish Check out the docs (datatables.net/api) for the fnGetData function. With no arguments (as in my example), it is actually returning a 2D array with all of the data from the table in it.

Pritish Over a year ago

Yeah, took a look at it. alert(oTable.fnGetData()); prints out the HTML entire table data. How would I access individual HTML elements(specially, by name) from it though?

user9008566 Over a year ago

...Yeah I can also confirm it seems to not work server-side. Answer below works server-side I believe.

Gyrocode.com · Accepted Answer · 2017-05-19 04:10:47Z

13

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.

edited May 19, 2017 at 4:10

answered Sep 10, 2015 at 14:14

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

1 Comment

user9008566 Over a year ago

This should be solution as I can confirm it works on both server-side and client-side. Other solution only works client-side.

dotjoe · Accepted Answer · 2015-09-10 14:49:18Z

8

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

edited Sep 10, 2015 at 14:49

answered Aug 8, 2011 at 18:34

dotjoe

27.1k5 gold badges67 silver badges78 bronze badges

Comments

radbyx · Accepted Answer · 2015-09-10 07:25:09Z

0

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;

answered Sep 10, 2015 at 7:25

radbyx

9,72022 gold badges93 silver badges133 bronze badges

3 Comments

Gyrocode.com Over a year ago

This will show a number of filtered records, if search is applied, instead of total number of records. Besides, it's not recommended to access settings directly anymore, see this note, appropriate API methods should be used instead where possible.

radbyx Over a year ago

I know that is what it will show, sorry if I was unclear. But point taking, you should not access it like this, but use the API now. Should I delete my answer or should we keep it if it can someway help another not to do it like this?

Gyrocode.com Over a year ago

It works, so you may as well just leave it. You just need to clarify the DataTables version it works for (1.9 - 1.10) and the limitations (number of records with filtering applied, if any).

Navnath Kumbhar · Accepted Answer · 2015-06-24 13:18:59Z

-2

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.

answered Jun 24, 2015 at 13:18

Navnath Kumbhar

351 silver badge6 bronze badges

Collectives™ on Stack Overflow

jquery datatables row count across pages

5 Answers 5

4 Comments

SOLUTION

DEMO

NOTES

1 Comment

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

SOLUTION

DEMO

NOTES

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related