Jquery Datatables 和 Jeditable - 数据未显示
Jquery Datatables and Jeditable - Data is not displaying
我正在使用 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 window,因此,我知道响应看起来是正确的并且正在接收数据。
这里是我的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>
数据表出现在视图中,但只是说,"loading..."并且从未显示任何数据。
我已将列 headers 重命名为与我的数据库相同的名称,但它仍然不显示数据。
控制台报错如下:
在客户端处理模式中,通过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": ""
}
});
我正在使用 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 window,因此,我知道响应看起来是正确的并且正在接收数据。
这里是我的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>
数据表出现在视图中,但只是说,"loading..."并且从未显示任何数据。
我已将列 headers 重命名为与我的数据库相同的名称,但它仍然不显示数据。
控制台报错如下:
在客户端处理模式中,通过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": ""
}
});