javascript - 数据表中未使用数组对象填充数据,出现空白屏幕
问题描述
数据未使用数组对象填充到数据表中,出现空白屏幕。尝试使用以下代码,任何问题请提出
$('#example3').DataTable( {
data:storedJsonData,
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "position" },
{ "data": "salary" },
{ "data": "start_date" },
{ "data": "office" },
{ "data": "extn" }
]
} );
解决方案
未填充数据,因为列标题区分大小写并且必须等于给定数据。
我修复了您的数据和列标题。现在它可以工作并在 DataTable 上显示您的数据。
var storedJsonData = [{
"id": "1",
"name": "abc",
"position": "Accountant",
"office": "Tokyo",
"Age": "63",
"start_date": "2011/07/25",
"salary": "$170,750",
"extn": "2"
},
{
"id": "2",
"name": "def",
"position": "Accountant",
"office": "Tokyo",
"Age": "63",
"start_date": "2011/07/25",
"salary": "$170,750",
"extn": "2"
}
];
$('#example3').DataTable({
data: storedJsonData,
"columns": [{
"data": "id"
},
{
"data": "name"
},
{
"data": "position"
},
{
"data": "salary"
},
{
"data": "start_date"
},
{
"data": "office"
},
{
"data": "extn"
}
]
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" media="screen" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<table id="example3" class="display" style="width:100%">
</table>
推荐阅读
- java - 在 Sub-Fragment 中,当 webview 无法返回时,如何重定向到 Main-Fragment 或 Home-Fragment
- php - 如何在php中从python获取返回值?它不起作用
- javascript - 多个带有数字的变量并将结果再次添加到变量中返回错误的结果
- sql - 在查询的其他地方使用子查询的结果
- c++ - 为什么我们需要 const 方法?
- python - 如何使用 Python 在 Excel 文件名中包含单元格的值?
- reactjs - React Bootstrap Typeahead 子 onclick
- c++ - 安装 Qt 和 MySQL 以编码和连接数据库
- reactjs - styled-components 条件道具在 Material-ui 组件中不起作用
- android - 测试 aws-sdk-android-samples/AndroidPubSub 但连接被拒绝