Binding DataTables with data from service

Question

I can bind statically with DataTables.net like below:

        <script type="text/javascript">

        $(document).ready(function () {
            $('#testDatatable').dataTable({

            "aaData": [
                ["Ibrahim", 55],
                ["Asif", 20],
                ["Shariful", 70],
                ["John", 55],
                ["Doe", 40],
                ["Nazmul", 30],
                ["Jane", 15],
                ["Ershad", 10],
                ["Yusuf", 44],
                ["Bill", 22],
                ["Steve", 18]
            ]
                ,
            "aoColumns": [
                { "sTitle": "Name" },
                { "sTitle": "Age" }
                ]

            });

        });

    </script>

But for prop aaData I want to fetch the data from a web service. Like below:

        <script type="text/javascript">

        $(document).ready(function () {
            $('#testDatatable').dataTable({

                "aaData": $.getJSON('http://localhost:9183/Service.svc/GetCustomer')
                ,
            "aoColumns": [
                { "sTitle": "Name" },
                { "sTitle": "Age" }
                ]

            });
        });

    </script>

My service looks like this:

    [OperationContract]
    [WebGet(ResponseFormat = WebMessageFormat.Json)]
    public List<Customer> GetCustomer()
    {
        List<Customer> customers = new List<Customer>();
        customers.Add(new Customer { Name = "Ibrahim", Age = 10 });
        customers.Add(new Customer { Name = "John Doe", Age = 20});
        return customers;
    }

This does not work. It shows that no records were found. Someone please tell me what options do I have or where I am going wrong. Any suggestion is highly appreciated.

`[WebGet(ResponseFormat = WebMessageFormat.Json)]` should return the list as JSON then why should I explicitly return the data as JSON string? — lbrahim, Apr 21 '13 at 10:32
but without JSON string you cannot get individual element/property such as id,name etc... i suppose you should read the documentation carefully — rafi, Apr 21 '13 at 10:52
There is no documentation the service is my own as well as the client. The data is being returned to me as JSON or I can strip it to JSON only. But DataTables is not responding to the datasource I bind. Which is the problem. — lbrahim, Apr 21 '13 at 11:15

cfs · Accepted Answer · 2013-04-23T14:26:16.947

3

Your webservice is returning an array of objects, by default datatables expects an array of arrays. You have two options, either updated your webservice, or change your datatables configurations to use the mData property to reference properties by name:

aoColumns": [
    { "sTitle": "Name", "mData": "Name" },
    { "sTitle": "Age", "mData": "Age" }
]

You can find more info about mData at the datatables reference page. Just search for mdata.

edited Apr 23 '13 at 14:26

answered Apr 23 '13 at 14:18

cfs

10,610
3
30
43

Thanks. But I was finally able to figure it out using their sAjaxSource. – lbrahim Apr 24 '13 at 07:33

lbrahim · Answer 2 · 2013-04-22T12:29:09.030

So, I finally could bind Datatable with my web service call. It is a bit of a roundabout approach but at least binding it which was my primary objective is solved. I get the data from my service, run a loop where I format the JSON to Datatable accepted format JS Array and set "aaData" to the formatted JS Array:

$(document).ready(function () {

            var returnData;
            $.ajax({
                url: "http://localhost:9183/Service.svc/GetCustomer",
                async: false,
                dataType: 'json',
                success: function (data) {
                    returnData = data;
                }
            });

            var arrayReturn = [], results = returnData;
            for (var i = 0, len = results.length; i < len; i++) {
                var result = results[i];
                arrayReturn.push([ result.Age, result.Name]);
            }

            $('#testDatatable').dataTable({

                "aaData": arrayReturn,
                "aoColumns": [
                { "sTitle": "Name" },
                { "sTitle": "Age" }
                ]

            });

        });

I didn't have to change anything in the service. But I still don't know why my first attempt above wouldn't work and what better alternative do I have to my way. So feel free to speculate on this. Thanks to people who at least tried to help.

score 0 · Answer 3 · edited May 23 '17 at 12:00

0

I think you can convert your list on the server side to JSON and return it. See this and this for simple examples.

Sure there are other examples available on SO as well.

edited May 23 '17 at 12:00

Community

1
1

answered Apr 21 '13 at 10:22

evgenyl

7,837
2
27
32

Why do I need to explicitly return JSON? Does not `[WebGet(ResponseFormat = WebMessageFormat.Json)]` already converts my list to JSON are returns? – lbrahim Apr 21 '13 at 10:49
I did not say you have, I said you can :) – evgenyl Apr 21 '13 at 10:51
Ok. But is that the problem? Because I can get the data at client but binding with DataTables is the problem. – lbrahim Apr 21 '13 at 11:16

Binding DataTables with data from service

3 Answers3