problem using custom pagination plug-in with ThemeRoller

sluggo

the pagination forward and back buttons don't show when I use bJQueryUI": true and SpaginationType: "scrolling". it works if I either remove the bjQ, or scrolling. If I leave the the spaginationType null, then I get themeroller buttons, if I set it to scrolling I get demo.css buttons. for both I get a whole lot of nothing. As a JS coder, I'm a real hack, and I don't yet understand the JS assignment of css real well. So, if someone can quickly point me in the right direction, I won't spend an inordinate amount of time fumbling around the JS code. (although it might prove to be educational). Next I need a clue about surrounding divs to keep the table height constant… It was like a carnival ride with that thing bouncing up and down. Also, referring to the show/hide columns demo, I'd like to maybe use the custom table tools button plug-in to make a toggle (perhaps a sprite) in the tool area or maybe even in the TH? Comments? And back to css, why does the table pickup styling from demo_table_jui.css and not the theme roller {row color and such)? Lastly, if I put a table in a TD and then collapse the column containing that TD, with the table collapse as well?

Cheers!
Sluggo

allan

Hi Sluggo,

The "scrolling" plugin didn't have any support for the jQuery UI ThemeRoller option of DataTables, which is why it wasn't working. I've just updated the plug-in on the plug-ins page: http://datatables.net/plug-ins/pagination and the update will be int he examples included in 1.9.1.

I have to say though that I think the scrolling pagination is now totally out of date relative to the rest of DataTables (I think it was written before DataTables had ThemeRoller support, if I remember correctly, never mind some of the more advanced options such as proper scrolling now). I think ultimately that what would be best is for a "first class" plug-in (like FixedColumns, TableTools etc) be written which effectively provides paging support while using real scrolling, rather than the fake one in the scrolling plug-in. Added to my to-do list!

> Next I need a clue about surrounding divs to keep the table height constant… It was like a carnival ride with that thing bouncing up and down.

Add:

[code]
div.dataTables_wrapper { min-height: 300px }
[/code]

to your CSS.

> Also, referring to the show/hide columns demo, I'd like to maybe use the custom table tools button plug-in to make a toggle (perhaps a sprite) in the tool area or maybe even in the TH?

Do you mean something like this: http://datatables.net/extras/colvis/ ? I'm not sure how you would put it in the TH since once you've hidden a column, how would you get it back? Unless you would all columns into the list in all THs, which sounds a bit messy from an interaction pov.

> And back to css, why does the table pickup styling from demo_table_jui.css and not the theme roller {row color and such)?

ThemeRoller has now concept of row colours at the moment. Remember DataTables isn't a jQuery UI component, so there are aspects of the table which have no meaning in ThemeRoller. The information element on the bottom left of the table for example. Hence why the jui CSS file is needed. The demo_table_jui.css is huge though and really only needed for supporting all of the DataTables examples. Have a look at the jquery.dataTables_themeroller.css file to get an idea of what is needed for minimal styling.

> Lastly, if I put a table in a TD and then collapse the column containing that TD, with the table collapse as well?

By collapse do you mean hide (as in column visibility options)? What is in a cell is irrelevant to DataTables for column visibly / filtering options - the contents will be removed from the display.

Allan