top and bottom controls on a single table

palos

I have tried to add both top and bottom controls to a single table. Although both controls work when clicked, only the graphics on the bottom set of controls work. For example if you're on page 1 of 10 the right arrow on the top is dim, but on the bottom it's light. Any help would be appreciated. Thanks.

datatables = 1.4.3
jquery = 1.3.2

GaryF

+1. I'm trying to achieve this too. Because the table height isn't always the same for every 'page' the bottom buttons dance up and down which means users have to move their mouse to the new location of the next button which can be annoying if they're browsering through the records.

Having the controls at the top too would make the buttons' position consistant, plus it would be easier for users who have a lower resolution screen where the lower buttons are just off the bottom of the screen.

allan

Hi guys,

Yes, this is something which crops up relatively frequently. The reason it doesn't currently work completely is that DataTables maintains an internal reference to the nodes that it must update. Therefore, only the latest (i.e. the second in this case) set of elements to be added will actually be updated.

At the moment this can be solved by a custom pagining function - but I realise this isn't exactly ideal. It's probably not too difficult for me to put this into DataTables core, but that would set a precedent for the other sDom options - which might not be so easy... I'll dig into this a bit :-)

Allan

palos

Thanks Allan, I appreciate you taking a look at this. DataTables is great, and it's amazing how quickly you respond to questions :)

allan

Hi guys,

Here is the code that is required to do two button paging with as many instances of the the buttons as you wish (through the sDom parameter). I've set this up as a paging plug-in, although it will replace the default two button paging (indeed you could just insert it into your own copy of DataTables if you wished). I've done this because I'm not quite 100% happy with how it works:

1. It will work for only this two button paging - the full numbers version would need similar customisation
2. It inserts duplicate IDs into the DOM (urgh). The IDs are really there for styling, but perhaps it would be best to remove them and switch to using class names only (certainly if this goes into DataTables core I should do that - but that will break older sites which use this for styling...)
3. It sets a precedent for sDom parameters to be duplicated. Perhaps it is reasonable to say only some of the elements can be done like this (duplicating the table for example would be bad!) - implementing this change will require a reasonable amount of changes to the features provided by DataTables (have been thinking about adding features plug-in anyway... 1.6!?)

I'd be interested in your thoughts on this.

Allan


[code]
$.fn.dataTableExt.oPagination.two_button = {
/*
* Function: oPagination.two_button.fnInit
* Purpose: Initalise dom elements required for pagination
* Returns: -
* Inputs: object:oSettings - dataTables settings object
* function:fnCallbackDraw - draw function which must be called on update
*/
"fnInit": function ( oSettings, fnCallbackDraw )
{
oSettings.nPrevious = document.createElement( 'div' );
oSettings.nNext = document.createElement( 'div' );

if ( typeof oSettings.aoPaging == 'undefined' )
{
oSettings.aoPaging = [];
}
oSettings.aoPaging.push( { "nPrevious": oSettings.nPrevious, "nNext": oSettings.nNext } );

oSettings.nPrevious.className = "paginate_disabled_previous";
oSettings.nNext.className = "paginate_disabled_next";

oSettings.nPrevious.title = oSettings.oLanguage.oPaginate.sPrevious;
oSettings.nNext.title = oSettings.oLanguage.oPaginate.sNext;

oSettings.nPaginate.appendChild( oSettings.nPrevious );
oSettings.nPaginate.appendChild( oSettings.nNext );
$(oSettings.nPaginate).insertAfter( oSettings.nTable );

$(oSettings.nPrevious).click( function() {
oSettings._iDisplayStart -= oSettings._iDisplayLength;

/* Correct for underrun */
if ( oSettings._iDisplayStart < 0 )
{
oSettings._iDisplayStart = 0;
}

fnCallbackDraw( oSettings );
} );

$(oSettings.nNext).click( function() {
/* Make sure we are not over running the display array */
if ( oSettings._iDisplayStart + oSettings._iDisplayLength < oSettings.fnRecordsDisplay() )
{
oSettings._iDisplayStart += oSettings._iDisplayLength;
}

fnCallbackDraw( oSettings );
} );
},

/*
* Function: oPagination.two_button.fnUpdate
* Purpose: Update the two button pagination at the end of the draw
* Returns: -
* Inputs: object:oSettings - dataTables settings object
* function:fnCallbackDraw - draw function which must be called on update
*/
"fnUpdate": function ( oSettings, fnCallbackDraw )
{
var sPrevious = ( oSettings._iDisplayStart === 0 ) ?
"paginate_disabled_previous" : "paginate_enabled_previous";
var sNext = ( oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay() ) ?
"paginate_disabled_next" : "paginate_enabled_next";

for ( var i=0, iLen=oSettings.aoPaging.length ; i