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

Garcon

Answer 1

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

Copycat

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

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

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? – Garcon

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

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: https://mcmap.net/q/1916756/-create-a-new-regular-table-from-visible-and-filtered-rows-of-datatable/4681687 Thanks alot for your help so far. – Garcon

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

Answer 2

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

Nubia

Answer 3

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

Stephanestephani

Answer 4

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

use the above code.

jsFiddle

Ingrained

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