How to NOT have pagination in JQuery Datatable

Question

I am totally new to JQuery Datatables and I have code that I have inherited that contains JQuery Datatable that is paged. It seems that paging is built into datatables without having to do any explicit configuration.

Now my requirement is to display the entire table data by telling the JQuery Datatable NOT TO PAGE

I did a bit of googling and couldn't find any documentation that can configure the JQuery Datatable NOT to page. If anyone is aware of how to get this implemented, that would be really appreciated.

Thanks in advance for looking up my question.

Moiz Tankiwala · Accepted Answer · 2013-07-19 09:26:16Z

5

To take off the default paging (page size of 10), I needed to set one more property:

"iDisplayLength": -1,

So ultimately my definition looks something like this:

localTable = $(".classOfTable").dataTable({
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bStateSave": true,
                "iDisplayLength": -1,
                "sDom": '<"H"Tfr>t<"F"i>',
                "oTableTools": {
                    "sSwfPath": "@Url.Content("~/Scripts/DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf")"
                },....

I think what this does is makes the display size (number of records to be displayed) infinite so that the pager control does not appear.

answered Jul 19, 2013 at 9:26

Moiz Tankiwala

6,3507 gold badges45 silver badges53 bronze badges

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

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You can do it like this if you are using without jQuery UI themes

$(document).ready( function() {
    $('#example').dataTable( {
      "sDom": 'frt' // only show search.. processing.. and table
    });
});

http://live.datatables.net/iqewoh/2/edit#preview

with jQuery UI Theme

$(document).ready( function() {
    $('#example').dataTable( {
      "sDom": '<"H"f>rt' // only show search.. processing.. and table
    });
});

<"H"lfr>t<"F"ip> == In header put lfr.. table .. then footer put ip

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

Default: lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true)

please refer this stackoverflow answered by ᾠῗᵲᄐᶌ

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 13, 2013 at 13:22

Ghostman

6,1129 gold badges36 silver badges53 bronze badges

2 Comments

Moiz Tankiwala Over a year ago

Thanks for your inputs, but iDisplayLength is what I needed to set to take off the paging.

Digital Alchemist Over a year ago

@soul it also helped me in some other context :)

Community · Accepted Answer · 2017-02-07 07:20:16Z

I have added the smartness features on the the DataTables JS lib file. to act your tables more smarter that the existing one .. I have made a functionality to remove the Search Bar, Pagination's and Show entries when the table have the records lesser than equal to 10. However it will show the # of entries at the bottom to make the end user to understand the reason behind the tables smartness.. you can add the below code to your Datatables.JS lib file to make your tables more smarter.. search for "fnDrawCallback" and add the dynamic function..

fnDrawCallback: function(e) {
    e.aoData.length > e._iFiltersDisableRowMaxLength ? 
    ($("div#" + e.sTableId + "_filter").parent().show(), 
     $("select[aria-controls='" + e.sTableId + "']").parent().show(), 
     $("div#" + e.sTableId + "_info").parent().show(), 
     $("div#" + e.sTableId + "_length").parent().show()) : 
    ($("div#" + e.sTableId + "_filter").parent().remove(), 
     $("select[aria-controls='" + e.sTableId + "']").parent().remove(), 
     $("div#" + e.sTableId + "_info").next().remove(), 
     $("div#" + e.sTableId + "_length").parent().remove())
}

add the setting variable _iFiltersDisableRowMaxLength: 10 under DataTable.models.oSettings

this code will help you to add the smartness through out the site where ever you use the data-tables.

Collectives™ on Stack Overflow

How to NOT have pagination in JQuery Datatable

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related