How to disable DataTables paging after initialization?

Question

I have a DataTable with pagination enabled and I need to disable this setting and show all the results without pager by pressing a button.

I'm trying to access the already defined settings, change the paging to false, and redraw the table, but it doesn't work. I searched and tried similar forum threads without success.

Any idea how can I achieve that?

Here's a demo with my not-working code

HTML:

<div id="main_wrapper">
    <button class="form_button destroy_pager" type="button" onclick="" title="Destroy pager">Destroy pager</button>

    <table id="example" cellpadding="0" cellspacing="0" border="0">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
        </tbody>
    </table>
</div>

jQuery:

$(document).ready(function() {

    var oTable = $('#example').DataTable({
        'bPaginate': true,
        'iDisplayLength': 5
    });

    $('button.destroy_pager').on('click', function() {        
        var oSettings = oTable.settings;
        oSettings.bPaginate  = false;
        oTable.draw();
    });


});

EDIT: I need to have the pager enabled when I initialise the DataTable. The problem is that I have to disable it after the button press.

Thanks in advance

semirturgay · Accepted Answer · 2015-05-08T08:52:51.083

4

You should destroy and reinitilize the datatable with bPaginate option set to false on button click

 $(document).ready(function() {
    var table =  $('#example');
    var tableOptions = {
        'bPaginate': true,
        'iDisplayLength': 5
    };
   table.DataTable(tableOptions);
   $('button.destroy_pager').on('click', function() {        
        table.DataTable().destroy()
        tableOptions.bPaginate = false;
        table.DataTable(tableOptions);
    });
});

demo

edited May 08 '15 at 08:52

answered May 07 '15 at 14:45

semirturgay

4,151
3
30
50

Thanks, It worked! Btw, it looks like you forgot to delete 2 lines of my wrong code `var oSettings = ...`. Am I right? Best regards – chimos May 07 '15 at 14:53
Never mind. Yes i forgot to delete them they are useless – semirturgay May 07 '15 at 15:01
The answer is still right. But it is not very clean/mainainable code, since I am forced to have the table settings duplicated in different places. And what if I have a filter/sorting applied and don't want to lose them? – chimos May 08 '15 at 08:46
Thanks again. I konw I din't ask for this, but what about keeping filtering? [jsFiddle](https://jsfiddle.net/chimos/4w1tkwLq/1/) – chimos May 08 '15 at 09:04
I think I was not able to understand the problem and approach it correctly, and therefore my question was not the right one to solve my actual problem. Despite that you helped me to think a new approach: http://stackoverflow.com/q/30122177/4681687 Thanks alot for your help so far. – chimos May 08 '15 at 11:07
Is there a way to do it dynamically, e.g. my table get data from ajax and I want no paging if result has 10 or fewer rows, otherwise I want it. Need to change option "paging" in the preDrawCallback or something... – user9645 Jun 15 '17 at 18:11

score 0 · Answer 2 · answered Sep 18 '17 at 05:10

0

Use sDom option. Try sDom: 'ft' option. It's work for me. Take a look here: http://datatables.net/usage/options#sDom

answered Sep 18 '17 at 05:10

Udara Herath

805
2
18
37

score 0 · Answer 3 · answered Feb 03 '22 at 03:28

i have an idea to preparing table style before set row number per page. but this make me wondering how datatable api store elements style. if i can set table style and declaring datatable object in the same time. it will make my code more performance

score -2 · Answer 4 · answered May 07 '15 at 14:39

-2

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

use the above code.

jsFiddle

answered May 07 '15 at 14:39

The Guest

698
11
27

Thanks for your answer. Sorry, I didn't explain well enough. I need to start with the pager enabled and also be able to disable after an event (for example, pressing a button). – chimos May 07 '15 at 14:45

How to disable DataTables paging after initialization?

4 Answers4

Linked