JSON to HTML table using 'datatable' plugin

Question

I'm trying to generate a HTML data table from the result of a SQL query execution. The resulting data is in JSON format. I'm using the plugin "Datatables" to achieve this. I'm following this example

I don't get an error but the data table is empty. I'm obviously doing something wrong or missing something.

Here's the code excerpt. Could I please get some guidance on to the right path please.

function jsDataPlot(chartProps) {
    // Get the array from the element:
    var graphPropsStore = chartProps;

    // Loop through the array with the jQuery each function:
    $.each(graphPropsStore, function (k, graphPropsStoreProperty) {

        // The makeCall function returns a ajaxObject so the object gets put in var promise
        var dbResAjx = getResultFromSql(k);

        // Now fill the success function in this ajaxObject (could also use .error() or .done() )
        dbResAjx.success(function (response) {
            console.log(response);
            // When success, call the function and use the values out of the array above
            $('#divId').DataTable(response);
        });

        dbResAjx.error(function (response) {
            console.log(response);
        });
    });
}


    function getResultFromSql(paramId) {
// bla bla code
        return $.ajax({
            url: 'runMySqlQuery.php',
            type: 'post',
            data: {// some POST params}
        });
    }

JSON Result

[{"DATE":"2015-12-15","TYPE":"AAA","NAME":"asdasd"},{"DATE":"2015-12-15","TYPE":"BBB","NAME":"dsfsdfsdfsdf"},{"DATE":"2015-12-15","TYPE":"AAA","NAME":"reterter"},{"DATE":"2015-12-15","TYPE":"CCC","NAME":"ertertertert"}]

You can't call the DataTable() function directly with your data. See here for more information on how to set up datatables with AJAX. — Raidri
– Raidri, Commented Feb 24, 2016 at 10:45
#divId is your id of table?, if it is true you have to pass the parameter data $('#divId').DataTable({data : response});. — CMedina
– CMedina, Commented Feb 24, 2016 at 14:21
Thankyou Cmedina. It still doesn't work. I get an index error that points me to look at http://datatables.net/manual/tech-notes/4 — usert4jju7
– usert4jju7, Commented Feb 24, 2016 at 18:23

CMedina · Accepted Answer · 2016-02-24 21:30:27Z

1

OK, in your JSON yu have this. DATE - TYPE - NAME

 [
    {"DATE":"2015-12-15","TYPE":"AAA","NAME":"asdasd"},
    {"DATE":"2015-12-15","TYPE":"BBB","NAME":"dsfsdfsdfsdf"},
    {"DATE":"2015-12-15","TYPE":"AAA","NAME":"reterter"},
    {"DATE":"2015-12-15","TYPE":"CCC","NAME":"ertertertert"}
 ]

then in your JS should define your columns ....

$('#divId').DataTable({
  columns : [
      {data: "DATE"},
      {data: "TYPE"},
      {data: "NAME"}
  ],
    data: response
});

example: https://jsfiddle.net/cmedina/7kfmyw6x/4/

answered Feb 24, 2016 at 21:30

CMedina

4,2824 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JSON to HTML table using 'datatable' plugin

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related