Display page length at the bottom of table

Question

All,

I am using Jquery Data Tables. I am using the following example:

DataTables with Pagination

I was wondering if there's a way to display "Show 10 Entries" on the bottom instead of top. It should be displayed right before "Showing 1 to 10 of 51 entries".. at the bottom of the table.

How can I do that?

Thanks

Answer 1

The way to do that is to change the sDom in the .js, where you define the table:

$('#TABLE_ID').dataTable({`
    "sDom": 'Rfrtlip'`    
 });

Additionally, you should change the .css to appear next to the "Showing ... entries", because this way it appear above it.

This is the explanation of the sDom options:

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>' 'ip>'

PS: This could also help you:

datatables sDom

add-datatables-length-at-the-bottom-of-the-table

Answer 2

Had a similar problem (wanted to remove some unnecessary controls) and the only way to deal with it seems to be modifying table yourself. I used fnDrawCallback callback (http://datatables.net/usage/callbacks).

It will be something like this in your case

$('#tableId').dataTable({
    "fnDrawCallback": function () {
        $('#tableId_info').prepend($('#tableId_length'));
    }
});

Just check the generated code in that demo, it's really quite simple (except it has no formatting or indentation).

You can also use class names instead of ids, if you're not afraid to affect other tables on the page. They're in the form dataTables_length.

Use css for additional styling.

Answer 3

Here is an example. This documentation helps a lot: https://datatables.net/release-datatables/examples/basic_init/dom.html

My data table looks like this:

I also had to add in css this line:

.dataTables_length {
    margin-top: 10px;
    margin-left: 20px;
}

The code is:

  $('.data_table').DataTable({
            "iDisplayLength": 20,
            "aLengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]],
            "pagingType": "simple_numbers",
            "language": {
                searchPlaceholder: "Search",
                search: "",

            },
            "dom": '<"top"f>rt<"bottom"ilp><"clear">'
        });