Layout 'info' callback

menashe · June 3

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?

kthorngren · June 3

What am I doing wrong?

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?

I have a parent-child table

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

menashe · June 3

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.

kthorngren · June 4

Sorry the second link should have been this blog.

Does this test case replicate the issue?
https://live.datatables.net/gohefoki/903/edit

Kevin

menashe · June 4

Yes Sir!!

allan · June 4

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

menashe · June 4

Thank you for that explanation.

Still an AMAZING product!

menashe · June 4

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??

allan · June 4

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:

when I click on a row--let's say row 15, to move it to the top of the page?

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 adjust page.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

kthorngren · June 4

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 the draw to make sure all open rows
or 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

menashe · June 4

Allan,

The Ajax request to the server can start at any row, but that isn't *exposed as settable via the API other...

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!

allan · June 4

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

menashe · June 4

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.

kthorngren · June 4

Allan suggested scrolling the web page not the Datatable to move the row to the top of the page.

Kevin

menashe · June 4

Ah, as in your earlier suggestion?

kthorngren · June 4

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

menashe · June 4

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

        const element = document.querySelector(".slctd").scrollIntoView({
            behavior: 'smooth'
        });

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!

kthorngren · June 4

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 using scrollY then, I believe, the scrolling container will have the classname dt-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

allan · June 5

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 the scrollTop of the dt-scroll-body so that it is fully visible.

That is definiately possible, and I think it would be good UX.

Allan

Layout 'info' callback

Layout 'info' callback

Answers

Howdy, Stranger!

Categories

DataTables

Layout 'info' callback

Layout 'info' callback

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables