Layout 'info' callback

Layout 'info' callback

menashemenashe Posts: 196Questions: 43Answers: 2

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

  • kthorngrenkthorngren Posts: 21,292Questions: 26Answers: 4,944

    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

  • menashemenashe Posts: 196Questions: 43Answers: 2

    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.

  • kthorngrenkthorngren Posts: 21,292Questions: 26Answers: 4,944

    Sorry the second link should have been this blog.

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

    Kevin

  • menashemenashe Posts: 196Questions: 43Answers: 2

    Yes Sir!!

  • allanallan Posts: 63,439Questions: 1Answers: 10,459 Site admin
    Answer ✓

    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

  • menashemenashe Posts: 196Questions: 43Answers: 2

    Thank you for that explanation.

    Still an AMAZING product! :)

  • menashemenashe Posts: 196Questions: 43Answers: 2

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

  • allanallan Posts: 63,439Questions: 1Answers: 10,459 Site admin

    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

  • kthorngrenkthorngren Posts: 21,292Questions: 26Answers: 4,944

    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

  • menashemenashe Posts: 196Questions: 43Answers: 2

    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!

  • allanallan Posts: 63,439Questions: 1Answers: 10,459 Site admin

    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

  • menashemenashe Posts: 196Questions: 43Answers: 2

    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.

  • kthorngrenkthorngren Posts: 21,292Questions: 26Answers: 4,944

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

    Kevin

  • menashemenashe Posts: 196Questions: 43Answers: 2

    Ah, as in your earlier suggestion?

  • kthorngrenkthorngren Posts: 21,292Questions: 26Answers: 4,944

    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

  • menashemenashe Posts: 196Questions: 43Answers: 2

    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!

  • kthorngrenkthorngren Posts: 21,292Questions: 26Answers: 4,944
    edited June 4

    That description would have been good to start with :smile:

    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

  • allanallan Posts: 63,439Questions: 1Answers: 10,459 Site admin

    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

Sign In or Register to comment.