I'm trying to expand the two_numbers pagination to look roughly like:
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:
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 */):
'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/
< 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/