Display page length at bottom of table

Question

All,

I am using jquery data tables. I am using the following example:

Paginated data tables

I was wondering if there is a way to show "Show 10 records" at the bottom, not the top. It should appear immediately before “Show 1 to 10 of 51 entries” .. at the bottom of the table.

How can i do this?

thank

Answer 1

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

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

In addition, you must modify .css to appear next to "Show ... posts", because in this way it appears above it.

sDom:

:

• 'l' -
• 'f' -
• 't' - !
• 'i' -
• 'p' -
• 'r' - pRocessing

:

• 'H' - jQueryUI "header" ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')
• 'F' - jQueryUI "footer" ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')

:

• '<' ' > ' - div
• '< "class" ' > '- div
• '< "# id" ' > '- div :
• '< "wrapper" flipt > ' 'ip > '

PS: :

datatables sDom

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

Answer 2

( ), , , . fnDrawCallback (http://datatables.net/usage/callbacks).

-

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

, ( , ).

ids, . dataTables_length.

css .

Answer 3

. : https://datatables.net/release-datatables/examples/basic_init/dom.html

:

css :

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

:

  $('.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">'
        });