Loading JSON into data tables

Question

I have a Web API built with ASP.NET MVC. The results of hitting that API look something like this:

{
  "RequestID":1,
  "Options": [
    {"Id":"A", "Name":"Alpha"},
    {"Id":"B", "Name":"Bravo"}
  ],
  "Responses":[
    {"Id":123, "Name":"Test 1", "Description":"This is the first response"},
    {"Id":222, "Name":"Test 2", "Description":"This is the second response"},
    {"Id":333, "Name":"Test 3", "Description":"This is the third response"},
  ]
}

I want to load the response of the Web API into a data table using the DataTables plugin. In an attempt to do this, I have the following:

<head>
  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
</head>
<body>
    <table id="properties" class="table table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th class="sortable">Name</th>
                <th>Description</th>
            </tr>
        </thead>
    </table>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#properties').dataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    'url':'/api/Search?query=Test'
                }
            });
        });
    </script>
</body>

I based the implementation off of the example found here. My problem is, it doesn't work. Its like the data table doesn't know to use the Responses property as the data set for the data table. However, I can't figure out how to set that.

Does someone know how I can load the objects in the Responses array into the data table?

Thank you!

Ben · Accepted Answer · 2014-12-09 22:33:20Z

1

In order for DataTables to display your data, it must be formatted in a way that DataTables can understand. See http://datatables.net/manual/server-side for the reference. Look under the heading Returned data.

Specifically, your JSON needs to put the data under a parameter called data (instead of Responses).

You also need to include the draw, recordsTotal,and recordsFildered parameters.

If you are not able to modify your web API to suit the DataTables format, you would need to use another approach. Two that come to mind are either writing an intermediary service that translates the output of the web API into the right format for DataTables, or using JavaScript to manually read the output of the web API and insert the rows into your table.

answered Dec 9, 2014 at 22:33

Ben

1522 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

harshes53 · Accepted Answer · 2014-12-09 19:23:32Z

0

Can you try this:

Since, cannot access your API, I could't verify the below. But it should work fine.

<script type="text/javascript">
    $(document).ready(function () {
        $('#properties').dataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {
                'url':'/api/Search?query=Test',
                "dataSrc": "Responses"
            }
        });
    });
</script>

Thanks!

answered Dec 9, 2014 at 19:23

harshes53

4291 gold badge7 silver badges17 bronze badges

Collectives™ on Stack Overflow

Loading JSON into data tables

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related