table redraws on tab switch

qshng

I have datatables in tabs, but when I'm switching between tabs, the table always redraws. I'm new to javascript and can't quite figure out what is triggering the redraw and how to prevent it. Any suggestions?

kthorngren

Without seeing an example of what you are doing its hard to say. Can you post a link to your page or a test case replicating the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

qshng

Thanks Kevin. My table configuration is a bit complicated, I have uploaded it to the debugger. ibavic. Let me know if this works.

kthorngren

The debugger output is only accessible to the developers. I'm not sure it will show what your code is doing when you switch tabs. If you aren't able to show a test case then maybe you can post the code you execute when switching tabs. Are you using columns.adjust()? If so maybe you have draw() with it.

Does the table draw cause an issue?

Kevin

colin

Yep, you're not kidding about the complication - there's so much going on it's hard to see from the table state information. The best way to progress this is to provide that test case as Kevin suggested, or, as a minimum, link to a page demonstrating the issue.

qshng

Thank you Kevin! I figured out the redraw is caused by .scroller.measure()

My code for tab and collapse switching as below. And it stops deselect and redraw after I removed the scroller.measure()

  $('a[data-toggle="tab"]').on("shown.bs.tab", function(e) {
    $($.fn.dataTable.tables(true))
      .DataTable()
      .scroller.measure()
      .columns.adjust();
  });

  $(document).on("shown.bs.collapse", function(e) {
    $($.fn.dataTable.tables(true))
      .DataTable()
      .scroller.measure()
      .columns.adjust();
  });