Seeking advice on an issue with ColReorder Extention

minifiredragon

TLDR; Downloaded new version to check if it was a bug in an older version of ColReorder (it's not). When ever I move a column to a new location, the number order does not change. I know it is an error on my end, but I am not sure where to look.

End TLDR;

I am having an issue with ColReorder where it is not showing me the new number order after I move a column. I know it is something I must have done to my datatable setup because I went to the live datatables site and recreated (for the most part) the settings I am using for my table generation including an auto generated index in column 0.

The only thing I could not get to work right on the live site is the button extention. It kept throwing an error that I can not figure out how to fix, so I do not know if it is the buttons causing the issue or not. Here is the live table I am messing with:

https://live.datatables.net/kunikepu/2/

As I said before, so far with these settings, the ColReorder works, but on my page (sorry, cannot give access) it does not give me a new order like it does on the live table.

My table has 79 columns I am dealing with, so I do not know if it is because of the sheer numbers. I also do not know what else I could be overlooking.

Aside from not having all of the plugins loaded on the live table that I am using, the only difference between the live table and my table is the column count, and I use columns: [ data:, className:, width:, defaultContent :, render: ] And data that is loaded to the table after the page loads. Currently I have it limited to 10 rows, and the live table has alot more then I am using atm. I have set it up with my table configuration.

The only other thing I can think of (which I am going to check now) is I have 2 datatables loading on the page (each with different names, and each showing the proper data for each table, so I know they are seperate).

minifiredragon

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

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

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

https://live.datatables.net/kunikepu/7/

kthorngren

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

@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

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

@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

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

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

Kevin

minifiredragon

@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

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.