Re display table with new data

Glyndwr

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();
})

}

kthorngren

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

kthorngren

You might also want to use $.fn.dataTable.isDataTable() to make sure a Datatable exists before using the destroy() API.

Kevin

Glyndwr

Hi Kevin,

Thanks for your help.

I added:

    if ( $.fn.dataTable.isDataTable( '#attendanceDetailsTable' ) ) {
        attendanceDetailsTable.destroy();
        $('#attendanceDetailsTable').empty(); // empty in case the columns change
    }

before:

var attendanceDetailsTable = $('#attendanceDetailsTable').DataTable( {

An the table does not change. I checked that new values were passed through to the ajax call.

Kind regards,
Glyn

Glyndwr

Hi Kevin,

I also removed the "destroy: true" and "retrieve: true".

Glyndwr

Hi Kevin,

OK, got it. I needed to:

var attendanceDetailsTable = $('#myTable').DataTable();

before:

$("#attendanceForm").validate({
    //debug: true,

    rules: {
        startDate: {
            required: true
        },
        endDate: {
            required: true
        },
    },
    submitHandler: function(attendanceForm) {
        showDataTable();
    }
});

Thank you so much for your help.

Kind regards,
Glyn