page(pagenumber).draw('page') is not refreshing the table

leels

I'm upgrading to 1.10.20 from 1.10.3. I'm using a custom paging type with my datatable with a new button called Next 20. On clicking this button - I retrieve the next 20 records from the db by using an ajax call. On success - add the 20 new records to the table and change the page. However - on page draw it remains on the first page. The earlier version with fnPageChange worked. What am I doing wrong?

table= $('#searchResultTbl').DataTable(  {
                    "pagingType": "four_button",
                    "lengthChange" :false,
                    "emptyTable" :"No Search Result.",
                    "destroy": true
                });

//snippet from next 20 fn
$.each(response.result, function(i, option) {
                    html += '<tr><td>' + option + '</td></tr>';
                    if((i+1) == searchIdength){
                        g_lastSearchId = option;
                    }
                    var arr = [];
                    arr[0] = option;
                    table.rows.add(arr);
                });
                var oSettings = table.settings()[0];
                var displayLength = oSettings._iDisplayLength;
                var rows = table.rows().data().length;
                var page = Math.ceil(rows / displayLength);
                var currentPage = page - 2;
                table.page(currentPage).draw(false);  // page remains on 1st page

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Hi @leels ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

leels

Hi @colin,

I fixed the above issue by changing rows().add() to row().add(). However - I ran into another issue. It looks like the datatable automatically reorders the rows in alphabetical order. Is there a way to prevent that and retain the order in which the rows are added?

kthorngren

                var oSettings = table.settings()[0];
                var displayLength = oSettings._iDisplayLength;

According to the settings() API docs:

The information in this object is generally considered to be private and should not be used directly.

My suggestion is to use page.info() to get the page length.

It looks like the datatable automatically reorders the rows in alphabetical order. Is there a way to prevent that and retain the order in which the rows are added?

You can use the order option. See the first example in the docs.

Kevin

leels

I switched from settings to using the length option from page.info() and used "order": []. Both of them worked. Thanks @kthorngren.