How to make button blur when using "sPaginationType": "full_numbers"
How to make button blur when using "sPaginationType": "full_numbers"
dodoflying
Posts: 3Questions: 0Answers: 0
Hello,
I'm using DataTable to implement a multiple pages table like this
[code]
$(".datatables").dataTable({
"sPaginationType": "full_numbers"
});
[/code]
I found that if I click the first page, the button "First" and "Previous" do not turn to blur. Same thing happens when click the latest page button.
I test using Jquery theme like this
[code]
oTable = $('#example').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
[/code]
But in my project, I don't want to use Jquery theme. How could I make buttons blur?
In addition, I found that if the content no more than one page, the buttons "first","previous",'"next","last" are all still there. How to do not display them?
Thanks in advance!
Don
I'm using DataTable to implement a multiple pages table like this
[code]
$(".datatables").dataTable({
"sPaginationType": "full_numbers"
});
[/code]
I found that if I click the first page, the button "First" and "Previous" do not turn to blur. Same thing happens when click the latest page button.
I test using Jquery theme like this
[code]
oTable = $('#example').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
[/code]
But in my project, I don't want to use Jquery theme. How could I make buttons blur?
In addition, I found that if the content no more than one page, the buttons "first","previous",'"next","last" are all still there. How to do not display them?
Thanks in advance!
Don
This discussion has been closed.
Replies
This is what you need to do:
Add the following piece of code before you initialize your datatable.
[code]
$.fn.dataTableExt.oStdClasses.sPageButtonStaticDisabled = "paginate_button_disabled";
[/code]
By adding the above piece of code, you are saying that the "paginate_button_disabled" class should be applied when the "first", "prevoius", "next" and "last" links would have no effect on the current page.
Now you need to define the "paginate_button_disabled" class in your stylesheet file (.css) which will give the disabled effect for the link.
See sample style for the pagination functionality:
[code]
.searchresultspager span,
#searchresults_paginate span.first,
#searchresults_paginate span.previous,
#searchresults_paginate span.next,
#searchresults_paginate span.last,
#searchresults_paginate span.paginate_button,
#searchresults_paginate span.paginate_active
{
border: 1px solid #AAE;
color: #15B;
text-decoration: none;
display: block;
float: left;
margin-bottom: 5px;
margin-right: 5px;
min-width: 1em;
padding: 0.3em 0.5em;
text-align: center;
cursor: pointer;
}
.searchresultspager span:hover,
#searchresults_paginate span:hover,
#searchresults_paginate span.paginate_active
{
background-color:#26B;
color:white;
}
#searchresults_paginate span.paginate_button_disabled
{
color:#999;
border-color:#CCC;
}
#searchresults_paginate span.paginate_button_disabled:hover
{
color:#999;
background-color:#F1F0FF;
}
[/code]
Replace "searchresults" with your datatable name.
Hope this helps.
-j