Re display table with new data
Re display table with new data
Glyndwr
Posts: 128Questions: 35Answers: 1
I am changing the input parameters (two dates) to retrieve new data and want to then re display the table with the new data. I have tried "destroy: true" and "retrieve: true".
"retrieve: true" results in no change on button click.
"destroy: true" results in fix columns and scrolling being removed; however, the new data is not displayed.
My code is:
submitHandler: function(attendanceForm) {
showDataTable();
}
function showDataTable() {
//Show DataTable
moment.updateLocale(moment.locale(), { invalidDate: "" })
//Get Attendance Details List
$.ajax({
url : 'AttendanceReportView', // Your Servlet mapping or JSP(not suggested)
data : {
ssAccountLevel : sessionStorage.getItem('ssAccountLevel'),
ssAccountID : sessionStorage.getItem('ssAccountID'),
ssArchived : sessionStorage.getItem('ssArchived'),
startDate : $("#startDate").val(),
endDate : $("#endDate").val(),
},
type : 'POST',
})
.fail (function(jqXHR, textStatus, errorThrown) {
if(jqXHR.responseText.includes('No members')){
$('#ajaxGetUserServletResponse').text('No members.');
}else{
$('#ajaxGetUserServletResponse').text('Error getting report details.');
}
attendanceDetailsTable.clear().draw();
})
.done(function(responseJson1a){
// JSON response to populate the activities table
dataType: "json";
var varColumns = [];
$.each(responseJson1a[0], function(key, value){
//console.log(key);
//console.log(value);
if (key === "Archived"){
varColumns.push({data: key, title: key, defaultContent: "", visible: false,render: $.fn.dataTable.render.moment( 'DD/MM/YYYY' )});
}else{
varColumns.push({data: key, title: key, defaultContent: ""});
}
});
var attendanceDetailsTable = $('#attendanceDetailsTable').DataTable( {
// destroy: true,
retrieve: true,
info: false,
fixedHeader: true,
scrollY: "500px",
scrollX: "100%",
scrollCollapse: true,
paging: false,
fixedColumns: {leftColumns: 2},
pageLength: 30,
dom: 'Bfrtip',
buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
data: responseJson1a,
columns: varColumns,
} );
$('.dataTable').wrap('');
$('.dataTables_scrollHeadInner').css({"width":"100%"});
$('.table').css({"width":"100%"});
attendanceDetailsTable.columns.adjust().draw();
})
}
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
I would recommend using the
destroy()API. Take a look at the seconds example here in case you are also changing the number of columns:https://datatables.net/reference/api/destroy()#Examples
If this doesn't help check the browser's console for errors.
Kevin
You might also want to use
$.fn.dataTable.isDataTable()to make sure a Datatable exists before using thedestroy()API.Kevin
Hi Kevin,
Thanks for your help.
I added:
before:
An the table does not change. I checked that new values were passed through to the ajax call.
Kind regards,
Glyn
Hi Kevin,
I also removed the "destroy: true" and "retrieve: true".
Hi Kevin,
OK, got it. I needed to:
before:
Thank you so much for your help.
Kind regards,
Glyn