how to remove pagination in datatable

JqueryHtmlPaginationDatatables

Jquery Problem Overview


I am new in jQuery. 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..

Thanks in advance.

Jquery Solutions


Solution 1 - Jquery

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

Solution 2 - Jquery

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.

Solution 3 - Jquery

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

Solution 4 - Jquery

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

i have solved my problem using it.

Solution 5 - Jquery

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

Solution 6 - Jquery

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>

Solution 7 - Jquery

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionToseef KhiljiView Question on Stackoverflow
Solution 1 - JquerynstCactusView Answer on Stackoverflow
Solution 2 - JqueryGyrocode.comView Answer on Stackoverflow
Solution 3 - JqueryMuhammad FahadView Answer on Stackoverflow
Solution 4 - JqueryToseef KhiljiView Answer on Stackoverflow
Solution 5 - JqueryAbhishek B PatelView Answer on Stackoverflow
Solution 6 - JqueryMohsin ShoukatView Answer on Stackoverflow
Solution 7 - JqueryryanmView Answer on Stackoverflow