Layout 'info' callback
Layout 'info' callback
I have a parent-child table. I started using Scroller and noticed that the info
displayed at the bottom of the child table is really the count from the parent table!
So, I created an info callback function which sets the proper start, end and max values. As I trace (F10) through the code, I can see that it is properly displaying. However, at the end (of the tracing) it (re)displays the count from the parent table.
What am I doing wrong?
This question has an accepted answers - jump to answer
Answers
Its hard to say without knowing details of your solution. Is the scroller applied to the parent or child or both? Are you using server side processing for either the parent or child?
Are you doing something like this Child Detail rows solution or have a separate child table like this solution?
Please provide a test case showing the problem so we can better understand what you have and help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Scroller is applied to Parent; in child, scroller: false.
Interestingly, the two links that you included point to the same solution. In my case, every parent has zero or more children (with the data from a different table). But it shoes as sub-rows, not a separate table.
Sorry the second link should have been this blog.
Does this test case replicate the issue?
https://live.datatables.net/gohefoki/903/edit
Kevin
Yes Sir!!
Fundametnally Scroller cannot opeate on a table which has child rows being expanded in it. It would throw off all the virtual position calculations. While this could be considered a bug, it is going to be the least of the issues due to that issue. Disabling Scroller on the parent table allows Scroller to work in the child table, so this isn't likely something I'll make a change for.
A table with Scroller must have all rows of equal height, and no extra additions to the table. There is no way around that.
In this case, you'd need to show the child row as a modal or use some other display mechanisim for it.
Allan
Thank you for that explanation.
Still an AMAZING product!
Allan,
So... back to Paging (Page 1 of XX, etc.)
Everything fits "nicely" on the page. When I expand a child, a scrollbar appears; otherwise, none.
Let's assume that I have 25 lines per page. Given that there is no Scrolling involved, is there any way, when I click on a row--let's say row 15, to move it to the top of the page?
I am using server-side processing.
I imagine that it is complicated, because the server returned row X as the first line, and I am looking to change that.
But is it doable? And how??
I'd be tempted to just remove the
scrollY
option and disable scrolling in the host DataTable entirely. Use paging and page level scrolling instead.However:
As you say, it is going to be a little complicated, but yes it is possible. You would need to use
page()
to set a new start point, and probably adjustpage.len()
to make the new row start at the top of the table. The Ajax request to the server can start at any row, but that isn't exposed as settable via the API other than for the current page / page length.Allan
One option, not Datatables supported, is to move the clicked row to the top using jQuery. For example:
https://live.datatables.net/gohefoki/904/edit
When closed the example uses
draw()
to reapply table sorting.Any Datatables action causing a
draw
event will place the row in the table based on sorting, etc. You could use thedraw
to make sure all open rowsor open rows only on the page are at the top of the table. Datatables doesn't know about this when moving the rows using jQuery or Javascript so you will need to maintain what is moved to the top yourself.
Kevin
Allan,
I am failing to see how I use the
page()
to translate to a new row setting when it deals only in pages? And, as you stated, not exposed!You'd need to calculate what page the row would be on to place it at the top of a page. For example if you click on row index 15, you could say that for a page length of 5, it would be at the top of page 3. Not ideal at all...
The only other thing I can think of is to just shift the scrolling of the page to make the row in question be at the top of the page.
Allan
Ohh!
And Ohh!!!
For row 15 on a page length of 25, that won't work!
And, by design, there is no scrolling on the main DataTable.
Allan suggested scrolling the web page not the Datatable to move the row to the top of the page.
Kevin
Ah, as in your earlier suggestion?
No. My earlier suggestion moves the row to the top of the table. Resulting in the table being out of order from a display perspective but Datatables doesn't know about this.
Use something like window.scrollTo() to scroll the clicked ro to the top of the page.
Kevin
As I mentioned, I have 25 rows per page--no scroll bar.
If I attempt to expand the child on the last row, it is below the visible window.
But, if I expand one of the parent rows, since there is now more information (the child) to display, a scroll bar appears.
Then (and only then), with the extra space now in the scroll bar, if I expand even the last row, it scrolls into view using
Maybe I'm thinking too much as a C# .NET programmer, but can my DataTable have an "inactive" scroll bar so that if I expand the last row first, there is "room" in the DataTable visible window to scroll into view?
Thanks!
That description would have been good to start with
Either you have
scrollY
enabled or the table is in a container that has height and overflow definitions causing the vertical scroll bar to appear. In either case you will need to determine if the scrollbar is visible and if so scroll to the clicked row. If usingscrollY
then, I believe, the scrolling container will have the classnamedt-scroll-body
.You can find many options for determining if the scrollbar is visible and how to scroll within the container on Stack Overflow or you favorite Javascript/jQuery site.
Another option is to remove the overflow and or height restrictions on the table by removing
scrollY
or height and overflow configurations on the container for the table.If you need help with this then plase provide a test case showing what you have so we can offer suggestions. You can probably update one of mine if you wish.
Kevin
That definiately looks like
scrollY
since the scrollbar is for the table body only, not the header as well.I think you'll need to get the position of the child container inside the
dt-scroll-body
element, and then check if it is fully visible or not. If it isn't, then change thescrollTop
of thedt-scroll-body
so that it is fully visible.That is definiately possible, and I think it would be good UX.
Allan