CODEWITHSUNDEEP
jqueryhtmlpaginationdatatables
Toseef Khilji
Toseef Khilji

Reputation: 17409

how to remove pagination in datatable

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..

Upvotes: 125

Views: 315525

Answers (8)

Matt Budz
Matt Budz

Reputation: 247

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

Upvotes: 5

Toseef Khilji
Toseef Khilji

Reputation: 17409

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

i have solved my problem using it.

Upvotes: 22

Abhishek B Patel
Abhishek B Patel

Reputation: 935

$('#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

Upvotes: 18

Gyrocode.com
Gyrocode.com

Reputation: 58860

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.

Upvotes: 101

Mohsin Shoukat
Mohsin Shoukat

Reputation: 1250

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>

Upvotes: 9

ryanm
ryanm

Reputation: 2268

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();

Upvotes: -1

Muhammad Fahad
Muhammad Fahad

Reputation: 1412

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
})

Upvotes: 27

nstCactus
nstCactus

Reputation: 5183

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

Upvotes: 202

Related Questions