Can we show only First, Previous, Next and Last buttons and not the number of pages in Pagination

vikash_chaurasia1

Hi,

Can we show only First, Previous, Next and Last buttons and not the number of pages while using the Pagination feature od the data tables? How we can do this?

Also, how can we disable first and previous button on the first page and next and last button on the last page?

Thanks in advance

allan

1. http://datatables.net/plug-ins/pagination#four_button

2. With styling. Have a look at the elements with Firebug (it's the easiest way) to see their class names.

Allan

vikash_chaurasia1

Hi Allan,

Thanks for your quick reply. I followed your link given above (http://datatables.net/plug-ins/pagination#four_button)
but, when I am implementing it in my application, I am getting javascript alert (Warning: TableTools requires DataTables 1.5 beta 9 or greater).

However, I am already using DataTables 1.5 beta 10.

Please suggest.

allan

I doubt that's anything to do with the plug-in - more to do with TableTools as the warning suggests. I'd say upgrade to 1.7.2 which is the current release.

Allan

vikash_chaurasia1

Hi Alan,

Even when I have upgraded to 1.7.2 version of DataTables, the same warning is apparing due to which the result list is not getting the pagination features.

I copied the js files for datatables and tabletools from the 1.7.2 release in my Application.

Also, below is the code that I inserted in the jquery.dataTables.js file after the code ending for full_numbers functionality.

==========================================
[code]
"four_button": {
/*
* Function: oPagination.four_button.fnInit
* Purpose: Initalise dom elements required for pagination with a list of the pages
* Returns: -
* Inputs: object:oSettings - dataTables settings object
* node:nPaging - the DIV which contains this pagination control
* function:fnCallbackDraw - draw function which must be called on update
*/
"fnInit": function ( oSettings, nPaging, fnCallbackDraw )
{
nFirst = document.createElement( 'span' );
nPrevious = document.createElement( 'span' );
nNext = document.createElement( 'span' );
nLast = document.createElement( 'span' );

nFirst.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sFirst ) );
nPrevious.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sPrevious ) );
nNext.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sNext ) );
nLast.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sLast ) );

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

nPaging.appendChild( nFirst );
nPaging.appendChild( nPrevious );
nPaging.appendChild( nNext );
nPaging.appendChild( nLast );

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

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

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

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

/* Disallow text selection */
$(nFirst).bind( 'selectstart', function () { return false; } );
$(nPrevious).bind( 'selectstart', function () { return false; } );
$(nNext).bind( 'selectstart', function () { return false; } );
$(nLast).bind( 'selectstart', function () { return false; } );
},

/*
* Function: oPagination.four_button.fnUpdate
* Purpose: Update the list of page buttons shows
* Returns: -
* Inputs: object:oSettings - dataTables settings object
* function:fnCallbackDraw - draw function which must be called on update
*/
"fnUpdate": function ( oSettings, fnCallbackDraw )
{
if ( !oSettings.aanFeatures.p )
{
return;
}

/* Loop over each instance of the pager */
var an = oSettings.aanFeatures.p;
for ( var i=0, iLen=an.length ; i

vikash_chaurasia1

Is it surely possible to disable the Previous and First button while on first page and similarly, Next and Last button while on last page? Any live example?

allan

The example here, http://datatables.net/ , shows the buttons disabled when they can't be used. Indeed the code you posted above shows how the classes are used!

Can you post a link to a page which is showing the TableTools warning when using DataTables 1.7.2 please?

Allan

vikash_chaurasia1

Thanks, Allan

Unfortunately, I can't post the link, because, it is currently running on my own PC and not published on any open URL.

As described in earlier post above, copied the required js files in the Application from 1.7.2 Distribution, put the code for four_buttons, in the js file, and deployed the WAR. When I am running the application, I am getting the warning. And hence it is not working.

Thanks

allan

Are you able to enable port forwarding on your router so I could take a quick look at the page? You can send it to me at http://datatables.net/contact so it isn't publicly visible. My guess is that it isn't using 1.7.2 for whatever reason - possible browser cache or just a wrong path. But without being able to see what is happening, I don't think I can help much.

Allan

vikash_chaurasia1

Allan,

Again thanks for all your kind help.

I am sorry, I don't have access rights to enable port on my PC, since my co. policy doesn't allow this. However, for your information, I have implemented this solution in one of the portlet which is deployed on the Liferay Portal version 5.2.3.

Thanks.

peterkronenberg

Allen,
The example you show with the First and Previous buttons disabled on the first page is using the UI Themeroller. Is there a way to do it without that? For example, this page, http://datatables.net/examples/basic_init/alt_pagination.html, shows what I'm seeing. When I look at the classes with Firebug, the class doesn't seem to change depending on whether they are disabled or not. All the buttons have a class of paginate_button and then there are separate classes for first, previous, next and last. There is no disabled status

allan

You can use the classes variables to assign whatever class you want to for the various states that DataTables puts the buttons into: http://datatables.net/styling/custom_classes#sPageButtonStaticDisabled

Allan

peterkronenberg

Hmm, can't seem to get that working. Should this work?

[code]options = {
"sPageButtonStaticDisabled" : "paginate_button_disabled"
};

$('#mainTable').dataTable(options);
[/code]

Looking at the code, it's not clear if if the options are set directly or if they are part of a larger object

allan

It's not an initialisation time object, but rather a global one:

[code]
$.fn.dataTableExt.oStdClasses.sPageButtonStaticDisabled = "paginate_button_disabled";
$('#mainTable').dataTable();
[/code]
Allan