【发布时间】：2015-08-18 12:13:56
【问题描述】：
我的 html 中有一个表格（数据表）；
<table id="datatable-table" class="table table-striped table-hover">
<thead>
<tr>
<th>Id</th>
<th>Band Name</th>
<th>Members</th>
<th>Bio</th>
<th>Song List</th>
</tr>
</thead>
</table>
我在脚本标签中有一些 JQuery，其中包含有关如何获取 JSON 数据来填充它的信息；
<script>
$(document).ready(function() {
$.ajax({
url: 'bands',
type: 'GET',
dataType: 'json',
success: function(data) {
$('#datatable-table').dataTable({
"sAjaxDataProp": "",
"bProcessing": true,
"aaData": data,
"aoColumnDefs": [
{ "mData": "id"},
{ "mData": "bandname"},
{ "mData": "members"},
{ "mData": "bio"},
{ "mData": "songlist"}
]
});
},
error: function() { console.log('error retrieving customers'); }
});
});
</script>
当我运行这个时，我得到一个错误；
DataTables 警告：表 id=datatable-table - 无法重新初始化 数据表。有关此错误的更多信息，请参阅 http://datatables.net/tn/3
有什么想法吗？ :-)
* 编辑 *
我正在使用我得到的主题，但我看不到表已经初始化的位置？
这是完整的代码；
<!DOCTYPE html>
<html>
<head>
<title>bandsly</title>
<link href="css/application.css" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<meta charset="utf-8">
<script>
/* yeah we need this empty stylesheet here. It's cool chrome & chromium fix
chrome fix https://code.google.com/p/chromium/issues/detail?id=167083
https://code.google.com/p/chromium/issues/detail?id=332189
*/
</script>
</head>
<body class="background-dark">
<div class="container">
<br><br>
<div class="row">
<div class="col-xs-6">
<div class="animated fadeInLeftBig">
<h1 class="slide-one-header"><strong>bands</strong>ly</h1>
<h4>Australia's best <strong>band matching</strong> site - find the band for you, <strong>now.</strong></h4>
<br>
<p class="lead hidden-xs">
We exists to make it easy for people to find a good <br>band for their wedding, birthday, barmitzvah, you name it.<br><br>
Our mission is to connect people & help organise <br>some amazing events for you on your special day.
<br><br>
Best of all, it's... <strong>Easy. Fun. Free</strong>
</p>
</div>
</div>
<div class="col-xs-6">
<div class="text-align-center animated fadeInRightBig">
<img src="img/music.png" width="90%">
</div>
</div>
</div>
</div>
<div class="content container">
<section class="widget">
<div class="body">
<div class="mt">
<table id="datatable-table" class="table table-striped table-hover">
<thead>
<tr>
<th>Id</th>
<th>Band Name</th>
<th>Members</th>
<th>Bio</th>
<th>Song List</th>
</tr>
</thead>
</table>
</div>
</div>
</section>
</div>
<!-- common libraries. required for every page-->
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/jquery-pjax/jquery.pjax.js"></script>
<script src="lib/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
<script src="lib/widgster/widgster.js"></script>
<script src="lib/underscore/underscore.js"></script>
<!-- common application js -->
<script src="js/app.js"></script>
<script src="js/settings.js"></script>
<!-- page specific libs -->
<script src="lib/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="lib/underscore/underscore.js"></script>
<script src="lib/backbone/backbone.js"></script>
<script src="lib/backbone.paginator/lib/backbone.paginator.min.js"></script>
<script src="lib/backgrid/lib/backgrid.min.js"></script>
<script src="lib/backgrid-paginator/backgrid-paginator.js"></script>
<script src="lib/datatables/media/js/jquery.dataTables.min.js"></script>
<!-- page application js -->
<script src="js/tables-dynamic.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url: 'bands',
type: 'GET',
dataType: 'json',
success: function(data) {
$('#datatable-table').dataTable({
"sAjaxDataProp": "",
"bProcessing": true,
"aaData": data,
"aoColumnDefs": [
{ "mData": "id"},
{ "mData": "bandname"},
{ "mData": "members"},
{ "mData": "bio"},
{ "mData": "songlist"}
]
});
},
error: function() { console.log('error retrieving customers'); }
});
});
</script>
</body>
</html>
哦，直播网站位于：http://bandsly.com/index3.html
【问题讨论】：
-
您必须在代码中的其他位置初始化数据表。