[我已经创建了一个表单来回显表数据,我需要使用排序,搜索和分页来设计表,但是错误显示为DataTables warning: Non-table node initialisation (DIV). For more information about this error, please see http://datatables.net/tn/2
,下面是我的编码:
head
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Echo Table coding
<?php
session_start();
$qry = "select id, name, identify, created, pay_option, amount, receivedby from payment_details";
$_SESSION["query"] = $qry;
$result = $conn->query("select id, name, identify, created, pay_option, amount, receivedby from payment_details");
$rows = $result->fetchAll(PDO::FETCH_ASSOC);
echo "<div id='myTable'><div class='data-content'><span><b>REPORT SELECTION</b></span><div class='data-table'>";
echo "<table id='dataTable'><tr><th>Payer</th><th>Passport/IC No</th><th>Date Paid</th><th>Payment Type</th><th>Payment Amount</th><th>Received by</th><th>Payment Receipt</th></tr>";
foreach($rows as $row) {
echo "<tr id=".$row["id"]."><td>".$row["name"]."</td><td>".$row["identify"]."</td><td>".$row["created"]."</td><td>".$row["pay_option"]."</td><td>".$row["amount"]."</td><td>".$row["receivedby"]."</td><td><a href='?loc=invoice' onclick='sessionFunction(".$row["id"].")'>View</a></td></tr>";
}
echo "</table>";
echo "</div></div><div class='table-msg'><span>Total Record : ";
echo $result->rowCount();
echo "</span><span style='margin-left: 70%;'>Max 500 pages</span></div></div>";
?>
Script Function
$(document).ready(function(){
$('#myTable').dataTable();
});
实际上,我希望输出表如下面的示例和图片中的红色箭头表示我需要该功能:
我希望有人编码专家可以指导我如何解决它,这个问题已经使我陷入困境。谢谢。
在HTML中,您已经定义了以下两个标签:
<div id='myTable'>
和:
<table id='dataTable'>
因此,表标签的ID为dataTable
。
但是,当您初始化DataTables ...
$(document).ready(function(){
$('#myTable').dataTable();
});
...您使用的ID是myTable
-这是<div>
标签的ID。您需要使用<table>
标签的ID。
我建议在HTML中交换ID,就像这样:
<div id="dataTable">
和:
<table id="myTable">
(通常使用双引号,而不是单引号。]
但这可以解释错误消息:
数据表警告:非表节点初始化
您正在尝试使用<div>
初始化数据表。通过进行此更改,您应该能够克服此错误。
(当然,此错误背后可能还存在其他问题。)
我还注意到示例(例如here)引用的是函数DataTable()
,而不是dataTable()
。我建议完全遵循它们的语法(并且我假设您使用的是1.10.20版)。