Themeroller - IE does not honor disabled page numbers in pager

paulsperanza

Al,

If you run your themeroller example (http://datatables.net/styling/themes) in Chrome, Firefox and Safari you will see disabled page numbers if you are on the first page.

Run it in IE (8) and the page numbers will not be disabled. Is this something from your end? I would dig in but I am swamped, sorry.

Thanks,
Paul Speranza

noel

I have figured out what is going on here. It has to do with the use of fg- vs ui- classes.

I could not find the project on Github to fork and make changes. Is it somewhere simple to make changes and submit for review?

There is still a problem in IE when you go to the next page additional page numbers are added
http://twitpic.com/2ds0c9/full

I believe the problem is in this area
nPaginateList = an[i].childNodes[2];
nPaginateList.innerHTML = sList;

If you add this right after you will see the number of spans increases in IE, but not in Safari.

alert($("div.dataTables_paginate span").length);

Any ideas?

allan

If you can provide a diff with your changes that would be perfect. Adding the source to github is one of the things I've still to get around to doing...

Is it just a case of me using the wrong classes by default?

Allan

noel

Allan,

Have a look at this for the changes
http://www.pastie.org/1086874

Do you have any ideas on the extra SPANS? I've spent all day on this trying to get this done by tomorrow and this is my remaining issue. Even thought of doing a post load jquery hack, but haven't been able to figure it out.

noel

Allan,

Dont know how I missed this, but the problem is that the SPAN with Previous is getting overwritten with the page numbers. Look at my picture

http://twitpic.com/2ds0c9/full

Getting closer.

Noel

noel

This fixes the double page numbers

I commented this out
/* Build up the dynamic list forst - html and listeners */
//nPaginateList = an[i].childNodes[2];
//nPaginateList.innerHTML = sList;

and did this instead
x = $("div.dataTables_paginate span:eq(2)");
if ( x.children().size() == 0 ) {
x.html(sList);
}

There is still a problem with the classes applied to disabled First, Previous, Next, Last

noel

Okay, here is a good workaround

Changed this part
/* Build up the dynamic list forst - html and listeners */
nPaginateList = an[i].childNodes[2];
// THIS IS THE PROBLEM ---> nPaginateList.innerHTML = sList;
x = $(an[i]).find("span:eq(2)");
x.html(sList);

And to fix the "non-enabling" First and Last I had to take out the corners, just have
"sPageFirst": "first",
"sPageLast": "last",

allan

Very interesting! Thanks for the investigation noel! I'll have a look at including this fix in the next release.

Regards,
Allan

noel

Allan,

Note that I didnt do any sort of testing without the jQueryUI theme, not sure if anything broke there.

Do get it on Github. That will make it simpler to contribute for all.

-Noel

UPEngineer

noel,

I have tried your fixes in both the css as well as the .js code.

It works great in IE, however, now in Firefox and Chrome, the numbers are "bunched" together.

Could I have missed something? Any ideas?

UPEngineer

Well I think I figured it out.

If I leave out the margin: 0 in the updated css file, it seems to work.

But now I have another issue. The "toolbar" or whatever it is called that holds the search box and the Displaying xxx of xxxx is compressed and not full size. I will investigate to see if I can figure this out.

UPEngineer

Never mind, I figured out all my problems.

I still had fg-toolbar instead of ui-toolbar in all my datatables declarations. :)

Thanks for the update and now IE displays the numbers correctly!!!!

noel

Great, now lets see if we can figure out my filtering issue :)

http://datatables.net/forums/comments.php?DiscussionID=2512&page=1#Item_1

I am wondering if these two issues are red hearings pointing to other IE vs everybody JS issues.
I noticed that you don't always use jQuery functions for JS operations.

noel

I went back to 1.6 to fix the filtering problems. I only changed all the fg- to ui- and took out the rounding classes on first and last and all worked properly in IE.

E.g. I did NOT have to apply this from above

/* Build up the dynamic list forst - html and listeners */
nPaginateList = an[i].childNodes[2];
// THIS IS THE PROBLEM ---> nPaginateList.innerHTML = sList;
x = $(an[i]).find("span:eq(2)");
x.html(sList);

I'm worried about what else may have broken in 1.7

allan

Okay I think I understand what is happening here. ThemeRoller 1.8 introduced a few small changes, such as fg-button being renamed to ui-button. noel's patch takes care of this, which I've applied. However, I've also retained the 1.7 theme classes for the moment, in order to retain backwards compatibility (since many DataTables' installs use ThemeRoller 1.7). I've updated the distribution to use 1.8.4 (current stable) by default.

Regarding the problem with the spans - I've not been able to reproduce this, but I've altered the code to make use of selectors rather than making an assumption on the structure of the DOM.

These updates will be released with DataTables 1.7.1.

Regards,
Allan