Text Input pagination plugin with Bootstrap

mlewis001

Using DataTables 1.9.3 with Bootstrap. User has asked for Input style pagination. I've downloaded the plugin but I'm having difficulty figuring out how to get it to render in Bootstrap. We are using the legacy bootstrap integration plug-in which gives us First Prev Next Last buttons along with page hyperlinks but I want to add Input box. Upgrading to 1.10 isn't yet an option but may be the only answer. Thanks!

http://legacy.datatables.net/plug-ins/pagination

tangerine

If you mean this:

Navigation with text input

initialised thus:

$.fn.dataTableExt.oPagination.input = {
...

it's working ok for me with Bootstrap - I get buttons and an input box. I don't think DataTables' Bootstrap styling integration covers the pagination plug-ins, but that doesn't bother me.

allan

Correct - if you want the input pagination control to be styling when Bootstrap pagination, you would need to modify the code to suit that.

If you do so, I'm sure others would appreciate if you posted your code.

Allan

mlewis001

Thanks for the replies. I'm just stupid. The page I was testing only had one page of data, so the controls were being hidden by the input plugin itself. D'uh. I will try to modify the plugin to be more bootstrap friendly. If I get it right, I'll post the code here.

    // If we can't page anyway, might as well not show it
    var iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength);
    if (iPages <= 1) {
        $(nPaging).hide();
    }

mlewis001

Here's the enhanced code to render in Bootstrap. Note that the input controls appear to the right of the buttons as opposed to being embedded between them. I tried for a bit to change this but my users were fine with the way it looked so I stopped. Only a few changes to the original code - used li elements instead of spans, added prevent default to click functions, and included some CSS to shorten the input box width. Note - due to character limit restriction on posts, this code block does not contain the $(nInput) keyup function. That should be included from original source!

$.fn.dataTableExt.oPagination.input = {
    "fnInit": function (oSettings, nPaging, fnCallbackDraw) {

        var pagList   = document.createElement("ul");
        var nFirst    = document.createElement('li');
        var nPrevious = document.createElement('li');
        var nNext     = document.createElement('li');
        var nLast     = document.createElement('li');
        var nInput    = document.createElement('input');
        var nPage     = document.createElement('li');
        var nOf       = document.createElement('li');
        var oLang     = oSettings.oLanguage.oPaginate;

        nFirst.innerHTML    = '<a href="#">&larr; ' + oLang.sFirst    + '</a>';
        nPrevious.innerHTML = '<a href="#">&larr; ' + oLang.sPrevious + '</a>';
        nNext.innerHTML     = '<a href="#">'        + oLang.sNext     + ' &rarr; </a>';
        nLast.innerHTML     = '<a href="#">'        + oLang.sLast     + ' &rarr; </a>';

        nFirst.className    = "paginate_button first disabled";
        nPrevious.className = "paginate_button previous disabled";
        nNext.className     = "paginate_button next";
        nLast.className     = "paginate_button last";

        nInput.type         = "text";
        nPage.innerHTML     = "&nbsp;&nbsp;&nbsp;Page ";

        if (oSettings.sTableId !== '') {
            nPaging.setAttribute  ( 'id', oSettings.sTableId + '_paginate' );
            nFirst.setAttribute   ( 'id', oSettings.sTableId + '_first' );
            nPrevious.setAttribute( 'id', oSettings.sTableId + '_previous' );
            nNext.setAttribute    ( 'id', oSettings.sTableId + '_next' );
            nLast.setAttribute    ( 'id', oSettings.sTableId + '_last' );
            nOf.setAttribute      ( 'id', oSettings.sTableId + '_of' );
            nPage.setAttribute    ( 'id', oSettings.sTableId + '_page' );
            nInput.setAttribute   ( 'id', oSettings.sTableId + '_input' );
        }

        pagList.setAttribute("id", "pagList");
        pagList.appendChild(nFirst);
        pagList.appendChild(nPrevious);
        pagList.appendChild(nPage);
        pagList.appendChild(nInput);
        pagList.appendChild(nOf);
        pagList.appendChild(nNext);
        pagList.appendChild(nLast);
        nPaging.appendChild(pagList);

        $(nPaging).addClass('pagination');
        $(nInput).addClass('smallify');      // .smallify { width:40px; height:20px; overflow:hidden; }

        $(nFirst).click(function (e) {
            e.preventDefault();
            var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
            if (iCurrentPage != 1) {
                oSettings.oApi._fnPageChange(oSettings, "first");
                fnCallbackDraw(oSettings);
                $(nFirst).addClass('disabled');
                $(nPrevious).addClass('disabled');
                $(nNext).removeClass('disabled');
                $(nLast).removeClass('disabled');
            }
        });

        $(nPrevious).click(function (e) {
            e.preventDefault();
            var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
            if (iCurrentPage != 1) {
                oSettings.oApi._fnPageChange(oSettings, "previous");
                fnCallbackDraw(oSettings);
                if (iCurrentPage == 2) {
                    $(nFirst).addClass('disabled');
                    $(nPrevious).addClass('disabled');
                }
                $(nNext).removeClass('disabled');
                $(nLast).removeClass('disabled');
            }
        });

        $(nNext).click(function (e) {
            e.preventDefault();
            var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
            if (iCurrentPage != Math.ceil((oSettings.fnRecordsDisplay() / oSettings._iDisplayLength))) {
                oSettings.oApi._fnPageChange(oSettings, "next");
                fnCallbackDraw(oSettings);
                if (iCurrentPage == (Math.ceil((oSettings.fnRecordsDisplay() - 1) / oSettings._iDisplayLength) - 1)) {
                    $(nNext).addClass('disabled');
                    $(nLast).addClass('disabled');
                }
                $(nFirst).removeClass('disabled');
                $(nPrevious).removeClass('disabled');
            }
        });

        $(nLast).click(function (e) {
            e.preventDefault();
            var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
            if (iCurrentPage != Math.ceil((oSettings.fnRecordsDisplay() / oSettings._iDisplayLength))) {
                oSettings.oApi._fnPageChange(oSettings, "last");
                fnCallbackDraw(oSettings);
                $(nFirst).removeClass('disabled');
                $(nPrevious).removeClass('disabled');
                $(nNext).addClass('disabled');
                $(nLast).addClass('disabled');
            }
        });

// MUST INCLUDE $(nInput) KEYUP FUNCTION FROM ORIGINAL CODE.
// REMOVED FROM THIS POST DUE TO CHARACTER LIMIT RESTRICTION.

        /* Take the brutal approach to cancelling text selection */
        $('span', nPaging).bind('mousedown', function () { return false; });
        $('span', nPaging).bind('selectstart', function () { return false; });

        // If we can't page anyway, might as well not show it
        //var iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength);
        if (iPages <= 1) {
            $(nPaging).hide();
        }
    },

    "fnUpdate": function (oSettings, fnCallbackDraw) {
        if (!oSettings.aanFeatures.p) {
            return;
        }
        var iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength);
        var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;

        var an = oSettings.aanFeatures.p;
        if (iPages <= 1) // hide paging when we can't page
        {
            $(an).hide();
        }
        else {
            /* Loop over each instance of the pager */
            for (var i = 0, iLen = an.length ; i < iLen ; i++) {
                var spans = an[i].getElementsByTagName('li');     // Changed tags from spans to line items
                var inputs = an[i].getElementsByTagName('input');
                spans[3].innerHTML = " of " + iPages;
                inputs[0].value = iCurrentPage;
            }
        }
    }
};

allan

Nice one - thanks for sharing it with us!

Allan