Hello DataTables,
I'm seriously impressed with DataTables and all of it's options. Never have I seen a library on datatables so complete and extendable. Loving it!
The reasing I'm posting is because i'm running into a problem that I can't solve, despite hours of debugging.
I'm using the ColVis extension and the saveState stateSaveDT functionality.
If the saveState functionality uses the local storage (HTML5) the ColVis extension works perfectly without problems.
But when I use the stateSaveCallback stateSaveCallbackDT and stateLoadCallback stateLoadCallbackDT to save and load the state server-side into the database something weird happens with the ColVis extension.
The state is loaded and saved correctly into the database with Ajax calls but if a make a column visible again after hiding it it will position the header th correctly but will position the corresponding td of each row at the end of the row in stead of the correct position.
Also the saved visibility of a column is not restored when using the saveState functionality.
I've tried using the latest stable versions and the latest nightly builds, but nothing seems to work. Can you please help me?
<script language="javascript">
$(document).ready(function() {
var owoningbeheerwoningendatatable = $('#woningbeheerwoningendatatable').DataTable( {
'dom': "RC<'clear'><'row'<'col-xs-12 col-sm-6 col-md-6 col-lg-6'Tl>r>t<'row'<'col-xs-3 col-sm-4 col-md-5'i><'col-xs-9 col-sm-8 col-md-7 text-right'p>>",
'processing': true,
'serverSide': true,
'responsive': true,
'stateSave': true,
'ajax': {
'url': '/woningbeheer/datatables/woningenjson'
},
'lengthMenu': [ [ 10, 25, 50, 75, 100, 250, 500, -1 ], [ 10, 25, 50, 75, 100, 250, 500, 'Alles' ] ],
'order': [ [ 1, 'asc' ] ],
'colVis': {
'buttonText': 'Toon / verberg kolommen',
'overlayFade': 0,
'exclude': [ 0 ]
},
'stateSaveCallback': function (settings, data) {
$.ajax({
'url': '/datatables/state/save',
'data': { 'identifier': 'woningbeheerwoningendatatable', 'data': data },
'dataType': 'json',
'method': 'POST'
});
},
'stateLoadCallback': function (settings) {
var o;
$.ajax({
'url': '/datatables/state/load',
'data': { 'identifier': 'woningbeheerwoningendatatable' },
'async': false,
'dataType': 'json',
'method': 'POST',
'success': function (json) {
o = json;
}
});
return o;
},
'stateSaveParams': function (settings, data) {
for (var i = 0; i < data.columns.length; i++) {
data.columns[i].search.search = '';
}
data.search.search = '';
},
'tableTools': {
'sSwfPath': '/metronics/global/swf/copy_cvs_xls_pdf.swf',
'aButtons': []
},
'columns': [
{
'name': 'complexnummer',
'title': 'Complex',
'className': 'string complexnummer tooltips',
'tooltip': 'Het complexnummer van desbetreffende woning.',
'type': 'string',
'orderable': true,
'searchable': true,
'visible': true,
'data': {
'select': 'complex.complexnummer',
'_': 'complexnummer',
'filter': 'complexnummer',
'display': 'complexnummer'
},
},
{
'name': 'vhe_nummer',
'title': 'VHE',
'className': 'string vhe_nummer tooltips',
'tooltip': 'Het VHE nummer van desbetreffende woning.',
'type': 'string',
'orderable': true,
'searchable': true,
'visible': false,
'data': {
'select': 'woning.vhe_nummer',
'_': 'vhe_nummer',
'filter': 'vhe_nummer',
'display': 'vhe_nummer'
},
},
{
'name': 'straat',
'title': 'Straat',
'className': 'string straat tooltips',
'tooltip': 'De straatnaam van de woning.',
'type': 'string',
'orderable': true,
'searchable': true,
'visible': true,
'data': {
'select': 'woning.straat',
'_': 'straat',
'filter': 'straat',
'display': 'straat'
},
},
{
'name': 'huisnummer',
'title': 'Huisnr',
'className': 'integer huisnummer tooltips',
'tooltip': 'Het huisnummer van desbetreffende woning.',
'type': 'integer',
'orderable': true,
'searchable': true,
'visible': true,
'data': {
'select': 'woning.huisnummer',
'_': 'huisnummer',
'filter': 'huisnummer',
'display': 'huisnummer'
},
},
{
'name': 'toevoeging',
'title': 'Toev',
'className': 'string toevoeging tooltips',
'tooltip': 'De toevoeging aan het huisnummer van het adres van desbetreffende woning.',
'type': 'string',
'orderable': true,
'searchable': true,
'visible': true,
'data': {
'select': 'woning.toevoeging',
'_': 'toevoeging',
'filter': 'toevoeging',
'display': 'toevoeging'
},
},
{
'name': 'postcode',
'title': 'Postcode',
'className': 'string postcode tooltips',
'tooltip': 'De postcode van het adres.',
'type': 'string',
'orderable': true,
'searchable': true,
'visible': true,
'data': {
'select': 'woning.postcode',
'_': 'postcode',
'filter': 'postcode',
'display': 'postcode'
},
}
]
});
});
</script>