Publish data in DataTables-Table plug-in for jQuery

Question

I googled several hours to find a solution for my problem but until now without luck...

I'm using... correction... i would like to use a jQuery datatable plug in ( http://www.datatables.net/ ) for displaying some data.

Following steps were successfully achieved:

Get JSON-data from a *.asmx-service. I even checked if it's valid on http://jsonlint.com/

{"d":{"key":1,"email":"test@test.ch","language":"de","locked":false}}

For debugging purposes i added an alert() tag in my code.

 function LoadTable(businessUnitId) {
        $.ajax({
            url: url + "/GetAccounts",
            data: '{businessUnitId:"' + businessUnitId + '"}',
            contentType: "application/json; charset=utf-8",
            type: "POST",
            dataType: "json",
            cache: false,
            success: function(json) {
                for (var i in json.d) { // displays property name and its value --> works
                    alert(i + ": " + json.d[i]);
                }

                $('#tableAccounts').DataTable({
                    data: json.d, // tried json and json.d
                    columns: [
                        { title: "Test1", data: "key" },
                        { title: "Test2", data: "email" },
                        { title: "Test3", data: "locked" },
                        { title: "Test4", data: "language" }
                    ]
                });
            }
        });
    }

Problem : I'm not able to publish the data in my table. Titles of columns are set but the row with values of the JSON-object is not added. I think the problem could be the assignment of the columns property.

Any help is really appreciated.

TIA, xavier

Answer 1

From the documentation , datatables expects the option data to be either a 2d array or an array of objects.

However you are passing data: json.d , where json.d is a single json object. As you want to use a table, which means you expect more than one item to be displayed at some point, it would make sense for your service to return an array of json objects as in:

{ "d" : [ {"key":1,"email":"test@test.ch","language":"de","locked":false} ] }

If by any reason you only expect a single item to be returned from your service, you could then convert it into an array of a single object passing the data option as data: [json.d] .

I have created this fiddle so you can give it a try.