Editing the PaginationType

dergucker

Hi,

first of all I want to say thanks for this fantastic product! I am using it since a couple of hours and there is nothing that didn't work directly.

But now I got a "Problem". I need a Paginator like this one: http://img155.imageshack.us/img155/5503/bildschirmfoto20110112u.png

Is it possible to create a paginator like this? And if yes ... how? :-)

Thanks for your help!

Martin

nm_alex

Hi Martin,

there is some info about pagination plugins here: http://datatables.net/plug-ins/pagination

hth, Alex

dergucker

Hi Alex,

thanks for your fast reply. Yes, of course there are plugins that show me how to implement my own pagination. But I can't see there a solution for my problem. I need instead of "First" and "Last" the Numbers of these pages as Button.

Regards

Martin

allan

How about something like this:

[code]
$.fn.dataTableExt.oPagination.numbers = {};
$.fn.dataTableExt.oPagination.numbers.fnInit = function ( oSettings, nPaging, fnCallbackDraw )
{
var nFirst = document.createElement( 'span' );
var nList = document.createElement( 'span' );
var nLast = document.createElement( 'span' );
var nDots1 = document.createElement( 'span' );
var nDots2 = document.createElement( 'span' );

nFirst.innerHTML = 1;
nLast.innerHTML = "";
nDots1.innerHTML = "...";
nDots2.innerHTML = "...";

var oClasses = oSettings.oClasses;
nFirst.className = oClasses.sPageButton+" "+oClasses.sPageFirst;
nLast.className = oClasses.sPageButton+" "+oClasses.sPageLast;

nPaging.appendChild( nFirst );
nPaging.appendChild( nDots1 );
nPaging.appendChild( nList );
nPaging.appendChild( nDots2 );
nPaging.appendChild( nLast );

$(nFirst).click( function () {
if ( oSettings.oApi._fnPageChange( oSettings, "first" ) )
{
fnCallbackDraw( oSettings );
}
} );

$(nLast).click( function() {
if ( oSettings.oApi._fnPageChange( oSettings, "last" ) )
{
fnCallbackDraw( oSettings );
}
} );

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

/* ID the first elements only */
if ( oSettings.sTableId !== '' && typeof oSettings.aanFeatures.p == "undefined" )
{
nPaging.setAttribute( 'id', oSettings.sTableId+'_paginate' );
nFirst.setAttribute( 'id', oSettings.sTableId+'_first' );
nLast.setAttribute( 'id', oSettings.sTableId+'_last' );
}
};
[/code]

allan

[code]
$.fn.dataTableExt.oPagination.numbers.fnUpdate = function ( oSettings, fnCallbackDraw )
{
if ( !oSettings.aanFeatures.p )
{
return;
}

var iPageCount = 3;
var iPageCountHalf = Math.floor(iPageCount / 2);
var iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength);
var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
var sList = "";
var iStartButton, iEndButton, i, iLen;
var oClasses = oSettings.oClasses;

/* Pages calculation */
if (iPages < iPageCount)
{
iStartButton = 1;
iEndButton = iPages;
}
else
{
if (iCurrentPage <= iPageCountHalf)
{
iStartButton = 1;
iEndButton = iPageCount;
}
else
{
if (iCurrentPage >= (iPages - iPageCountHalf))
{
iStartButton = iPages - iPageCount + 1;
iEndButton = iPages;
}
else
{
iStartButton = iCurrentPage - Math.ceil(iPageCount / 2) + 1;
iEndButton = iStartButton + iPageCount - 1;
}
}
}

/* Build the dynamic list */
for ( i=iStartButton ; i<=iEndButton ; i++ )
{
if ( iCurrentPage != i )
{
sList += ''+i+'';
}
else
{
sList += ''+i+'';
}
}

