CODEWITHSUNDEEP
javascriptajaxdatatableshttp-status-code-400
Ramesh Pareek
Ramesh Pareek

Reputation: 1669

Datatables not rendering ajax sourced json data

While trying to render a datatable with ajax sourced data, I get a

400 bad request

as ajax response.

The Json I get from the ajax call is as below which is happily validated by Jsonlint

{
    "data": {
        "title": "Seminar",
        "pdate": "2016-02-05",
        "duedate": "2016-03-04"
    }
}

I am using the following javascript suggested by datatables for rendering ajax sourced data ;

$('#table1').DataTable({
    ajax: {
        url: '?r=site/test',
        type: 'POST',
        dataSrc: 'data'
    },
    columns: [
        { data: 'title' },
        { data: 'pdate' },
        { data: 'duedate' }
    ]
});

Here is the fiddle. 

$b = [
'title'=>  "Seminar",
'pdate'=>  "2016-02-05",
'duedate' => "2016-03-04"

];

$a['data'][] = $b;
echo json_encode($a);

What's wrong ?

Upvotes: 0

Views: 1771

Answers (1)

Andreas
Andreas

Reputation: 21881

data has to be an array of "rows"

From the documentation:

The main data source used for a DataTable must always be an array (it is created automatically when using DOM sourced data). Each item in that array will define a row to be displayed and DataTables can use three basic Javascript data types as the data source for the rows

  • Arrays - []
  • Objects - {}
  • Instances - new MyClass()

Hence the returned data from ?r=site/test has to be

{
    "data": [{
        "title": "Seminar",
        "pdate": "2016-02-05",
        "duedate": "2016-03-04"
    }]
}

fiddle

Upvotes: 1

Related Questions