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-08 08:52:51Z

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 8, 2015 at 8:52

answered May 7, 2015 at 14:45

semirturgay

4,1993 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

chimos Over a year ago

Thanks, It worked! Btw, it looks like you forgot to delete 2 lines of my wrong code var oSettings = .... Am I right? Best regards

semirturgay Over a year ago

Never mind. Yes i forgot to delete them they are useless

chimos Over a year ago

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 Over a year ago

Thanks again. I konw I din't ask for this, but what about keeping filtering? jsFiddle

chimos Over a year ago

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: stackoverflow.com/q/30122177/4681687 Thanks alot for your help so far.

|

Udara Herath · Accepted Answer · 2017-09-18 05:10:29Z

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, 2017 at 5:10

Udara Herath

8953 gold badges19 silver badges41 bronze badges

Comments

SK.02 · Accepted Answer · 2022-02-03 03:28:19Z

0

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

answered Feb 3, 2022 at 3:28

SK.02

112 bronze badges

Comments

The Guest · Accepted Answer · 2015-05-07 14:39:34Z

-2

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

use the above code.

jsFiddle

answered May 7, 2015 at 14:39

The Guest

74211 silver badges28 bronze badges

1 Comment

chimos Over a year ago

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

Collectives™ on Stack Overflow

How to disable DataTables paging after initialization?

4 Answers 4

6 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related