I have a JQuery datatable that loads data via an ajax request. There is a form by the table that lets the user filter the results on the server. When the user changes the filter form, I call fnReloadAjax() with the new filter data, and the table redraws with the new, filtered results.

The problem I have is that the pagination sticks, even if the table no longer has enough items to reach the current page. So if the table originally had 20 items, and the user was on page 2 (10 items per page), and they change the filter so only 5 items are returned, the table displays no items and shows this at the bottom:

Showing 11 to 5 of 5 entries

It's still on page 2 even though there is only enough data for one page.

I have found numerous posts about trying to preserve the current page/row, but none showing a simple way to reset pagination to the first page. What is the simplest way to do this?

Here's a simplified version of my code for clarity:

$(#mytable).dataTable({

    bStateSave: false,

    fnServerData: function (sSource, aoData, fnCallback) {

        return $.ajax({

            type: POST,

            url: url,

            data: {filter: filterValue}

        });

    }

});



$(#myForm).submit(function(e) {

    table.fnReloadAjax();

    return false;

});