Question

I’m just trying an example of datatables with query with the following json object…

[{"firstName":"pom",
"lastName":"sdfpom",
"email":null,
"password":"cfe9a43acec0a35f903bc2d646ce8e58b5ef6b67",
"username":"Dave",
 "access":null,
"id":1},
{"firstName":"FirstName",
"lastName":"LastName",
"email":null,
"password":"8d60258ef3ae1b8eae67e9298f15edf5c6e05dfe",
"username":"Username",
"access":null,
"id":2}]

This is returned in the variable data below…

<script>
$(document).ready(function() {
    $.getJSON('userManagement/getAllUsers', function(data) {
            $('#table').dataTable( {
                "sAjaxSource": data
        });
    });
});

    </script>
    <table id="table">
        <thead>
            <tr>
                <th>firstName</th>
                <th>lastName</th>
                <th>email</th>
                <th>password</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1 Data 1</td>
                <td>Row 1 Data 2</td>
                <td>etc</td>
            </tr>
            <tr>
                <td>Row 2 Data 1</td>
                <td>Row 2 Data 2</td>
                <td>etc</td>
            </tr>
        </tbody>
    </table>

Now the JSON seems to be valid, and when I do anything else with it for instance use it within jquery it works fine, but datatables just doesn’t render correctly at all. Is there something wrong with the javascript I’m using?

Answer 1

By default, DataTables will process an array of arrays for its data source: there’s an additional step when it has to deal with array of objects (as in your case). It’s described in this example in the plugin documentation. Basically, what you have to do is to add description of ‘column’ properties (as array):

$('#table').dataTable({
  "aaData": data,
  "aoColumns": [
    { "mData": "firstName" },
    { "mData": "lastName" },
    { "mData": "email" },
    { "mData": "password" },
    { "mData": "username" },
    { "mData": "access" },
    { "mData": "id" }
  ]
});

Here’s fiddle to play with.