Column index not changing after using ColVis
Column index not changing after using ColVis
bdunsmuir
Posts: 17Questions: 4Answers: 0
If I hide column 2 using Colvis and then do an ajax refresh, column 3 still has an index of 3, when it should really be 2.
This causes a problem when I format cells based on their column index and content using CreatedRow.
Here is what I use to format the cells:
"createdRow": function ( row ) {
priority_index = oTable.column( 'priority:name' ).index();
hold_index = oTable.column( 'hold:name' ).index();
if (oTable.column(priority_index).data() !=''){$('td', row).eq(priority_index).css({'color':'red','font-weight' : 'bold'});}
if (oTable.column(hold_index).data() !=''){$('td', row).eq(hold_index).css({'color':'seagreen','font-style' : 'italic'});}
},
Although I'm referencing the columns by their names to get the index, datatables is still giving the column the same index it had before any columns were hidden.
Anyone had a similiar issue or know how to resolve this one?
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
When you hide a column it needs to retain its index so it may be restored in the right location.
It seems to me that it is doing as it should. If the priority or hold column is hidden, than any styles you apply to it will be hidden as well.
Can you explain the desired outcome?
When I do an ajax refresh after hiding column (2), the formatting (seen above) for columns 7 and 8 moves one column to the right.
As you look at the table, columns 7 and 8 have now become columns 6 and 7 because I hid column 2. But, the formatting is still going to columns 7 and 8.
When I use ColReorder and drag columns around, the formatting follows and works just fine, even though the columns are not in the same place anymore. I'd like ColVis to be able to do the same thing. I hope that makes sense, and thanks for taking the time to answer my question
I'm including a link to a test case. http://live.datatables.net/idinat/90/edit?js,output
Cells in the Extension column will be red if greater than 5000.
Hide the name column, formatting is still ok.
Click on a row to refresh the table, formatting has now jumped to the Start Date column.
Ah yes, I have been having issues with how ColVis works myself. This is because ColVis is removing the column from the DOM, not simply hiding it. So when you do jQuery eg(3) it puts the styling on the that column.
I have now started using the render option instead of row callback. This method will work with ColVis. Here's an example of formatting my priority column:
{ "name": "priority", "data": "priority", "render": function ( data, type, full, meta ) {
return type === 'display' && data != '' ?
'<span style="color:red; font-weight:bold">'+data+'</span>' : data;
} },
Have you tried .index('visible')
As referenced here:
http://datatables.net/reference/api/column().index()
by passing visible as the first parameter to the method, the returned indexes will be the columns' visible index, which does take into account hidden columns (for example if column 0 is hidden, all following columns would have their visible index shifted by 1).
You found it! Using the visible parameter makes it work. I am glad I learned how to use the render function as well, but I am going to use the row callback method now that it works.
Thanks for the help, I appreciate it.