我在这里使用示例:https://datatables.net/examples/styling/jqueryUI.html
下面是我的 html 和 jquery 代码
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-dataTables.css">
<script type="text/javascript" charset="utf8" src="jquery-min.js"></script>
<script type="text/javascript" charset="utf8" src="jquery-dataTables.js"></script>
<script>
$(document).ready(function() {
$('#example').dataTable( {
"ajax": "data/test.txt",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</body>
</html>
这是我的文件的结构
但是无法将数据加载到数据表中,有人可以帮忙吗?
编辑(附上我的测试数据):该数据用于</p>
“数据”:[
{
“名称”:“老虎尼克松”,
"position": "系统架构师",
"工资": "$320,800",
"开始日期": "2011/04/25",
“办公室”:“爱丁堡”,
“扩展”:“5421”
},
{
“名称”:“加勒特·温特斯”,
"职位": "会计师",
"工资": "$170,750",
"开始日期": "2011/07/25",
“办公室”:“东京”,
“扩展”:“8422”
},
{
“姓名”:“阿什顿·考克斯”,
"position": "初级技术作者",
“工资”:“$86,000”,
“开始日期”:“2009/01/12”,
“办公室”:“旧金山”,
“扩展”:“1562”
},
{
“姓名”:“塞德里克·凯利”,
"position": "高级 Javascript 开发人员",
"工资": "$433,060",
"开始日期": "2012/03/29",
“办公室”:“爱丁堡”,
“扩展”:“6224”
},
{
“姓名”:“卡拉·史蒂文斯”,
"position": "销售助理",
"工资": "145,600 美元",
"开始日期": "2011/12/06",
“办公室”:“纽约”,
“扩展”:“3990”
},
{
“名称”:“唐娜·斯奈德”,
"position": "客户支持",
“工资”:“112,000 美元”,
"开始日期": "2011/01/25",
“办公室”:“纽约”,
“扩展”:“4226”
}
]
谢谢
最佳答案
我假设您使用了 Datatables ajax simple example 中的示例 test.txt
文件,但将列定义为 this example 。问题是 test.txt
文件没有您的数据表所期望的列。所以有两种方法可以修复它:
不要在数据表中定义列
$(document).ready(function() {
$('#example').dataTable( {
"ajax": "data/test.txt"
} );
} );
或者更改您的 test.txt
文件以匹配列,例如:
"data": [
{
"name": "Airi",
"position": "Accountant",
"office": "Tokyo",
"extn": "...",
"start_date": "28th Nov 08",
"salary": "$162,700"
},...
关于jquery - 无法使用 jquery datatable 通过 ajax 从文件中获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31067259/