Pagination custom styles

jasonsf

In version 1.7.6, I had to change lines 574, 575, 585 and 586 to get the custom styles for sPageFirst, sPagePrevious, sPageNext, and sPageLast to function correctly.

FROM

[code]
anStatic[0].className += " "+oClasses.sPageButton;
anStatic[1].className += " "+oClasses.sPageButton;
.
.
.
anStatic[2].className += " "+oClasses.sPageButton;
anStatic[3].className += " "+oClasses.sPageButton;
[/code]

TO

[code]
anStatic[0].className += " "+oClasses.sPageFirst;
anStatic[1].className += " "+oClasses.sPagePrevious;
.
.
.
anStatic[2].className += " "+oClasses.sPageNext;
anStatic[3].className += " "+oClasses.sPageLast;
[/code]

Is this a known issue?

allan

I don't think that this is a bug actually - sPageFirst is intended for the button which says "First" - not anStatic[0] which might or might not be a link to the first page. The anStatic array of nodes is a reference list to the buttons with 1, 2, 3 etc in them - which are just treated as buttons - hence sPageButton being used there, while sPageFirst is used else where.

Allan

jasonsf

Making those changes made it possible for me to override the styles applied to the Next, Last, Previous and First buttons. Before making the changes, I could not get Datatables to use my custom classes for those 4 buttons. What might I be doing wrong, then? I'll post some code samples tomorrow.

Thanks,
Jason

allan

I don't really understand why changing that code would effect the First, Next etc buttons, since it is used for the numbered list, not the named buttons. You should be able to just do something like span.first {} to get the 'First' text button (not the '1' button).

Allan

jasonsf

Here is a simplified version of my code.

[code]




var oTable;
$(document).ready(function () {

$.fn.dataTableExt.oPagination.iFullNumbersShowPages = 5
$.fn.dataTableExt.oStdClasses.sPageFirst = "A B C";
$.fn.dataTableExt.oStdClasses.sPageLast = "A B C";
$.fn.dataTableExt.oStdClasses.sPageButton = "A B C";
$.fn.dataTableExt.oStdClasses.sPageButtonActive = "A B X";
$.fn.dataTableExt.oStdClasses.sPageButtonStaticDisabled = "Z";
$.fn.dataTableExt.oStdClasses.sPagePrevious = "Z";
$.fn.dataTableExt.oStdClasses.sPageNext = "Z";

oTable = $("#<%= tblPINs.ClientID %>").dataTable({
"sPaginationType": "full_numbers",
"bSortClasses": false,
"bFilter": true,
"sDom": 'r<"search">tlp',
"aaSorting": [[1, 'asc']]
});


[/code]

Here is the rendered HTML. Notice that the "Z" class does not appear in the Previous or Next class list.

[code]

First
Previous

1
2
3
4
5

Next
Last

[/code]

I did notice, however, if I use a single class for each override, it works properly. Perhaps this is a bug in how Datatables handles multiple classes in one class declaration?

allan

Thanks very much for the test case - it's extremely helpful! Also my apologises - I was getting a bit confused before - I'm on the right track now :-)

Looking at the example, when I use DataTables 1.8 beta 4 on the first page, looking at just the 'First' button when I load the page I have classes of "C" and "Z" applied. "A" and "B" are not applied because the button is not active and therefore the sPageButtonActive definition cases them to be removed. If sPageButtonActive did not contain A and B then they would still be there. Likewise Z is added since the button is disabled and sPageButtonStaticDisabled.

If I then page to the second page the 'First' button has classes of A, B and C. This just sPageFirst. What I'm wondering is if the confusion is around the sPageButtonActive option. Classes in sPageButtonActive are removed from the static buttons, but it is not then added back on if the button is active...

Hmmm - escuse the meandering message please :-). I've just tried this is:

[code]
$(document.body).addClass('a a a');
document.body.className // "a a a"
$(document.body).removeClass('a');
document.body.className // "a a"
[/code]
That is not what I expected and explains at least some of the behaviour of DataTables here. jQuery is only removing the first instance of the class that it finds, but will happily add multiple classes the same. This explains why with your setup if you click next then previous then the 'First' button does not return to it's original state. So this sounds like a little jQuery bug (tried in both 1.6.1 and 1.5.2).

That however doesn't detract from the slightly odd naming scheme I've picked for the DataTables buttons. Something that I'll most certainly tidy up in the next major revision - probably not right now as I'm worried about breaking backwards compatibility though. I think with the jQuery issue known and the DataTables naming being understood (for what it is) then hopefully it is possible to code around this...

Allan

allan

I've just opened this bug http://bugs.jquery.com/ticket/9499 on the jQuery tracker - will see what they say.

Allan

jasonsf

Thanks, Allan. As always, I'm impressed and gratified at your responsiveness.

My "Z" class above is defined as "display:none;" and simply hides those buttons. My goal is to hide the Previous and Next buttons when the screen width is small to avoid wrapping. They are redundant when you have more than iFullNumbersShowPages = 3 or greater, anyway. Having "Z" not applied caused the buttons to remain instead of being hidden.

Knowing about the jquery bug will help. Thanks again.

Jason