Answers

• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  January 2022 edited January 2022

  The examples you linked to aren't using any of the Datatables scrolling features like scrollX. You mention something about scrolling. Have you enabled a Datatables scrolling feature?

  Are you using server side processing, serverSide set true?

  We will need to see the issue replicated to help debug. Can you update the example test case to show the issue?

  Kevin
• sdorman Posts: 6Questions: 1Answers: 0

  January 2022

  I have not enabled any scrolling features and I am not using serverSide. I did try to play with that test case to use the same table settings I'm using but I didn't get the problem. That's why I thought maybe it was related to Bootstrap or some other library I am using in my application. I will try to modify that case further to see if I can get as much of my set up in there as possible using the /ajax/objects.txt data.
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  February 2022

  which says to use draw(page) instead of draw(false) to maintain the position but I am not calling the draw function myself.

  Is the problem that the first page of the Datatable is displayed or that the page moves up to the top of the table but the same page is displayed?

  collapse the same parent, the child rows hide but the page jumps up to the top of the table.

  Sounds like the page moves up to display the top of the table and remains on the same page. If this is the case its not the problem described using draw() from the thread you linked. Look for some event that fires which uses something scrollTo() to move around on the page.

  Kevin
• sdorman Posts: 6Questions: 1Answers: 0

  February 2022

  Yes, it remains on the same page and moves to the top of the table. I am not using the Scroller extension which is needed for scrollTo(). I added the following to capture the scroll event but it didn't trigger:

      $('#sites_wrapper .dataTables_scrollBody').scroll(function () {
          console.log('sites wrapper');
      });
  
      $('.dataTables_scrollBody').on('scroll', function () {
          console.log('sites tbody');
      });
  

  I updated live.datatables.net/tefaxula/4/edit with the above code and uncommented out the console writes when the draw event is called - see here
  live.datatables.net/tefaxula/29/edit

  Interestingly, in that example, the draw only gets triggered when expanding the child rows. In my application, it gets triggered when expanding but also randomly gets triggered when collapsing rows. At first, I thought it only triggered if it was the first time I collapsed that row but after a few more tries, it triggers again. It's inconsistent and doesn't happen at all with the live example.
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  February 2022

  What I'm trying to understand is if the web page itself is scrolling up to a certain point - where the table is displayed for example. I meant something like Javascript scrollTO().

  Or if the table display being updated to show the first page.

  but also randomly gets triggered when collapsing rows

  Yes, that sounds strange.

  Make sure your child draw event(s) have e.stopPropagation() so the draw() doesn't bubble up to the parent.

  Kevin
• sdorman Posts: 6Questions: 1Answers: 0

  February 2022

  I've made some progress but don't fully understand what is happening yet.

  I updated my test case so you can see the behavior:

  live.datatables.net/tefaxula/29/edit

  I added a new column on the parent table that uses a columnDef to render an <a href> button. I gave it a different class name than the original column and captured the click on that class. When expanding/collapsing using this new column, the jumping occurs.

  columnDefs: [
      {
          targets: 0,
          className: 'childdetails-control',
          render: function (data, type, row, meta) {
              return '<a href="#" class="btn btn-link" data-id="' + row.name + '" > B </a>';
          }
      }
  ]
  

  When using the original button - whose behavior is captured by setting the className on the column data - the expanding/collapsing works fine.

  columns: [
      {
          data: null,
      },
      {
          className: "details-control",
          orderable: false,
          data: null,
          defaultContent: "",
          width: "10%"
      },
  ...
  
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  February 2022

  I see. To replicate we need to set the page length to 25 or something and scroll down. The problem is an HTML behavior. See this SO Thread. Use href="#/" like this:
  http://live.datatables.net/yuwurozu/1/edit

  Kevin
• sdorman Posts: 6Questions: 1Answers: 0

  February 2022

  I think this link explains the problem/solution

  https://stackoverflow.com/questions/265478/preventdefault-on-an-a-tag

  I originally used the <a href> button to be similar to what I had for edit and delete. But while getting the slideUp/slideDown action working, I must have removed the function that was called when the button was clicked - that function had the e.preventDefault().

  Thanks for all your help Kevin!
• sdorman Posts: 6Questions: 1Answers: 0

  February 2022

  Oddly enough, href="#/" didn't work for me but calling a function on the click that has e.preventDefault() does. I think I'm too worn out now to figure out why Thanks again.
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  February 2022

  Glad its worked out

  Kevin