Can we show only First, Previous, Next and Last buttons and not the number of pages in Pagination
Can we show only First, Previous, Next and Last buttons and not the number of pages in Pagination
vikash_chaurasia1
Posts: 13Questions: 0Answers: 0
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
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
This discussion has been closed.
Replies
2. With styling. Have a look at the elements with Firebug (it's the easiest way) to see their class names.
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
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
Can you post a link to a page which is showing the TableTools warning when using DataTables 1.7.2 please?
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
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.
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
[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
[code]
$.fn.dataTableExt.oStdClasses.sPageButtonStaticDisabled = "paginate_button_disabled";
$('#mainTable').dataTable();
[/code]
Allan