Question

JSON对象未显示在Jquery Data表中。这是我的示例代码：

function getjQueryTable(){
  $("#jQueryInvoices").dataTable({
      "bServerSide": true,
      "sAjaxSource": "/audit/listinvoice.do?action=getInvoices&carrierId=22&customerId=12096&shipperId=-1&status=Open&invoiceNumber=&toDateStr=&fromDateStr=&controlNumber=&runNumber=&dateCriteria=billDate&glCode=-1",
      "bProcessing": true,
      "sPaginationType": "full_numbers",
      "bJQueryUI": true,
      "aoColumns": [
                  { "mDataProp": "invoiceNumber" },
                  { "mDataProp": "invoiceAmount" },
                  { "mDataProp": "contractNumber" },
                  { "mDataProp": "status" }
              ]
  });
}

我的服务器响应是：

{ "ResultSet":{"aaData":[{"invoiceAmount":92.67,"sumQty":25,"customerId":12096,"contractId":401,"approvedAmount":0,"checkAmount":0,"createDate":"09/15/2013","invoiceId":9715002,"billDate":"09/16/2013",etc..

我的Html代码是：

<div id="demo_jui">
   <table id="jQueryInvoices"  class="display">
   <thead>
     <tr>
       <th>Invoice Number</th>
       <th>Invoice Amount</th>
       <th>Contract Number</th>
       <th>Status</th>
     </tr>
   </thead>
   <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
   </tbody>
   </table>
</div>

Answer 1

   $("#jQueryInvoices").dataTable({
        "bServerSide": true,
       //Use JSON.stringify() function for passing string arguments to Web Service
        "sAjaxSource": "/audit/listinvoice.do?action="+ JSON.stringify('getInvoices') + "&carrierId=22&customerId=12096&shipperId=-1&status=" + JSON.stringify('Open') + "&invoiceNumber=''&toDateStr=''&fromDateStr=''&controlNumber=0&runNumber=0&dateCriteria=" + JSON.stringify('billDate') + "&glCode=-1",
        "bProcessing": true,
        "sPaginationType": "full_numbers",
        "bJQueryUI": true,
        //Add fnServerData Function to display Data..
        "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "type": "GET",
                            "dataType": 'json',
                            "contentType": "application/json; charset=utf-8",
                            "url": sSource,
                            "data": aoData,
                            "success": function (data) {
                                fnCallback(data.d);
                            }
                        });
                    },
        "aoColumns": [
                          { "mDataProp": "invoiceNumber" },
                          { "mDataProp": "invoiceAmount" },
                          { "mDataProp": "contractNumber" },
                          { "mDataProp": "status" }
                      ]
        });

Answer 2

我找到了解决方法，我已将方法更改为

$("#jQueryInvoices").dataTable({
    "bServerSide": true,
    "sAjaxSource": "/audit/listinvoice.do?action=getInvoices&carrierId=22&customerId=12096&shipperId=-1&status=Open&invoiceNumber=&toDateStr=&fromDateStr=&controlNumber=&runNumber=&dateCriteria=billDate&glCode=-1",
    "sAjaxDataProp": "ResultSet.aaData",
            "bProcessing": true,
    "sPaginationType": "full_numbers",
    "bJQueryUI": true,
    "aoColumns": [
                  { "mDataProp": "invoiceNumber" },
                  { "mDataProp": "invoiceAmount" },
                  { "mDataProp": "contractNumber" },
                  { "mDataProp": "status" }
              ]
});

我添加了"sAjaxDataProp": "ResultSet.aaData"，属性并且效果很好。

JSON对象不在Jquery Data表中显示

2 个答案: