Answers

• minifiredragon Posts: 82Questions: 16Answers: 2

  September 7

  UPDATE:

  While I was writing the section above, it occurred to me I never tried the table by itself (ending sentence). So, I have removed the 2nd table from the page and the ColReorder works correctly. So is this a bug or I can only use ColReorder with 1 table on the page?
• kthorngren Posts: 21,342Questions: 26Answers: 4,954

  September 7 edited September 7

  Your test case is generating this error in the browser's console:

  Uncaught Cannot extend unknown button type: columnsToggle

  The reason is you haven't loaded Column Visibility. The easiest way to get all the libraries needed is to use the Download Builder.

  When you say new number order I'm guessing you mean the output of this:

  table.on('columns-reordered', function (e, settings, details) {
    console.log('Columns have been reordered');
    console.log(table.colReorder.order());
  });
  

  And not the index column order.

  https://live.datatables.net/kunikepu/4/edit

  The updated test case seems to be working properly. Take a look and if its showing the error you are referring to please provide the exact steps to replicatie. If not then try to update it to show the issue.

  Kevin
• minifiredragon Posts: 82Questions: 16Answers: 2

  September 7 edited September 7

  The problem occurs when there are 2 tables loaded. It works fine with 1 table.

  https://live.datatables.net/kunikepu/7/
• kthorngren Posts: 21,342Questions: 26Answers: 4,954

  September 7

  The problem is that you are overwriting the table variable of the first table with the API of the second table. See the updated example:
  https://live.datatables.net/loqageva/1/edit

  Kevin
• minifiredragon Posts: 82Questions: 16Answers: 2

  September 7 edited September 7

  @kthorngren Ok. I thought I might be doing that, but when I changed the output in both tables to output something different for each table, it came up with the different outputs. So I assumed there would not be an issue keeping ColReorder seperate internally as well.

  I will keep that in mind in the future.

  https://live.datatables.net/kunikepu/8/ (just to show the 2 different outputs on 2 different tables, keeping my original 2 tables setting)
• kthorngren Posts: 21,342Questions: 26Answers: 4,954

  September 7 Answer ✓

  just to show the 2 different outputs on 2 different tables, keeping my original 2 tables setting

  Just to be clear are you still asking about this or did my example resolve your issue?

  Kevin
• minifiredragon Posts: 82Questions: 16Answers: 2

  September 7

  @kthorngren Just making sure there is no underlying issue. Trying to wrap my head around why I get 2 different table orders with 2 separate tables the way I had laid it out, where if I had over written the tables API I should be getting the same answer from both tables.
• kthorngren Posts: 21,342Questions: 26Answers: 4,954

  September 7 edited September 7

  You initialize the first Datatable then execute this code:

  var table = $('#example').DataTable();
  
  table.on('columns-reordered', function (e, settings, details) {
    console.log('Columns have been reordered');
    console.log(table.colReorder.order());
  });
  

  table has the API for table 1 assigned to it and the event handler for table 1 is created.with table.on().

  Then table 2 is initialized followed by this code:

  var table = $('#example2').DataTable();
  
  table.on('columns-reordered', function (e, settings, details) {
    console.log('Columns have been reordered in table 2');
    console.log(table.colReorder.order());
  });
  

  Now the variable table has an instance of the API for the second table.

  Reordering the first table does execute the event handler for the first table but within the event handler table references the API for table 2:

  var table = $('#example').DataTable();
  
  // Event handler for table 1
  table.on('columns-reordered', function (e, settings, details) {
    console.log('Columns have been reordered');
    console.log(table.colReorder.order());  // `table` is the API reference for table 2
  });
  

  The reason is the code inside the event handler function doesn't execute when its created but only when it fires.

  Does this help?

  Kevin
• kthorngren Posts: 21,342Questions: 26Answers: 4,954

  September 7

  I updated the console.log statements to show this:
  https://live.datatables.net/kunikepu/10/edit

  Kevin
• minifiredragon Posts: 82Questions: 16Answers: 2

  September 8

  @kthorngren Thanks, That last example is more helpful in figuring out where I was going a stray. I am not use to using more then 1 table per page and this will help prevent further oopsies.
• minifiredragon Posts: 82Questions: 16Answers: 2

  September 9

  As a final note (more for myself in the future) the reason I was so lost in this mess was I did not realize I had set the var table = tablename in the main thread. Which of course, would over write itself with the last datatable in the loop.