how to remove pagination in datatable

Question

I have used Datatables in grid but need not pagination.

There is a list of orders in one page and I show them in a Datatable grid but in bottom I do not want to show pagination. Is there any way to remove or hide pagination from the data table by using a bit customization on the jQuery library.

enter image description here

I tried to customize it but I found very few methods to do it..

which method or plugin are you using? – Naryl Jul 24 '13 at 11:32 — Naryl, Jul 24 '13 at 11:32

score 197 · Accepted Answer · answered Jul 24 '13 at 11:32

197

You should include "bPaginate": false, into the configuration object you pass to your constructor parameters. As seen here: http://datatables.net/release-datatables/examples/basic_init/filter_only.html

answered Jul 24 '13 at 11:32

nstCactus

5,141
2
30
41

1

If I want to display only the 100 first lines of my data, bPaginate doesn't work, because it displays all the data regardless of my iDisplayLength parameter. Do you know how to avoid that? – Alexis Dufrenoy Jun 04 '14 at 14:56
Correct me if I'm wrong but if you only show the first 100 items and disable pagination, the user has no way to display the following result. If so, then you should try to change you [datasource](http://datatables.net/release-datatables/examples/data_sources/index.html) directly. It seems to be a different issue so you should consider opening a new question and give us some of your code. – nstCactus Jun 05 '14 at 00:15
1

Actually, it's for a search function, and I also need to display a message saying the user needs to change her search criteria because too much lines were retrieved. For the record, I asked on the Datatables forum, and the solution is to add an option: sDom = lfrt (without a "p", for no pagination). May be useful... – Alexis Dufrenoy Jun 05 '14 at 09:25

score 99 · Answer 2 · edited Jun 20 '20 at 09:12

DISABLE PAGINATION

For DataTables 1.9

Use bPaginate option to disable pagination.

$('#example').dataTable({
    "bPaginate": false
});

For DataTables 1.10+

Use paging option to disable pagination.

$('#example').dataTable({
    "paging": false
});

See this jsFiddle for code and demonstration.

REMOVE PAGINATION CONTROL AND LEAVE PAGINATION ENABLED

For DataTables 1.9

Use sDom option to configure which control elements appear on the page.

$('#example').dataTable({
    "sDom": "lfrti"
});

For DataTables 1.10+

Use dom option to configure which control elements appear on the page.

$('#example').dataTable({
    "dom": "lfrti"
});

See this jsFiddle for code and demonstration.

for 1.10+, specifiying `data-paging='false'` on the table element will also work. — Jeromy French, Nov 06 '17 at 15:56

score 26 · Answer 3 · edited Jan 27 '16 at 10:42

26

It's working

Try below code

$('#example').dataTable({
    "bProcessing": true,
    "sAutoWidth": false,
    "bDestroy":true,
    "sPaginationType": "bootstrap", // full_numbers
    "iDisplayStart ": 10,
    "iDisplayLength": 10,
    "bPaginate": false, //hide pagination
    "bFilter": false, //hide Search bar
    "bInfo": false, // hide showing entries
})

edited Jan 27 '16 at 10:42

Raviteja

3,399
23
42
69

answered Jan 27 '16 at 10:22

Muhammad Fahad

1,352
15
15

Toseef Khilji · Answer 4 · 2019-10-16T08:08:59.350

21

$(document).ready(function () {
            $('#Grid_Id').dataTable({
                "bPaginate": false
            });
        });

i have solved my problem using it.

edited Oct 16 '19 at 08:08

answered Jul 24 '13 at 11:34

Toseef Khilji

17,192
12
80
121

score 16 · Answer 5 · answered Jul 21 '17 at 06:35

16

$('#table_id').dataTable({    
    "bInfo": false, //Dont display info e.g. "Showing 1 to 4 of 4 entries"
    "paging": false,//Dont want paging                
    "bPaginate": false,//Dont want paging      
})

Try this code

answered Jul 21 '17 at 06:35

Abhishek B Patel

887
10
13

score 8 · Answer 6 · answered Mar 07 '17 at 06:11

if you want to remove pagination and but want ordering of dataTable then add this script at the end of your page!

<script>
$(document).ready(function() {        
    $('#table_id').DataTable({
        "paging":   false,
       "info":     false
    } );
      
  } );
</script>

score 4 · Answer 7 · answered Jul 19 '22 at 12:52

4

You can add data-paging='false' to the <table> element and pagination will be disabled for that table.

answered Jul 19 '22 at 12:52

Matt Budz

193
1
11

score -1 · Answer 8 · edited Feb 25 '16 at 07:54

Here is an alternative that is an incremental improvement on several other answers. Assuming settings.aLengthMenu is not multi-dimensional (it can be when DataTables has row lengths and labels) and the data will not change after page load (for simple DOM-loaded DataTables), this function can be inserted to eliminate paging. It hides several paging-related classes.

Perhaps more robust would be setting paging to false inside the function below, however I don't see an API call for that off-hand.

$('#myTable').on('init.dt', function(evt, settings) {
    if (settings && settings.aLengthMenu && settings.fnRecordsTotal && settings.fnRecordsTotal() < settings.aLengthMenu[0]) {
        // hide pagination controls, fewer records than minimum length
        $(settings.nTableWrapper).find('.dataTables_paginate, .dataTables_length, .dataTables_info').hide();
    }
}).DataTable();

how to remove pagination in datatable

8 Answers8

DISABLE PAGINATION

REMOVE PAGINATION CONTROL AND LEAVE PAGINATION ENABLED

Linked