CODEWITHSUNDEEP
ajaxdatatables
Dean Schulze
Dean Schulze

Reputation: 10303

How do I make an Ajax call with jquery Datatables?

I'm making an AJAX call from jquery Datatables to populate a table. The AJAX call is being made and it returns valid JSON (validated with JSONlint). What happnes is that Datatables creates an empty table before the AJAX call completes and returns data.

I've put the JSON returned by the web service into a file and used that as the sAjaxSource and Datatables populates the table properly, so this is a problem with Datatables not waiting for the AJAX call to complete.

Datatables seems to know that there is some problem with their AJAX calls because the documentation they include showing how to populate a table from an AJAX calls just loads data from a file.

Has anyone gotten Datatables to work with a real AJAX call (not loading JSON from a file)? I'd appreciate any pointers to a Datatables example that works with a real AJAX call.

I can also switch to a different table library. I decided to use Datatables over Jtable but I may have to switch if Datatables doesn't support AJAX.

Here's my code. Feedback on it is appreciated.

<html>
<head>
<link rel="stylesheet" type="text/css"
    href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
</head>
<body>
    <table id="example">
        <thead>
            <tr>
                <th>Serial Number</th>
                <th>Sales Order</th>
                <th>Part Number</th>
                <th>Part Description</th>
                <th>Shipped Date</th>
                <th>Date Sold</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script type="text/javascript" charset="utf8"
        src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" charset="utf8"
        src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>


    <script>
    $(function() {
        $("#example").dataTable({
              "bServerSide": true,
              "sAjaxSource": "/mtprest/Product/productByStatus?status=awaiting",
              "aoColumns": [{
                    "mData":"serialNumber"
                  },{
                    "mData": "sONumber"
                  },{
                    "mData": "partNumber"
                  },{
                    "mData": "desc"
                  },{
                    "mData":"shippedDate"
                  },{
                    "mData":"soldDate"
                  },{
                    "mData":"status"
                  }
                ]                      
            });
    });
    </script>

</body>
</html>

Here's the JSON returned by the web service:

{"iTotalRecords":12,"iTotalDisplayRecords":0,"sEcho":"","aaData":[{"productId":47209009,"serialNumber":"0909090","sONumber":"dev35001484_","partNumber":"987654KP-GL","desc":"TEST MEC","shippedDate":null,"soldDate":null,"status":"Awaiting Validation"}, ...}

Upvotes: 2

Views: 4780

Answers (3)

Israel Gboluwaga
Israel Gboluwaga

Reputation: 144

//Try This

$("#example").dataTable({
              "bServerSide": true,
              "sAjaxSource": "/mtprest/Product/productByStatus?status=awaiting",
              "columns": [{
                    "mData":"serialNumber"
                  },{
                    "data": "sONumber"
                  },{
                    "data": "partNumber"
                  }
                ],
                "columnDef" :  
                   { "targets" : 0, //first row
                     "render" : function (data) {
                                  return data
                                }
                    },
                   { "targets" : 1, //second row
                     "render" : function (data) {
                                  return data
                                }
                    },
                   { "targets" : 2, //third row
                     "render" : function (data) {
                                  return data
                                }
                    }
            });

//Do it for the number of rows you need.

Upvotes: 0

John - Not A Number
John - Not A Number

Reputation: 659

I had lots of problems when I tried using an AjaxSource. I ended up making the web service calls myself, and then passing the returned JSON data into the DataTable when I initialize it.

Upvotes: 1

tondeuter
tondeuter

Reputation: 1

Your JSON says "iTotalDisplayRecords":0

I think it is correct that datatables does not show any row. Have a look at

http://datatables.net/usage/server-side

Upvotes: 0

Related Questions