Datatables plugin

Question

I've looked on the website but I can not find out how to put the sInfo into the table footer for the datatables plugin for jQuery. I've looked into their documentation but just am not seeing anything. Any ideas?

Edit Post:

$(document).ready(function() {

$('#usersPageList').dataTable( {
    "sDom": 'rt<"pagination"p>',
    "iDisplayLength": 1,
    "sPaginationType": "full_numbers",
} );

var info = $('.dataTables_info')
var clone = info.clone();
info.hide();
$('tfoot').append(clone);  

});

Edit Post 2:

Pastebin Code

The main part I'm looking for is the Showing x rows of x total or whatever. — Jeff Davidson
– Jeff Davidson, Commented Jul 7, 2011 at 3:15

Nicola Peluchetti · Accepted Answer · 2011-07-08 14:20:03Z

1

Actually you need to play a little with the sDom option. Taken from the documentation:

This initialisation variable allows you to specify exactly where in the DOM you want DataTables to inject the various controls it adds to the page (for example you might want the pagination controls at the top of the table). DIV elements (with or without a custom class) can also be added to aid styling. The follow syntax is used:
The following options are allowed:

'l' - Length changing
'f' - Filtering input
't' - The table!
'i' - Information
'p' - Pagination
'r' - pRocessing
The following constants are allowed:
'H' - jQueryUI theme "header" classes ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')
'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')
The following syntax is expected:
'<' and '>' - div elements
'<"class" and '>' - div with a class
'<"#id" and '>' - div with an ID
Examples:
'<"wrapper"flipt>', '<lf<t>ip>'

so for example if you do (i suppose you are using jquery UI <"H"lfr>t<"F"ip> you have the length changing, the filter and the "processing..." (if you have ajax enabled) in the header, the you have the table, then you have info and pagination in the footer. If you want you can use the letters more than one time so you can put the info twice or thrice if you want.

EDIT - in your comment you say you want to add the tfoot of your table. In that case you could just add it manually:

$(document).ready(function() {

$('#usersPageList').dataTable( {
    "sDom": 'rti<"pagination"p>',//add i here this is the number of records
    "iDisplayLength": 1,
    "sPaginationType": "full_numbers",
} );

var info = $('.dataTables_info')
$('tfoot').append(info);  

});

edited Jul 8, 2011 at 14:20

answered Jul 7, 2011 at 8:49

Nicola Peluchetti

76.9k32 gold badges150 silver badges197 bronze badges

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

7 Comments

Jeff Davidson Over a year ago

But I'm talking about the table footer and not sure how that would be like.

Jeff Davidson Over a year ago

I updated my post above to show you the jquery code I have which does not sole the current problem.

Nicola Peluchetti Over a year ago

That is because you are not displaying table info: i edit my answer

Jeff Davidson Over a year ago

However one last thing it does NOT update with the Showing so many records on each page.

Nicola Peluchetti Over a year ago

I edited my answer not to use clone: in this way the values update correctly

|

Andrew Whitaker · Accepted Answer · 2011-07-07 03:19:40Z

1

Are you looking for the bInfo option?

Enable or disable the table information display. This shows information about the data that is currently visible on the page, including information about filtered data if that action is being performed.

answered Jul 7, 2011 at 3:19

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

7 Comments

Jeff Davidson Over a year ago

I'm sorry I thought I saw it as sInfo. But how do I display it in teh table footer not the page footer

Andrew Whitaker Over a year ago

@Jeff: It looks like that information is displayed beneath the table, but not actually in the tfoot element. Is that where you want it?

Jeff Davidson Over a year ago

I'd like to have it nicely displayed nicely in the tfoot if at all possible.

Jeff Davidson Over a year ago

I just saw where I saw the sInfo though. It was here. datatables.net/usage/i18n

Andrew Whitaker Over a year ago

@Jeff: You could manually move that html into the tfoot after the table is rendered. Why is it so important that it's in the table footer?

|

Collectives™ on Stack Overflow

Datatables plugin

2 Answers 2

7 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related