How to remove pagination in DataTable

Bonus: Extra Tweaks and Tricks

Going beyond pagination: Configuring DataTable layout elements

Customize with dom property. It configures the appearance and placement of elements around your table:

$('#yourTableId').DataTable({
    // Who needs pagination anyway!
    paging: false,
    // This ain't hide and seek, let's remove the search box.
    searching: false,
    // Less info is always good. Removes table info.
    info: false,
    // Craft the UI with 'dom'. Missing 'p' stands for no pagination.
    dom: 'lrtip'
});


Serving it "hot": Advanced initialization options

Best served with a combination of configuration options:

$('#yourTableId').DataTable({
    // Grabs the popcorn and turns pagination off!
    paging: false,
    // No more weird layout. Disables automatic column width calculation
    autoWidth: false,  
    // Like a superpower that prevents memory leaks when reinitializing.
    destroy: true,  
    // Table 'processing' time, it's like watching paint dry.
    processing: true,  
    // Because bootstraps are no longer just for boots. Gives it a sleek 'bootstrap' look.
    pagingType: 'numbers'  
});


Handling large data loads (aka "How to run a marathon")

Server-Side processing serverSide: true can make handling large data sets as easy as a Sunday morning:

• Better performance for the Usain Bolts of data sets.
• The server does the heavy lifting. The browser is sipping cocktails on the beach.
• Requires a server script to mop the floors and take out the trash (handle requests and send data in a consistent format).

Styling Jedi tricks: Customize DataTable without pagination

Styling DataTable without pagination is like letting a Jedi loose with a lightsaber:

.dataTables_wrapper .dataTables_paginate {
    // Pagination? Not in our town!
    display: none;  
}


What if you are doubtful (or skeptical)?

What happens when iDisplayStart or iDisplayLength meet paging: false? They clash like Star Wars and Star Trek fans at a sci-fi convention. Jokes apart, DataTable ignores those variables when pagination is disabled.

Exploring different scenarios

Minimalistic approach

You just want to drive your first car, not a transformer:

$('#yourTableId').DataTable({
     // get in, strap seatbelt, drive!
     paging: false
});


Stylish approach

Because beauty is not skin-deep:

Customization isn't only functional but also aesthetic. With your trusty sidekick CSS, you can play dress-up with your DataTables.

Reusable approach

Because we hate copy-pasting:

Wrap your initialization in a function. You've just made a Swiss Army knife you can use in any situation!