Jquery Datatables和Jeditable - 数据不显示

Question

我正在使用Jquery DataTables和jEditable。我有一个正确的JSON回应如下：

[{"country_id":"18","country":"Aruba","country_enabled":"1"},{"country_id":"19","country":"Afghanistan","country_enabled":null},{"country_id":"22","country":"Angola","country_enabled":"1"},{"country_id":"23","country":"Anguilla","country_enabled":null},{"country_id":"24","country":"\u00c5land Islands","country_enabled":null},{"country_id":"25","country":"Albania","country_enabled":null},{"country_id":"26","country":"Andorra","country_enabled":null},{"country_id":"27","country":"United Arab Emirates","country_enabled":null},{"country_id":"29","country":"Argentina","country_enabled":null},{"country_id":"30","country":"Armenia","country_enabled":null},{"country_id":"31","country":"American Samoa","country_enabled":null},{"country_id":"32","country":"Antarctica","country_enabled":null},{"country_id":"33","country":"French Southern Territories","country_enabled":null},{"country_id":"34","country":"Antigua and Barbuda","country_enabled":null},{"country_id":"35","country":"Australia","country_enabled":null},{"country_id":"36","country":"Austria","country_enabled":null},{"country_id":"37","country":"Azerbaijan","country_enabled":null},{"country_id":"38","country":"Burundi","country_enabled":null},{"country_id":"39","country":"Belgium","country_enabled":null},{"country_id":"40","country":"Benin","country_enabled":null},{"country_id":"41","country":"Bonaire, Sint Eustatius and Saba","country_enabled":null},{"country_id":"42","country":"Burkina Faso","country_enabled":null},{"country_id":"43","country":"Bangladesh","country_enabled":null},{"country_id":"44","country":"Bulgaria","country_enabled":null},{"country_id":"45","country":"zoo","country_enabled":null},{"country_id":"46","country":"Xylaphone","country_enabled":null}] 

以上是来自Chrome的开发者工具，并从XHR窗口取，因此，我知道响应看起来是正确的和正在接收数据。

这是我的HTML来显示数据：

<div class="content"> 
<div id="pad-wrapper" class="form-page"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <h2>List of Countries</h2> 
     </div> 
     <div class="bs-example"> 
      </br> 
      <form> 
<div align = "left"> 
       <button type="button" class="btn btn-success" onclick="window.location='<?php echo site_url("admin/country_add");?>'"> 
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Country 
       </button> 
       <button type="button" class="btn btn-danger" onclick="window.location='<?php echo site_url("admin/country_delete");?>'"> 
        <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Delete Countries 
       </button> 
      </div> 

      <!-- start table listing --> 
    <table id="myDataTable"> 
    <thead> 
     <tr> 
      <th>country_id</th> 
      <th>country</th> 
      <th>country_enabled</th> 
    </thead> 

    <tbody>   
    </tbody> 

</table> 
<button id="btnAddNewRow">Add</button> 
<button id="btnDeleteRow">Delete</button> 
     </div> 
    </div> 
</div> 

DataTable中出现的观点，但只是说，“载入中...”，并显示过任何数据。

我已将列标题重命名为与我的数据库相同，但仍不显示数据。

有一个在控制台的误差如下：

Answer 1

在通过Ajax提供应具有以下结构，详见ajax选项客户端处理模式的数据。

{ 
    "data": [ 
     // row 1 data source, 
     // row 2 data source, 
     // etc 
    ] 
} 

解决的办法是纠正你的JSON数据，看起来像：

{ 
    "data": [ 
     {"country_id":"18","country":"Aruba","country_enabled":"1"} 
    ] 
} 

替代的解决方案是设置ajax.dataSrc空字符串，表明你正在返回普通数组，见下面的示例代码：

$('#example').dataTable({ 
    "ajax": { 
    "url": "data.json", 
    "dataSrc": "" 
    } 
});