The function DataTable().page(x).draw(false) not working (on AJAX server-side configuration)

daytonoutar

I have managed to test and use DataTable().order([0, 'asc']).draw(false) and DataTable().page.len(5).draw(false) successfully with the table making the request to the server and displaying the information appropriately through AJAX calls. But I cannot get paging to work. When I use DataTable().page(5).draw(false) for example, the DataTable still starts from page 0 as if DataTable().draw() was called.

See part of the Javascript snippet below.

        $('#locations').DataTable({
            processing: false,
            filter: false,
            serverSide: true,
            autoWidth: false,
            destroy: true,
            deferLoading: true,
            stateSave: false,
            ajax: function (data, callback, settings) {
                data.filter_location = $('#filter-location').val().trim();
                data.filter_organization = $('#filter-ddlOrganization').val();
                data.filter_country = $('#filter-ddlCountry').val();
                data.filter_show_agents = $('#show-agents').is(':checked');
                //
                delete data["columns"];
                delete data["search"];
                //
                console.log(data);
                //
                $.ajax({
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    cache: false,
                    type: "GET",
                    url: '@Url.Action("GetLocations", "System")',
                    data: data,
                    beforeSend: function (jqXHR, settings) {
                        _w.start();
                        $("#dialog-progress").modal({
                            backdrop: 'static',
                            show: true
                        });
                    },
                    success: function (result, successStatus, sqXHR) {
                        $("#dialog-progress").modal('hide');
                        _w.stop();
                        if (result.Success) {
                            $('#table-alert').hide();
                            $("#result-locations-stats").text(_w.duration() + " s");
                            callback(result.Data);
                        } else {
                            $('#table-alert').show();
                            $('#table-alert').html('<p>' + result.Message + '</p>');
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        $("#dialog-progress").modal('hide');
                        DisplayError(jqXHR, errorThrown, $(this)[0].url);
                    }
                });
            },
            language: {
                emptyTable: "No location(s)",
                info: "_START_ to _END_ of _TOTAL_",
                infoEmpty: "",
                lengthMenu: "_MENU_"
            },
            pageLength: 7,
            dom: '<"#create-location-panel"><"#result-locations-stats.dataTables_header_right">rtip',
            columns:
            ....
            order: [[0, 'asc']],
            ....
           });

Is it that paging does not work like this for AJAX server-side configurations? What am I missing

daytonoutar

I just removed deferLoading (reverting to default) and the DataTable().page(x).draw(false) function works ... I guess Deferred loading and manually finding x page does not work well together

allan

Thanks for your post. Good to hear you have a workaround. To offer any further help, we'd need a link to the page showing the issue so it can be debugged directly.

Allan