Datatable reload

rahulsonawane

I am having one function for filldata() in which I am filling Datatable through ajax call (ajax url http://abc.com/data).
I am trying to reload the datatable on button click using $('#BackTable').DataTable().ajax.reload(); , but its giving error invalid json response as its calling page url , instead of ajax url of datatable (ajax url http://abc.com/data).
Any suggestions???

kthorngren

Maybe post your JS code so we can see what you are doing. Then someone may have some ideas.

Kevin

rahulsonawane

Page url : http://employeeproject/EmployeeList
Datatable url : http://employeeproject/getAllEmployeeAjax/

---

function refreshTable() {
    $('#EmployeeTable').DataTable().clear();
    $('#EmployeeTable').DataTable().ajax.reload();
}

function filltables() {
$.ajax({
type: "GET",
dataType: "json",
url: "http://employeeproject/getAllEmployeeAjax/",
success: function (data) {
var datatableVariable = $('#EmployeeTable').DataTable({
data: data,
paging: false,
bFilter: false,
"scrollY": "440px",
"scrollCollapse": true,
columns: [
{ 'data': 'EmployeeID' },
{ 'data': 'EmployeeName' },
{ 'data': 'Salary', render: $.fn.dataTable.render.number(',', '.', 0, '$ ') }
]
});
}
});

}

Error : DataTables warning: table id=EmployeeTable - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

On calling funtion refresh table , In network traffic I can see call to page url http://employeeproject/EmployeeList instead of Datatable url http://employeeproject/getAllEmployeeAjax/

As its calling page url I get whole page as reponse instead of getting ajax call data.

kthorngren

The problem is that you did not use the ajax option in the Datatables init code. When you use ajax.reload() Datatables doesn't contain an ajax config to reload from. My suggestion would be to use the ajax within the Datatables init code.

Kevin

rahulsonawane

Thank you very much , adding ajax to data table worked as mentioned below :

    $('#EmployeeTable').dataTable({
        "ajax": {
            "url": "http://employeeproject/getAllEmployeeAjax/",
            "dataType": "json",
            "cache": false,
            "dataSrc": ""
        },
        "order": [[1, "asc"]],
        columns: [
                    { 'data': 'EmployeeID' },
                    { 'data': 'EmployeeName' },
                    { 'data': 'Salary', render: $.fn.dataTable.render.number(',', '.', 0, '$ ') }
                ]
    });

Refresh Table :-

$('#EmployeeTable').DataTable().ajax.reload();