CODEWITHSUNDEEP
javascriptjqueryjquery-uipaginationdatatables
Jake
Jake

Reputation: 26117

Display page length at the bottom of table

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

Upvotes: 7

Views: 24578

Answers (3)

Laura Chesches
Laura Chesches

Reputation: 2583

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:

enter image description here

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

Upvotes: 2

tsveti_iko
tsveti_iko

Reputation: 7982

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

Upvotes: 17

Nikita Rybak
Nikita Rybak

Reputation: 68006

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.

Upvotes: 4

Related Questions