/* Loop over each instance of the pager */
var an = oSettings.aanFeatures.p;
var anButtons, anStatic, nPaginateList;
var fnClick = function() {
/* Use the information in the element to jump to the required page */
var iTarget = (this.innerHTML * 1) - 1;
oSettings._iDisplayStart = iTarget * oSettings._iDisplayLength;
fnCallbackDraw( oSettings );
return false;
};
var fnFalse = function () { return false; };

for ( i=0, iLen=an.length ; i

dergucker

Hi Allan,

thanks for your reply!

Ok, now I got the numbers, but not the arrows for forward an backward. What do I have to do for this final thing :)?

Regards

Martin

allan

Ah rubbish - I missed them sorry.

Try this for fnInit:

[code]

$.fn.dataTableExt.oPagination.numbers = {};
$.fn.dataTableExt.oPagination.numbers.fnInit = function ( oSettings, nPaging, fnCallbackDraw )
{
var nFirst = document.createElement( 'span' );
var nList = document.createElement( 'span' );
var nLast = document.createElement( 'span' );
var nDots1 = document.createElement( 'span' );
var nDots2 = document.createElement( 'span' );
var nPrevious = document.createElement( 'span' );
var nNext = document.createElement( 'span' );

nFirst.innerHTML = 1;
nLast.innerHTML = "";
nDots1.innerHTML = "...";
nDots2.innerHTML = "...";
nPrevious.innerHTML = "";
nNext.innerHTML = "";

var oClasses = oSettings.oClasses;
nFirst.className = oClasses.sPageButton+" "+oClasses.sPageFirst;
nPrevious.className = oClasses.sPageButton+" "+oClasses.sPagePrevious;
nNext.className= oClasses.sPageButton+" "+oClasses.sPageNext;
nLast.className = oClasses.sPageButton+" "+oClasses.sPageLast;

nPaging.appendChild( nPrevious );
nPaging.appendChild( nFirst );
nPaging.appendChild( nDots1 );
nPaging.appendChild( nList );
nPaging.appendChild( nDots2 );
nPaging.appendChild( nLast );
nPaging.appendChild( nNext );

$(nFirst).click( function () {
if ( oSettings.oApi._fnPageChange( oSettings, "first" ) )
{
fnCallbackDraw( oSettings );
}
} );

$(nPrevious).click( function() {
if ( oSettings.oApi._fnPageChange( oSettings, "previous" ) )
{
fnCallbackDraw( oSettings );
}
} );

$(nNext).click( function() {
if ( oSettings.oApi._fnPageChange( oSettings, "next" ) )
{
fnCallbackDraw( oSettings );
}
} );

$(nLast).click( function() {
if ( oSettings.oApi._fnPageChange( oSettings, "last" ) )
{
fnCallbackDraw( oSettings );
}
} );

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

/* ID the first elements only */
if ( oSettings.sTableId !== '' && typeof oSettings.aanFeatures.p == "undefined" )
{
nPaging.setAttribute( 'id', oSettings.sTableId+'_paginate' );
nFirst.setAttribute( 'id', oSettings.sTableId+'_first' );
nLast.setAttribute( 'id', oSettings.sTableId+'_last' );
}
};
[/code]

You'll need to update the indexes in the fnUpdate function for the spans, and style the previous and next elements to show an icon, but the elements are in there with actions attached now :-)

Allan

dergucker

Hi,

I'm pretty sure that I'm annoying, but I got more problems *g*. First of all I want to show you an example: http://tinyurl.com/4jrsxzx

On the right side of this shop you see a paginator. That's exactly what I want :).

1. The previous button and the next button are always hidden.
2. I have 3 pages, now i see following pages: "1233".

The generated code looks like:

[code]


1

1
2
3


3



[/code]

Is it possible that you help me again *g*?

Regards

Martin

allan

This line here: if ( iEndButton != iPages ) - should cause the second '3' to be hidden, if the number of pages is equal to the last button in the list. It's possible that I might have messed up the logic somewhere for that...! I'd suggest adding ( console.log( iEndButton, iPages ); just before that line, and check that it makes sense.

Allan