Applying disabled class to only certain links

xtremer360

I'm trying to find out how I can only assign the class name of paginate_button_disabled when your on page 1 for the first and previous links but not sure how and obviously when your on the last page then the same goes for the last and next buttons.

allan

If you want to customise the paging controls, then you might need to create a pagination plug-in: http://datatables.net/development/pagination which does it exactly the way you want. The built-in methods aren't hugely flexible other than the CSS options in order to try and keep the core to a sensible size.

Having said that - doesn't it do that already? "paginate_button_disabled" is applied to the first and previous buttons on the first page.

Allan

xtremer360

Well lets say on page 1 it applies the classes: first, paginate_button, and paginate_button_disabled to the First Page link. However I only need it to apply the styles I have set to the paginate_button_disabled style.

allan

Oh I see - in that case yes - you'd need to customise the code in DataTables a little bit or to wrap it up into a plug-in which applies the classes exactly as you require.

Allan

xtremer360

Well any suggestions because I've been looking through the code and as much as I'd try and change something I'm afraid I'm going to mess with the wrong thing and make something else not work.

allan

Have a look in fnUpdate for the full numbers paging function ( https://github.com/DataTables/DataTables/blob/master/media/js/jquery.dataTables.js#L480 ) - that is the only function you should need to change to do what you have described.

Allan

xtremer360

Thank you Allen. Great script you've written. Maybe someone can also reply for the fact of so much to attempt to understand. That way I don't mess with the right part.

xtremer360

Anybody else have any additional ideas?

xtremer360

After looking around for additional help I wasn't able to find an answer. Here's my css. Only thing is when the button is disabled it still gets the styles of the button and like either first, last, previoius,next buttons. Since its disabled it should only have the class of disabled.

.paginate_button_disabled {
border: 1px solid #F3F3F3;
color: #CCCCCC;
margin-right: 2px;
padding: 2px 5px;
}
.paginate_button:hover {
border:1px solid #52bfea;
color: #fff;
background-color: #52bfea;
}
.paginate_active {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #52bfea;
font-weight: bold;
background-color: #52bfea;
color: #FFF;
}
.paginate_button {
padding: 2px 5px 2px 5px;
margin-right: 2px;
color: #52BFEA;
border: 1px solid #52BFEA;
}

xtremer360

I tried working with this but can't seem to come up with what works because all 3 are overwriting each other when the styles are applied and for the disabled buttons it has those styles marked out in firebug and it only applies the pagination_button style.

xtremer360

Any ideas?

xtremer360

To show you a visual affect here's a jsfiddle I created to show you.

http://jsfiddle.net/Rx8se/

Right but if you notice it has the disabled styles crossed off when it shouldn't because with the table having no data then all 4 of those buttons should be disabled.

fbas

[edit: I think I misunderstood your question, so I answered the wrong thing]

After every time your table is drawn, you can get the count of rows drawn, and disable or enable the buttons if the number of rows is less than or greater-than-or-equal-to 1 row:

[code]
oTable = $('#your_table').dataTable( {
fnDrawCallback: function() {
iDisplayLength = oTable.fnSettings().aiDisplay.length;
if (iDisplayLength < 1) disable_buttons();
else enable_buttons();
}
});
[/code]

xtremer360

So your saying this:

[code]$('#templatesPageList').dataTable( {
"sDom": 'rti<"pagination"p>',
"iDisplayLength": 1,
"sPaginationType": "full_numbers",
if ("iDisplayLength" < 1) disable_buttons();
else enable_buttons();
} );
[/code]

xtremer360

The other issue is if there is say 5 pages and your on page 1 then the Previous and First buttons should become disabled.

fbas

I don't know if there's an easier way to find out which page you're on, but you can do some math with oTable.fnSettings()._iDisplayStart and _iDisplayLength

something like:

[code]
$('#templatesPageList').dataTable( {
"sDom": 'rti<"pagination"p>',
"iDisplayLength": 1,
"sPaginationType": "full_numbers",
"fnDrawCallback": function () {
iLength = oTable.fnSettings().aiDisplay.length;
if (iLength < 1) disable_buttons();
else enable_buttons();

iDisplayLength = oTable.fnSettings()._iDisplayLength;
iRecordsDisplay = parseInt(oTable.fnSettings()._iRecordsDisplay) ;
iCurrentPage = Math.floor(iRecordsDisplay / iDisplayLength);
iLastPage = iRecordsDisplay - iDisplayLength;

disable_current_button(iCurrentPage);
if (oTable.fnSettings()._iDisplayStart < 1) disable_first_button();
if (oTable.fnSettings()._iDisplayStart >= iLastPage ) disable_last_button();
}
} );
[/code]

xtremer360

I appreciate you taking the time and helping me correct this issue, however, I updated the jsfiddle and I'm still not getting the correct results I'm wanting.