My issue comes from the server-side pagination.
Once new data has been injected by ajax source, I need to draw again the table to get the reading fixed because I don't use multiple line per cell. So new contents may be shorter then previous, or longer and the overflow goes on the background than the following cell. It's fine for me, so I just need to redraw using a button that act like a kind of refresh for the table structure:
{ text: 'Refresh', action: function () { table.columns.adjust().draw(); } }
This is just a kind of workaround and it's working, I'm looking for adding this behaviour to the ajax response got from DataTable and I am not able.
If I handle the fnDrawCallback I got infinite refresh that stucks on my web client page, of course it's not a good solution.
By the way, a problem of the main workaround is with the pagination because the button that act like a refresh for the structure of the table brings me back to the first page. If I'm reading contents from the n-th page and I just need to "refresh" tha table I don't get refreshed my current view, so actually there is no way to "refresh" structure for pages that are not the first.
This is my table definition:
table = $("#" + table_name).DataTable({
"processing": true,
"serverSide": true,
"scrollY": '50vh',
"scrollX": true,
"scrollCollapse": true,
"autoWidth": true,
"columnDefs": [
{ "targets": "all", "defaultContent": "-" },
{ "targets": [4,5,6], "createdCell": function (td, cellData, rowData, row, col) {
if ( cellData == 1 ) {
$(td).addClass('compliant');
} else if ( cellData == 0 ) {
$(td).addClass('noncompliant');
}
} },
{ "targets": 3, "createdCell": function (td, cellData, rowData, row, col) {
if ( cellData == 1 ) {
$(td).parent().addClass('top54');
}
} }
],
"columns": [
{ "data": "foo", "className": 'details-control'},
{ "data": "bar" },
{ "data": "bar" },
{ "data": "RowNum", "orderable": false, "visible": false }
],
"ajax": {
"url": "json/ricerca_bdt_ng.php",
"method": "POST",
"data": function (d) {
d.user = account;
d.pass = password;
d.user_ad = account_ad;
d.pass_ad = password_ad;
d.device = deviceid;
d.host = dbhost;
d.port = dbport;
d.db = dbname;
}
},
"language": {
"lengthMenu": "Display _MENU records per page",
"zeroRecords": "Nothing found - sorry",
//"info": "Showing page PAGE of PAGES",
"infoEmpty": "No records available",
//"infoFiltered": "(filtered from MAX total records)",
"processing": "
",
"searchPlaceholder": "Global"
},
// Enable datatables.mark.js highlighting
"mark": true,
//"select": true,
"select": {
style: 'os',
items: 'cell'
},
"dom": "<'fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br'Blf>rt<'fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br'ip><'clear'>",
"buttons": [
{ extend: 'excelHtml5', title: exportfile },
{ extend: 'selectedSingle',
text: 'Copia cella',
action: function ( e, dt, node, config ) {
var sdata = table.cell('.selected').data();
copyToClipboard(sdata);
}
},
{ text: 'Refresh', action: function () { table.columns.adjust().draw(); } }
]
/*"fnDrawCallback": function( oSettings ) {
console.log( 'DataTables has redrawn the table' );
table.ajax.reload();
}*/
});
// fix input placeholder width
table.columns.adjust().draw();
//table.ajax.reload();
This is part of the css I'm using with the table:
/* fix table scrolling out his div /
table{
margin: 0 auto;
width: 100%;
clear: both;
border-collapse: collapse;
table-layout: fixed;
/word-wrap: break-word;*/
min-width: 100%;
}
th, td { white-space: nowrap; overflow: hidden; }
/th, td { white-space: normal; }/
/* dimensionamento tabella /
/ th { word-break: normal; }
td { word-break: break-all; } */
td.accapo { word-break: normal; }
div.dataTables_wrapper {
width: 95%;
margin: 0 auto;
}
div.dataTables_wrapper div.dataTables_processing {
top: 5%;
}
div.row_details {
width: 950px;
padding: 20px;
}
/* Floating column for labels: 25% width */
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
/* Floating column for inputs: 75% width */
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
I'm sorry I am not able to make a working example, I will make treasure of every advice you give me.