pagination button prev is not decreasing page.info().page value to 0 but stops at 1

avnaku

I have a datatable on my page which is working as expected except the updation of page number when prev or next navigation button is clicked.

Every click on the next button is increasing the page from 0->1->2->3... but clciking prev button doesnot bring it back to page no 0 but to 1. In reality, page 0 information is getting shown on ui but page.info().page shows page number as 1.

Please help, why prev button is not updating page number to 0 but the UI is showing info at page 0.

function initializeInProgressShipmentsTable(pageSize) {
    var tableId = "#in-progress-shipments-table";
    var dataTable = $(tableId).DataTable({
        "lengthChange": false,
        "pageLength": pageSize,
        "processing": true,
        "pagingType": "simple",
        "retrieve": true,
        "order": [],
        "columns": [
            {"data": "link"},
            {"data": "link2"},
            {"data": "link3"},
            {"data": "rc"},
            {"data": "link4"},
            {"data": "oc"},
            {"data": "st"},
            {"data": "link5"}
        ],
        "drawCallback": function (settings) {
            var api = this.api();
            addClickEventListenerOnNextButton(tableId);
            enableNextButton(api, pageSize, tableId);
        }
    });

    return dataTable;
}

/**
 * Function that adds a listener to click event on next button.
 * It will only loads data from the server if last page is displayed and next button is not disabled
 * @param tableId
 */
function addClickEventListenerOnNextButton(tableId) {
    $(tableId + "_next").click(function () {
        var dataTable = $(tableId).DataTable();
        var pageInfo = dataTable.page.info();
        var isNextButtonEnabled = $(tableId + '_next.paginate_button.next.disabled').length > 0 ? false : true;

        if (isNextButtonEnabled && ((pageInfo.page + 1) >= pageInfo.pages)) {
            $("#loader_wrapper").show();

            $.ajax({
                type: "GET",
                url: getURL(tableId, getPageSize(tableId)),
                async: false,
                success: function (response) {
                    if (response.responseCode == "SUCCESS") {
                        loadResultAndRedrawTheTable(tableId, response);
                        increaseCallTimes(tableId);
                        $("#loader_wrapper").hide();
                        $('.load_failed').hide();
                    } else {
                        showErrorMessage("Loading new results failed, Error : " + response.message);
                    }
                },
                error: function () {
                    showErrorMessage("Loading new results failed, Please try after sometime.");
                }
            });
        }
    });
}

/**
 * Enable next button to load more results
 * @param api
 * @param pageSize
 */
function enableNextButton(api, pageSize, tableId) {
    if ((api.rows({page: 'current'}).count() == pageSize)) {
        $(tableId + '_next.paginate_button.next').removeClass("disabled");
    }
}

colin

Hi @avnaku ,

I may be missing something, but it looks like you've got a code for the "next" button, but nothing for the "prev". Have you considered using serverSide, since it appears that you're redesigning that functionality?

Cheers,

Colin