Need help with scrolling and not having the table in its own
Need help with scrolling and not having the table in its own
Hello everyone!
I'm a new DataTables user; heck, I don't even know JavaScript/jQuery. I have a large HTML table (9231 rows) that needs to be dynamically sortable; I had been using this well known JS script:
http://www.kryogenix.org/code/browser/sorttable/
It's very friendly to people without a clue about JS (such as me!). The problem was that it took 10-20 seconds to sort a column -- not due to the actual sort, but rather rendering the sorted data back into the DOM. I asked for help on StackOverflow
http://stackoverflow.com/questions/11304490/quick-html-table-sorting
(that's where I figured out that the actual sorting wasn't the issue), and we eventually decided that infinite scrolling from DataTables would be the best way to "spread out" the massive rendering job.
Here's the page: http://dubslow.tk/aliquot/test/AllSeq.html
It is identical to how I plan to use it, save for some deleted text that goes above the table.
There are a few related problems with how it renders. First and foremost, like I said in the title, the table is put in its own , or at least that's what it looks like to me. I was hoping that the table would be part of the whole page, and not in its own static div with a separate scroll bar. Secondly, "bInfiniteScrolling" requires the use of "sScrollY". I just want the table to go down to the bottom of the page; unfortunately, whenever I try and specify a percentage (choosing a specific pixel size either wastes space on large screens or causes problems for small screens), the table appears to break and not scroll at all. Third, all the table formatting I use renders correctly, except for the width. That's specified as 90%, so perhaps whatever's causing that to not work is what also breaks "sScrollY"?
Thoughts?
Thanks! :)
I'm a new DataTables user; heck, I don't even know JavaScript/jQuery. I have a large HTML table (9231 rows) that needs to be dynamically sortable; I had been using this well known JS script:
http://www.kryogenix.org/code/browser/sorttable/
It's very friendly to people without a clue about JS (such as me!). The problem was that it took 10-20 seconds to sort a column -- not due to the actual sort, but rather rendering the sorted data back into the DOM. I asked for help on StackOverflow
http://stackoverflow.com/questions/11304490/quick-html-table-sorting
(that's where I figured out that the actual sorting wasn't the issue), and we eventually decided that infinite scrolling from DataTables would be the best way to "spread out" the massive rendering job.
Here's the page: http://dubslow.tk/aliquot/test/AllSeq.html
It is identical to how I plan to use it, save for some deleted text that goes above the table.
There are a few related problems with how it renders. First and foremost, like I said in the title, the table is put in its own , or at least that's what it looks like to me. I was hoping that the table would be part of the whole page, and not in its own static div with a separate scroll bar. Secondly, "bInfiniteScrolling" requires the use of "sScrollY". I just want the table to go down to the bottom of the page; unfortunately, whenever I try and specify a percentage (choosing a specific pixel size either wastes space on large screens or causes problems for small screens), the table appears to break and not scroll at all. Third, all the table formatting I use renders correctly, except for the width. That's specified as 90%, so perhaps whatever's causing that to not work is what also breaks "sScrollY"?
Thoughts?
Thanks! :)
This discussion has been closed.
Replies
Just disable sScrollY by removing that option, and disable pagination if you don't want it with bPaginate: false.
> Secondly, "bInfiniteScrolling" requires the use of "sScrollY"
Yes it does - if you want to add elements to the end of a non-scrolling table (a la Twitter), than you would need to use to use the DataTables API to either change the display length or add rows dynamically.
Another option would be to simply set sScrollY to be the height of the window (although you need to consider window resizing as well if you go that route).
Allan
I also tried looking at the Scroller extra, which is recommended over bScrollInfinite, but in the example in that page,
http://datatables.net/extras/scroller/
I can't figure out how to scroll past the initial ten rows visible, despite the description sounding perfect. It's also the same problem I just described with sScrollY set to screen size. Is it a bug perhaps? There were no buttons in the example table that I could see, save for the column headers themselves.
This is a bit of a limitation with infinite scrolling - you need to set the iDisplayLength option to be large than the number of rows that will be shown.
> Scroller [...] I can't figure out how to scroll past the initial ten rows visible, despite the description sounding perfect.
Did you remove the infinite scrolling option?
Allan
I set that to 100, but then it displayed the whole table, not 100 rows.
[quote]allan said: Did you remove the infinite scrolling option?[/quote]
That was in reference to the example at the bottom of this page:
http://datatables.net/extras/scroller/
I can't change how that table is set up. I hadn't actually tried to use Scroller myself, since the example on the page doesn't appear to work.
Edit: The actual examples appear to work fine, i.e. here:
http://datatables.net/release-datatables/extras/Scroller/index.html
and not at the first link.
Edit2: Okay, since the other examples appeared to be working, I did just try Scroller, and now I am able to scroll through all the entries in the table. There are some problems remaining, though I feel closer to my goal.
(Found the solution to 1)
2: Somehow the column width selection has changed, and it's not as good. Can I disable dynamic column widths, and just force them to be as wide as necessary?
3: I would still love for sScrollY to accept percentages as valid measurements. I think I'll file this under bug reporting, once I get some more work done.
Addendum: % and cm don't work properly. When I use %, the table farts out completely; when I tried cm, the table was the right size, but didn't render properly. This same phenomenon also occurred with in. mm worked fine, as does px. Definitely a bug with certain CSS units.
bAutoWidth: false should do that.
> 3: I would still love for sScrollY to accept percentages as valid measurements.
Using sScrollY as a percentage does work just fine: http://live.datatables.net/ocuras/edit#javascript,html,live . However, you need to remember that it is being applied to the scrolling container, which must have height itself in order to work, and more than likely you want to take the header/footer into account, which doe to the CSS positioning and relative parent, it might not.
Allan
In any case, thanks for the continued support!