Pagination's First and Previous buttons are not disabled on page #1

macimagic

Pagination's "First" and "Previous" buttons are not disabled on page #1

STEPS TO REPRODUCE:

1. create dataTable with this code:

[code]
$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "full_numbers"
} );
} );
[/code]

You can also see table example here: http://datatables.net/examples/basic_init/alt_pagination.html

2. Go to page #1 by clicking the "First" button in the pagination section.

3. See the status of the "First" and "Previous" buttons, they are active and clickable.

4. Go to the last page by clicking "Last" button.

5. See the status of the "Last" and "Next" buttons, they are active and clickable.


EXPECTED RESULT:

1. Buttons "First" and "Previous" have a disabled state for page #1
2. Buttons "Last" and "Next" have a disabled state for last page


ADDITIONAL INFO:

DataTables v1.7.6

[code]
_oExt.oStdClasses = {
/* Two buttons buttons */
"sPagePrevEnabled": "paginate_enabled_previous",
"sPagePrevDisabled": "paginate_disabled_previous",
"sPageNextEnabled": "paginate_enabled_next",
"sPageNextDisabled": "paginate_disabled_next",
"sPageJUINext": "",
"sPageJUIPrev": "",

/* Full numbers paging buttons */
"sPageButton": "paginate_button",
"sPageButtonActive": "paginate_active",
"sPageButtonStaticDisabled": "paginate_button", // <<<<<<<< THE PROBLEM MIGHT BE HERE
"sPageFirst": "first",
"sPagePrevious": "previous",
"sPageNext": "next",
"sPageLast": "last",
[/code]

m0zz3r

I had this issue as well, appears to be fixed when using the following (may require a themed CSS):

[code]"bJQueryUI": true[/code]

gargi10

This particular problem is not being solved by this. do we need to input some more code. if yes then plz let me know.

saurabh

Does anyone have a solution for this issue?

jc3835

Also curious as to whether or not a solution has been found. I'm seeing this behavior with any implementation, whether it's a basic table, or ThemeRoller theme.
Thanks.

jc3835

Following up on this topic, even the example linked above (http://datatables.net/examples/basic_init/alt_pagination.html) does not disable buttons. (e.g. First and Previous buttons are not disabled when on page 1).

trishdev

Try defining that state in the css:
.first paginate_button.paginate_button_disabled{background-color: #f4f4f4; border: 1px solid #f4f4f4;}
or whatever color you want to indicate disabled and do the same for the last..

Does that help?

jc3835

Trish,
Thank you for replying, but no, it didn't resolve my issue.
I'm now noticing that the active and hover states aren't working either... which leads me to believe I'm missing an entire class declaration.

I just noticed the comment from Allan in the header of the demo_table_jui.css file:
[quote]
* Common issues:
* 'full_numbers' pagination - I use an extra selector on the body tag to ensure that there is
* no conflict between the two pagination types. If you want to use full_numbers pagination
* ensure that you either have "example_alt_pagination" as a body class name, or better yet,
* modify that selector.
[/quote]

Unfortunately, that didn't help either with I added a class name to the body tag.
Am I missing something else similar to that?

kshipp

After searching for hours without any success on solutions provided, I finally put together a solution that works! I wish this would work in the code without all this extra effort.
This solution is in two parts (page change and css change):

PART 1:
You'll need to add this class to the dataTables.css file (or however you want to add the class):
// start here
.paginate_button_disabled {
border: 1px solid #aaa;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 2px 5px;
margin: 0 3px;
color: #999 !important;
background-color: #ff0000;
}
// end here

Notice that I left all the original parms in this class and set the background color to a loud red --- just so you can definitely see how it works. :) Just change the background color to whatever you like.

PART 2:
In your page load js, you'll need to add this line:
$.fn.dataTableExt.oStdClasses.sPageButtonStaticDisabled = "paginate_button_disabled";


Hope this helps all of you searching for this solution to the problem!