Moving from 1.10 to 2.2 seems like there is no "sPaginationType": "listbox"

luisrortega

Hi,

I'm trying to update to the latest version, and notice that the paginationType has been deprecated, however I can't find that the proper replacement will be. It used to display a drop down with the page numbers.

Is there any new setup needed to archive this?

Thanks,
Luis

allan

There never was a listbox type built in. You must be using a plugin for 1.x?

I created an input paging plugin for 2.x, but haven't yet done a dropdown. If I have time later on today, I'll do that.

Allan

allan

Is this the plugin you were using or was it something else? I've just trying to decide quite how many options the plugin should provide... (e.g. first / previous / next / last buttons, limit the number of options in the select etc).

Little tasks always grow arms and legs rather quickly...!

Allan

luisrortega

I think the file name is datatable.extjs.page.js... but to be honest, I don't know where I got it from!!! smh

luisrortega

// the code is

$.fn.dataTableExt.oPagination.listbox = {
    /*
     * Function: oPagination.listbox.fnInit
     * Purpose:  Initalise dom elements required for pagination with listbox input
     * Returns:  -
     * Inputs:   object:oSettings - dataTables settings object
     *             node:nPaging - the DIV which contains this pagination control
     *             function:fnCallbackDraw - draw function which must be called on update
     */
    "fnInit": function (oSettings, nPaging, fnCallbackDraw) {
        var nInput = document.createElement('select');
        var nPage = document.createElement('label');
        var nOf = document.createElement('label');
        nOf.className = "paginate_of";
        nPage.className = "paginate_page";
        nPage.style="font-weight: normal;float: left;text-align: left; padding-right: 10px; padding-top: 3px;";
        if (oSettings.sTableId !== '') {
            nPaging.setAttribute('id', oSettings.sTableId + '_paginate');
        }
        //nInput.style.display = "inline";
        nInput.className = "form-control input-sm";
        nPage.innerHTML = "Page ";
        nPaging.appendChild(nPage);
        nPaging.appendChild(nInput);
        nPaging.appendChild(nOf);
        $(nInput).change(function (e) { // Set DataTables page property and redraw the grid on listbox change event.
            window.scroll(0,0); //scroll to top of page
            if (this.value === "" || this.value.match(/[^0-9]/)) { /* Nothing entered or non-numeric character */
                return;
            }
            var iNewStart = oSettings._iDisplayLength * (this.value - 1);
            if (iNewStart > oSettings.fnRecordsDisplay()) { /* Display overrun */
                oSettings._iDisplayStart = (Math.ceil((oSettings.fnRecordsDisplay() - 1) / oSettings._iDisplayLength) - 1) * oSettings._iDisplayLength;
                fnCallbackDraw(oSettings);
                return;
            }
            oSettings._iDisplayStart = iNewStart;
            fnCallbackDraw(oSettings);
        }); /* Take the brutal approach to cancelling text selection */
        $('span', nPaging).bind('mousedown', function () {
            return false;
        });
        $('span', nPaging).bind('selectstart', function () {
            return false;
        });
    },
    "fnUpdate": function (oSettings, fnCallbackDraw) {
        if (!oSettings.aanFeatures.p) {
            return;
        }
        var iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength);
        if (iPages > 499){
            iPages = 499;
        }
        var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1; /* Loop over each instance of the pager */
        var an = oSettings.aanFeatures.p;
        for (var i = 0, iLen = an.length; i < iLen; i++) {
            var spans = an[i].getElementsByTagName('label');
            var inputs = an[i].getElementsByTagName('select');
            var elSel = inputs[0];
            if(elSel.options.length != iPages) {
                elSel.options.length = 0; //clear the listbox contents
                for (var j = 0; j < iPages; j++) { //add the pages
                    var oOption = document.createElement('option');
                    oOption.text = j + 1;
                    oOption.value = j + 1;
                    try {
                        elSel.add(oOption, null); // standards compliant; doesn't work in IE
                    } catch (ex) {
                        elSel.add(oOption); // IE only
                    }
                }
                spans[1].innerHTML = "";// "&nbsp;of&nbsp;" + iPages;
            }
          elSel.value = iCurrentPage;
        }
    }
};

allan

I've just committed a new plugin called selectPaging which will work with DataTables 2 .

There is an npm package for it here.

The Bootstrap 3/4 styling isn't quite right, but I think the rest should be okay.

Let me know how you get on with it if you try it out.

Allan