Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 81677

[SOLVED] Customizing pagination (using two_numbers as a base)

$
0
0
I'm trying to expand the two_numbers pagination to look roughly like:

< Showing x-y of z >

But have run into some issues. Taking two_numbers from 1.9 as my base, I added the a span between the left and right arrows for the jQuery UI pagination controls in fnInit:

var sAppend = (!oSettings.bJUI) ?
            '<a class="'+oSettings.oClasses.sPagePrevDisabled+'" tabindex="'+oSettings.iTabIndex+'" role="button">'+oLang.sPrevious+'</a>'+
                '<a class="'+oSettings.oClasses.sPageNextDisabled+'" tabindex="'+oSettings.iTabIndex+'" role="button">'+oLang.sNext+'</a>'
            :
            '<a class="'+oSettings.oClasses.sPagePrevDisabled+'" tabindex="'+oSettings.iTabIndex+'" role="button"><span class="'+oSettings.oClasses.sPageJUIPrev+'"></span></a>'+
                '<span class="dtInfo"></span>'+
                '<a class="'+oSettings.oClasses.sPageNextDisabled+'" tabindex="'+oSettings.iTabIndex+'" role="button"><span class="'+oSettings.oClasses.sPageJUINext+'"></span></a>';
        $(nPaging).append( sAppend );

I then made a few changes to fnUpdate, in particular adding a call that updates the span I added (see /* Info */) and changed the 'next' node call to nNode.nextSibling to nNode.nextSibling.nextSibling so it skips over my span (first line under /* Next page */):

        /* Loop over each instance of the pager */
        for ( var i=0, iLen=an.length ; i<iLen ; i++ )
        {
            nNode = an[i].firstChild;
            if ( nNode )
            {
                /* Previous page */
                nNode.className = ( oSettings._iRecordsTotal === 0 ) ?
                    oClasses.sPagePrevDisabled : oClasses.sPagePrevEnabled;

                /* Info */
                nNode.nextSibling.innerHTML = 'Showing <strong>' + (parseInt(oSettings._iDisplayStart) + 1) + '-' + oSettings._iDisplayEnd + '</strong> of <strong>' + oSettings._iRecordsTotal + '</strong>';

                /* Next page */
                nNode = nNode.nextSibling.nextSibling;
                nNode.className = ( oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay() ) ?
                    oClasses.sPageNextDisabled : oClasses.sPageNextEnabled;
            }
        }

'Showing x-y' renders fine, but for some reason _iRecordsTotal is always 0. Furthermore, when I click the next arrow, I proceed to the next page but the back/previous arrow is left in a disabled state. It seems that the issue is adding the <span> in fnInit; as soon as I do that, the back/previous arrow doesn't disable properly, though I can still page, and it's still clickable. Any ideas?

Edit: Got a JSFiddle working, sans-jQueryUI but it doesn't matter much since it still shows the issue: http://jsfiddle.net/UWWqD/1/

Viewing all articles
Browse latest Browse all 81677

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>