CODEWITHSUNDEEP
jquerydatatables
Jeff Davidson
Jeff Davidson

Reputation: 1929

Datatables plugin

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

Upvotes: 0

Views: 5110

Answers (2)

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

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

});

Upvotes: 1

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

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.

Upvotes: 1

Related Questions