I'm having trouble figuring out how to work with the Datatables plugin for jQuery in the fact that I need for example if there are 3 numbered page links which would have the First, Previous, Next, Last links as well. If you were on page 1 then the First, Previous buttons should only have the pagination_button_disabled css applied to it but instead it ALSO has the paginate button and then the first or previous css style as well. I just want the first and last to have a css style of paginate_button_disabled if you are on page 1 and obviously revered if you were on page 3 then Last and Next should be disabled.
2 Answers
Mmm maybe something like:
var currentPage = parseInt($(...).text(), 10);
var totalPages = parseInt($(...).text(), 10);
$(".page").removeClass("pagination_button_disabled"); //Enable all initially
if(currentPage == 1){
$("#first, #previous").addClass("pagination_button_disabled");
}
if(currentPage == totalPages){
$("#last, #next").addClass("pagination_button_disabled");
}
Hope this helps. Cheers
answered Jul 8, 2011 at 19:52
Edgar Villegas Alvarado
18.4k2 gold badges45 silver badges61 bronze badges
1 Comment
Jeff Davidson
Thank you but where is exactly should that be placed? Into that main js file of his or somewhere else?
I think that even if they have the class 'paginate_button_disabled' no CSS for that class is defined (in fact all the CSS is inherited from the class 'paging_full_numbers'). I think you should define a css rule
.paging_full_numbers .paginate_button_disabled{
//put your rule for disabled content here
color: gray;
}
after you load datatables CSS
EDIT - i edited your fiddle (only thing i modified is i loaded the source for datatables from the datatables.net site because the link of your script was broken).
I added this line of css
.dataTables_paginate .paginate_button_disabled{
display:none;
}
and the disabled button are hidden. Look here: http://jsfiddle.net/F7GLm/2/
answered Jul 10, 2011 at 0:36
Nicola Peluchetti
76.9k32 gold badges150 silver badges197 bronze badges
12 Comments
Jeff Davidson
I already have my class of paginate_button_disabled setup with those rules and its still not doing it. kansasoutlawwrestling.com/manager/css/style.css
Nicola Peluchetti
Can you post your code (css, html and javascript?) (even better if you create a fiddle on jsfiddle.net). What version of datatables are you using?
Nicola Peluchetti
I edited your fiddle, it wasn't loading the js script of datatable because the path was local to your server. this works: jsfiddle.net/F7GLm/2
Nicola Peluchetti
Like this (the color is the same and no effect on hover) jsfiddle.net/F7GLm/4
Nicola Peluchetti
Elements receive style "rules" from a lot of elements. What style is apllied is calculated with a complicate scoring system. When you have three classes that apply a style to an element (all style applied by classes "scores" ten points), the last style is applied, overriding the previous declarations. CSS is an exact science, but a very difficult one to master, sometimes trial and error is the only way.
|
jquery.dataTables.css