Use settings objects to re-initialize table with different column order (inter columns sort)
Use settings objects to re-initialize table with different column order (inter columns sort)
BahaDurma
Posts: 3Questions: 1Answers: 0
Hello,
I have to use rowspan headers, so colReorder does not work for me. So I thought to myself, what if I create several different objects that have different column ordering and on the click of a button, I'd destroy the first table, then init with a different setting object.
It worked, to a degree... It behaves erratically, probably because I'm doing something stupid.
var set1 = {
//rowReorder: true,
//colReorder: true, /*{ fixedColumnsLeft: 7 },*/
fixedHeader: true,
//orderCellsTop: true,
//dom: 'Bfrtip',
buttons: [
{
extend: 'copyHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csvHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excelHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'columnToggle',
text: 'Volume',
columns: [7, 8, 9],
},
{
extend: 'columnToggle',
text: 'Share of Volume (%)',
columns: [10, 11, 12],
},
{
extend: 'columnToggle',
text: 'Revenue',
columns: [13, 14, 15],
},
{
extend: 'columnToggle',
text: 'Share of Revenue (%)',
columns: [16, 17, 18],
},
{
extend: 'columnToggle',
text: 'Profit',
columns: [19, 20, 21],
},
{
extend: 'columnToggle',
text: 'Transaction',
columns: [22, 23, 24],
},
{
extend: 'columnToggle',
text: 'Share of Transaction (%)',
columns: [25, 26, 27],
},
{
extend: 'columnToggle',
text: 'Show all',
columns: ':gt(6)'
}
],
"columns": [
{ data: 0 },
{ data: 1 },
{ data: 2 },
{ data: 3 },
{ data: 4 },
{ data: 5 },
{ data: 6 },
{ data: 7 },
{ data: 8 },
{ data: 9 },
{ data: 10 },
{ data: 11 },
{ data: 12 },
{ data: 13 },
{ data: 14 },
{ data: 15 },
{ data: 16 },
{ data: 17 },
{ data: 18 },
{ data: 19 },
{ data: 20 },
{ data: 21 },
{ data: 22 },
{ data: 23 },
{ data: 24 },
{ data: 25 },
{ data: 26 },
{ data: 27 }
],
};
var set2 = {
//rowReorder: true,
//colReorder: true, /*{ fixedColumnsLeft: 7 },*/
fixedHeader: true,
//orderCellsTop: true,
//dom: 'Bfrtip',
buttons: [
{
extend: 'copyHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csvHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excelHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'columnToggle',
text: 'Volume',
columns: [7, 8, 9],
},
{
extend: 'columnToggle',
text: 'Share of Volume (%)',
columns: [10, 11, 12],
},
{
extend: 'columnToggle',
text: 'Revenue',
columns: [13, 14, 15],
},
{
extend: 'columnToggle',
text: 'Share of Revenue (%)',
columns: [16, 17, 18],
},
{
extend: 'columnToggle',
text: 'Profit',
columns: [19, 20, 21],
},
{
extend: 'columnToggle',
text: 'Transaction',
columns: [22, 23, 24],
},
{
extend: 'columnToggle',
text:`` 'Share of Transaction (%)',
columns: [25, 26, 27],
},
{
extend: 'columnToggle',
text: 'Show all',
columns: ':gt(6)'
}
],
"columns": [
{ data: 0 },
{ data: 11 },
{ data: 12 },
{ data: 13 },
{ data: 14 },
{ data: 15 },
{ data: 16 },
{ data: 17 },
{ data: 18 },
{ data: 19 },
{ data: 20 },
{ data: 1 },
{ data: 2 },
{ data: 3 },
{ data: 4 },
{ data: 5 },
{ data: 6 },
{ data: 7 },
{ data: 8 },
{ data: 9 },
{ data: 10 },
{ data: 21 },
{ data: 22 },
{ data: 23 },
{ data: 24 },
{ data: 25 },
{ data: 26 },
{ data: 27 }
],
};
I initialize the table with
$('#myTable').DataTable(set1);
and try to use the second set with
function mychange() {
$("#myTable").DataTable().destroy()
$('#myTable').DataTable(set2);
}
The first click of the button works as expected, but re-clicking it toggles it back to the initial ordering.
What do you think is wrong, am I using the columns: data constructor wrong, is there another way of accomplishing what I'm trying to do ?
Answers
Hi @BahaDurma ,
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Hi @colin ,
Here's a live version of it.
The first click on "click here" works as expected, but repetitive clicks are behaving weird. I'd really appreciate if someone can point me what I'm doing wrong.
http://live.datatables.net/ferokula/1/edit
Looks like everything is working correctly but it may not behave they way you are expecting. When you reinitialize with set2 it reverses the HTML based table. When you click the "click here" again it reverses the table again with set2. The original HTML table is not in the HTML at this point. You can see this with this updated example:
http://live.datatables.net/gesocapa/1/edit
I added a second
$('#example').DataTable().destroy();to yourmySet2()function. You can see after the table is destroyed the HTML table is the reverse of the original.I'm not sure how to solve your problem. It would depend on exactly what you want. You will need some code to keep track of the current column order then when clicking a button to change the order to properly remap the columns based on the current order instead of the original order.
Kevin
Ah, that's what I've been missing. I simply didn't realize that we're actually changing the table object itself, I kept thinking that we're working on a copy of that table.
I should be able to store a copy of the original table object and first restore that in my function and then apply the second settings.
Thanks @kthorngren