如何遍历DataTables 2.1中的对象数组

Question

HTML:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/bs-3.3.6/jq-2.2.0,dt-1.10.11/datatables.min.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/t/bs-3.3.6/jq-2.2.0,dt-1.10.11/datatables.min.js"></script> <table id="dTExample" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Account #</th> <th>Customer #</th> <th>Customer Name</th> <th>Location</th> <th>Address</th> <th>Product</th> </tr> </thead> </table>

JS:

function populateData(table) { var aTable; aTable = $(table).dataTable({ sAjaxSource: 'SamplePage.aspx', fnServerData: function (sSource, aoData, fnCallback) { JsonLoader("SamplePage.aspx/GetServiceLookupList", "{'idType': 'an', 'idValue': '123'}", fnCallback); }, columns: [ { data: "billAccountNumber" }, { data: "customerNumber" }, { data: "customerName" }, { data: "serviceLocationName" }, { data: "serviceLocationAddress" }, { data: "serviceComponentProductName" } ] }); }

function JsonLoader(url, data, fnCallback) { $.ajax({ type: "POST", url: url, contentType: "application/json; charset=utf-8", dataType: "json", data: data, success: function (result) { var objAjax = JSON.parse(result.d); fnCallback(objAjax); }, error: function (err, ajaxOptions, thrownError) { //Error } }); }

Returned JSON:

{ "iTotalRecords": 100, "iTotalDisplayRecords": 100, "aaData": [ { "billAccountName": "FAKE CORP", "customerNumber": "123", "customerName": "Fake", "serviceLocationName": "Fake Corp", "serviceLocationAddress": "PO BOX 123 Denver CO", "serviceComponentProductName": "Product X" }, { "billAccountName": "REAL CORP", "customerNumber": "456", "customerName": "Real", "serviceLocationName": "Real Corp", "serviceLocationAddress": "PO BOX 456 Ft Collins CO", "serviceComponentProductName": "Product Z" }, [...] }

So basiclly aaData is an array of 100 objects, each of which has a "billAccountName". When I run my code, the number of records on the table is showing up correctly, but the table is empty. Not sure how to go about iterating all of these objects and mapping their respective field names to the table. Please help.

Answer 1

The JSON which is returned has "iTotalRecords": 100, "iTotalDisplayRecords": 100, which are actually causing problem. Your Json should an array of objects which has a values to entered in the datatable. You can either create a new array and store ["aaData" : [ { "billAccountName": "FAKE CORP", "customerNumber": "123", "customerName": "Fake", "serviceLocationName": "Fake Corp", "serviceLocationAddress": "PO BOX 123 Denver CO", "serviceComponentProductName": "Product X" }, { "billAccountName": "REAL CORP", "customerNumber": "456", "customerName": "Real", "serviceLocationName": "Real Corp", "serviceLocationAddress": "PO BOX 456 Ft Collins CO", "serviceComponentProductName": "Product Z" }, {...},]] or the JSON returned should be like this(strictly in this format):

{"aaData" : [ { "billAccountName": "FAKE CORP", "customerNumber": "123", "customerName": "Fake", "serviceLocationName": "Fake Corp", "serviceLocationAddress": "PO BOX 123 Denver CO", "serviceComponentProductName": "Product X" }, { "billAccountName": "REAL CORP", "customerNumber": "456", "customerName": "Real", "serviceLocationName": "Real Corp", "serviceLocationAddress": "PO BOX 456 Ft Collins CO", "serviceComponentProductName": "Product Z" }]}