How to change pagination in Datatables on key events?

Question

I am using Datatables jQuery plugin to display data. Here is what I need:

When the user gives input to the search box the pagination goes away and shows all the records at once.
When the user clears the search box the table should go back to its original state with the pagination, etc.

Is there a way to do this? I've tried doing the following:

var $dt = $('#datatable').DataTable();
$("input[type=search]").keyup(function() {
    var search_string = $(this).val();
    if(search_string.length > 0) {
        $dt.destroy();
        $('#datatable').DataTable({
            "paging": false
        });
    } else {
        $('#datatable').DataTable();
    }           
});

But after I start typing, the Datatable reloads and the cursor is not inside the search box.

Not that familiar with codeignitor, but that shouldn't really matter - can't you just do a .destroy() on the table when you search, with new options, and then put back the original options when you remove the search? — junkfoodjunkie
– junkfoodjunkie, Commented Oct 30, 2016 at 13:01
ah. Right. What if you don't call destroy() first? Just set pagination to false? — junkfoodjunkie
– junkfoodjunkie, Commented Oct 30, 2016 at 13:49
Just remove the $('#datatable').DataTable().destroy(); line, and test? — junkfoodjunkie
– junkfoodjunkie, Commented Oct 30, 2016 at 13:52

Nikolay Konovalov · Accepted Answer · 2016-10-30 22:51:45Z

1

You can use

$('#datatable').DataTable().page.len(-1).draw();

to change table page length. Example:

var $dt = $('#datatable').DataTable();
$("input[type=search]").keyup(function() {
    var search_string = $(this).val();
    if(search_string.length > 0) {
        // Show all records on one page.
        $dt.page.len(-1).draw();
    } else {
        // Reset page length.
        $dt.page.len(10).draw();
    }           
});

Source: https://datatables.net/reference/api/page.len()

edited Oct 30, 2016 at 22:51

answered Oct 30, 2016 at 22:36

Nikolay Konovalov

772 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

How to change pagination in Datatables on key events?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related