How to read the order of the columns from datatable

v3nky

I am trying to read the visible column names from the table and I am able to do it without any issues. However when I reorder the columns and trying to read the column names and in this case column names are not getting read in the order after Colreorder was applied to table. Please help me how to fix this issue.

colin

There's a couple of methods that you could use - see colReorder.order() and colReorder.transpose(),

Colin

v3nky

Thanks for reply Colin. But I would like to explain more about my question .

I have table as below. Before reorder when read the columns using javascript I get it as A,B,C . However when apply colReorder and then read the columns I get it still as A,B,C irrespective of the order I see in front end . Also Colvis is not getting updated as and when I do reorder columns. Do I need to enable any flag like realtimeupdating for colvis to be updated as and when I switch the columns . Also please advise why I am not able to get the real time column order using javascript .

<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>Something</td>
<td>Something</td>
<td>Something</td>
</tr>
</tbody>
</table>

v3nky

Thanks for the reply Colin. I would like to elaborate my question. I have defined table as mentioned below. So when I read the columns using javascript before reorder I get it as A,B,C and after reorder javascript still reads the columns as A,B,C irrespective of the order I shuffle across. Also I have observed that ColVis is not getting updated with realtime order ,however default value of colvis real time updating is true .

Please advise how to fix this issue.

<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>Something</td>
<td>Something</td>
<td>Something</td>
</tr>
</tbody>
</thead>
</table>

I am using the below js and css .

<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.1/js/buttons.bootstrap.min.js"></script> 
<script src="https://cdn.datatables.net/colreorder/1.5.1/js/colReorder.bootstrap.min.js"></script> 
<script src="https://cdn.datatables.net/buttons/1.4.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.jss"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script> 
<script src="https://cdn.datatables.net/buttons/1.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.1/js/buttons.colVis.min.js"></script>  
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.1/css/buttons.bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-combobox/1.1.8/css/bootstrap-combobox.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-combobox/1.1.8/js/bootstrap-combobox.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.5.0/css/colReorder.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.5.0/js/dataTables.colReorder.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>

colin

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

v3nky

Thank Colin. I have created test case (http://live.datatables.net/yicugeca/1/).

Please check this and advise why colvis is not updating appropriately after colreorder applied.

v3nky

@Colin : I have created test case and still I am awaiting for response .Please look into my issue.

kthorngren

Colin lives in the UK so he probably won't respond until tomorrow

Looks like you are using a very old version of buttons (1.4.1). I would first try the latest version (1.6.1) along with the latest ColReorder (1.5.2). See if that helps. While you are at it I would upgrade to the latest for all Datatables code. You can use the Download Builder to easily get the latest version of all the Datatables code you use.

If it doesn't help then Colin will likely respond tomorrow.

Kevin

v3nky

Thanks Colin. I have created test case live.datatables.net/yicugeca/1/edit. Please check this and advise why the colvis is not getting updated . Also the columns are not getting read in the order which I am expecting after colreorder applied.

v3nky

Thank Colin. I have created test case live.datatables.net/yicugeca/1/edit.

Please check this and advise why colvis is not updating appropriately after colreorder applied.

colin

As Kevin said, the first step would be to use the latest sources - see his link. If that doesn't work, please post an updated test case.

As a note, there's no need to chase, we get to the forum when we can. If you want expedited support, please see our support packages here.

v3nky

Thank you Colin and Kevin. I have updated the test case (http://live.datatables.net/yicugeca/2/edit) with new version of buttons and colreorder . Now the reordering is updating ColVis button .But the ColVis button css is changing and setting the background color of Colvis Button list to White from Blue . Please advise how to control CSS of ColVis button.

kthorngren

The background is blue now. Did you change something?

Kevin

v3nky

Before reorder it is blue but when I switch the columns the color is changing

colin

I just tried it here, and it works OK for me. It would be worth comparing the order of the sources, and seeing if there are any other differences.

Colin

v3nky

Are you using bootstrap 4 ?Could you please try with Bootstrap 3 as in my test case ?

v3nky

@colin I have used 1.5.2 version for button and Colreorder and 1.10.17 for datatables as shown in your test case and then ColVis button is updating after colreorder. However this solved part of my issue. Other issue is When I read the column headers using javascript after colreorder , I see the default order getting displayed . I have updated the test case http://live.datatables.net/kumutace/2/edit . Please Check this once

v3nky

I am able to read the columns in the order after ColReorder applied . Updated the code in test case http://live.datatables.net/kumutace/2/edit . This ticket can be closed.