ajax

ajax

Type: {String|Object}

Default: undefined

Load remote data.

The easiest method is to just pass the url to the remote data (JSON) and the instance will process and insert the data.

let dataTable = new DataTable(myTable, {
    ajax: "some/url/data.json"
});

If you need to manually process the data or you're importing anything other than json then you can also pass an Object with the url, content and load properties:

let dataTable = new DataTable(myTable, {
    ajax: {
        url: "some/url/data.txt", // url to remote data
        content: {
            type: "csv", // specify the content
        },
        load: function(xhr) {
            // process and return the response data
        }
    }
});

---

Under the hood, the ajax option uses the import() method to insert the new data. Thus, the same optional properties that that method takes can also be passed to the content property:

let dataTable = new DataTable(myTable, {
    ajax: {
        url: "some/url/data.txt", // url to remote data
        content: {
            type: "csv", // specify the content,
            headings: true,
            lineDelimiter: "\n",
            columnDelimiter: ","
        }
    }
});

---

The load property should return the formatted response data that the instance can recognise (Object, JSON or CSV). It takes a single argument which is an instance of the XMLHttpRequest object.

If your function returns an Object it should formatted so that the insert() method can use it.

Example

See it in action.

JSON string returned by xhr.responseText:

[
    {
        "Name": "Unity Pugh",
        "Ext.": "9958",
        "City": "Curicó",
        "Start Date": "2005/02/11",
        "Completion": "37%"
    },
    {
        "Name": "Theodore Duran",
        "Ext.": "8971",
        "City": "Dhanbad",
        "Start Date": "1999/04/07",
        "Completion": "97%"
    },
    ...
]

let highlightNumbers = function(xhr) {
    // Parse the JSON string
    let data = JSON.parse(xhr.responseText);

    // Loop over the data and style any columns with numbers
    for ( let i = 0; i < data.length; i++ ) {
        for (let p in data[i]) {
            if ( !isNaN(data[i][p]) ) {
                data[i][p] = "<u style='color:red;'>" + data[i][p] + "</u>"
            }
        } 
    }		
		
    // Return the formatted data	
    return JSON.stringify(data);
}

let dataTable = new DataTable(myTable, {
    ajax: {
        url: "some/url/data.json",
        load: highlightNumbers
    }
});