Having issues hiding columns dynamically using aoColumnDefs with a string value.
Having issues hiding columns dynamically using aoColumnDefs with a string value.
anotherface
Posts: 2Questions: 0Answers: 0
I have been having issues getting my table to initialize with the proper columns hidden by default using datatables 1.9.2 and the colVis plugin. please see initialization information below:
[code]
var oTable = $('#resultsTable').dataTable({
"aaSorting": [[1, 'asc']],
"bJQueryUI": true,
"bPaginate": true,
"bInfo": true,
"bAutoWidth": false,
"bLengthChange": true,
"bSortClasses": false,
"iDisplayLength": 25,
"sDom": 'C<"H"fr>t<"F"ip>',
"aoColumnDefs": [{ "bSortable": false, "aTargets": [0]},
/* col5*/{"bVisible": false, "aTargets": ["Category"]},
/* col6*/{"bVisible": false, "aTargets":["Description"]},
/* col7 */{"bVisible": false, "aTargets":["Type"]},
/* col8*/{"bVisible": false, "aTargets":["Kind"]},
/* col9 */{"bVisible": false, "aTargets":["Dish PN Ref"]},
/* col10*/{"bVisible": false, "aTargets":["Color"]}
],
"oColVis": {
"aiExclude": [0],
"buttonText": " ",
"bRestore": true,
"sAlign": "left"}
});
[/code]
Initially I had success using aoColumns and using the indexs ([0], [1], etc) to set the bVisible property, but my problem is that depending on the user's category and list selection made on a page prior to display the table, the number of columns in the table can change so the script was crashing due to the array being under or over sized depending on the table type. I know that it is possible to use the aoColumnDefs options to target columns based on the string value of that columns header but I have been unable to get them to hide on page load like I would like. Any help you could provide would be greatly appreciated. I have also used the bookmarklet to upload the debug data and can provide the string if needed .
[code]
var oTable = $('#resultsTable').dataTable({
"aaSorting": [[1, 'asc']],
"bJQueryUI": true,
"bPaginate": true,
"bInfo": true,
"bAutoWidth": false,
"bLengthChange": true,
"bSortClasses": false,
"iDisplayLength": 25,
"sDom": 'C<"H"fr>t<"F"ip>',
"aoColumnDefs": [{ "bSortable": false, "aTargets": [0]},
/* col5*/{"bVisible": false, "aTargets": ["Category"]},
/* col6*/{"bVisible": false, "aTargets":["Description"]},
/* col7 */{"bVisible": false, "aTargets":["Type"]},
/* col8*/{"bVisible": false, "aTargets":["Kind"]},
/* col9 */{"bVisible": false, "aTargets":["Dish PN Ref"]},
/* col10*/{"bVisible": false, "aTargets":["Color"]}
],
"oColVis": {
"aiExclude": [0],
"buttonText": " ",
"bRestore": true,
"sAlign": "left"}
});
[/code]
Initially I had success using aoColumns and using the indexs ([0], [1], etc) to set the bVisible property, but my problem is that depending on the user's category and list selection made on a page prior to display the table, the number of columns in the table can change so the script was crashing due to the array being under or over sized depending on the table type. I know that it is possible to use the aoColumnDefs options to target columns based on the string value of that columns header but I have been unable to get them to hide on page load like I would like. Any help you could provide would be greatly appreciated. I have also used the bookmarklet to upload the debug data and can provide the string if needed .
This discussion has been closed.
Replies