CODEWITHSUNDEEP
jqueryjsondatatables
David
David

Reputation: 20063

jQuery datatables parsing json incorrectly

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?

Upvotes: 1

Views: 3825

Answers (4)

Waqar
Waqar

Reputation: 426

$.ajax( {
          "dataType": 'json',
          "type": "POST",
          "url": sSource,
          "data": aoData,
          contentType: "application/json; charset=utf-8",
          async : false,
          success: function (json) { 
            fnCallback(json);
          },
          complete: function (msg,a,b) {
            console.log('complete :'+msg) 
          },
          error : function(msg,a,b) {
            console.log('error:'+msg);
          }
        } );

The async : false is very important. This will cause not to render the page until the json data is bounded properly.

This worked for me.

Upvotes: 1

Arjun
Arjun

Reputation: 21

first of all check if your json is valid or not use www.jsonlint.com for the purpose.

Secondly Try to enclose your JSON object with aaData like:

{"aaData" :[{"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}] 
}

Upvotes: 0

raina77ow
raina77ow

Reputation: 106385

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.

Upvotes: 5

Sushanth --
Sushanth --

Reputation: 55740

Your json is an object inside an array..

So instead of this

"sAjaxSource": data

Try this

"sAjaxSource": data[0]

Upvotes: 1

Related Questions