在html和php中搜索数据表时出错

我总是收到这个错误DataTables警告：table id=dataTable-无法重新初始化dataTable。有关此错误的更多信息，请在加载页面时参阅此处。我发现很难使用搜索、分页和输入功能。求你了，我需要你的帮助。

<html>
<body>
<table class="table table-striped table-bordered table-hover" id="dataTable" cellspacing="0" style="width="100%">
<thead>
<tr>
<th>User Id</th>
<th>Username</th>
<th>Fullname</th>
<th>Position</th>
<th>Gender</th>
<th>Email</th>
<th>Telephone</th>
<th style="width: 23%">Action</th>
</tr>
</thead>
<?php $sql = "SELECT * FROM users WHERE Status='1' ";
$query = $dbh->prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
if($query->rowCount() > 0){
foreach($results as $result)
{   ?>
<tbody>   
<tr>
<td><?php echo htmlentities($result->UserId);?></td>
<td><?php echo htmlentities($result->Username);?></td>
<td><?php echo htmlentities($result->Fullname);?></td>
<td><?php echo htmlentities($result->Position);?></td>
<td><?php echo htmlentities($result->Gender);?></td>
<td><?php echo htmlentities($result->Email);?></td>
<td><?php echo htmlentities($result->Telephone);?></td>
</tr>
</tbody>
<?php }} ?>
<tfoot>
<tr>
<tr>
<th>User Id</th>
<th>Username</th>
<th>Fullname</th>
<th>Position</th>
<th>Gender</th>
<th>Email</th>
<th>Telephone</th>
<th>Action</th>
</tr>
</table>   
</body>          
<script>
$(function () {
$('#dataTable').DataTable()
$('#dataTable').DataTable({
'paging'      : true,
'lengthChange': false,
'searching'   : false,
'ordering'    : true,
'info'        : true,
'autoWidth'   : false
})
})
</script>
</html>

首先，这里有错误：style="width="100%"需要是style="width:100%"

然后你叫你的桌子两次('#dataTable').DataTable。如您提供的链接中所述。

还有很多关于如何开始使用该插件的例子。

此外，您在表头有8列，在表体有7列，这会导致错误。你需要计算这些数字。

我还将脚本包含在正文中，只是为了确保在文档中做好调用准备。它的工作原理如下所示。

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
</head>
<body>
<table id="dataTable" class="display" style="width:100%">
<thead>
<tr>
<th>User Id</th>
<th>Username</th>
<th>Fullname</th>
<th>Position</th>
<th>Gender</th>
<th>Email</th>
<th>Telephone</th>
<th style="width: 23%">Action</th>
</tr>
</thead>
<tbody>   
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
<tfoot>
<tr>
<tr>
<th>User Id</th>
<th>Username</th>
<th>Fullname</th>
<th>Position</th>
<th>Gender</th>
<th>Email</th>
<th>Telephone</th>
<th>Action</th>
</tr>
</table>   

<script>
$(document).ready(function() {
$('#dataTable').DataTable({
'paging'      : true,
'lengthChange': false,
'searching'   : false,
'ordering'    : true,
'info'        : true,
'autoWidth'   : false
} );
} );
</script>
</body> 
</html>

所以你的代码应该是：

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
</head>
<body>
<table class="table table-striped table-bordered table-hover" id="dataTable" cellspacing="0" style="width:100%">
<thead>
<tr>
<th>User Id</th>
<th>Username</th>
<th>Fullname</th>
<th>Position</th>
<th>Gender</th>
<th>Email</th>
<th>Telephone</th>
<th style="width: 23%">Action</th>
</tr>
</thead>
<?php $sql = "SELECT * FROM users WHERE Status='1' ";
$query = $dbh->prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
if($query->rowCount() > 0){
foreach($results as $result)
{   ?>
<tbody>   
<tr>
<td><?php echo htmlentities($result->UserId);?></td>
<td><?php echo htmlentities($result->Username);?></td>
<td><?php echo htmlentities($result->Fullname);?></td>
<td><?php echo htmlentities($result->Position);?></td>
<td><?php echo htmlentities($result->Gender);?></td>
<td><?php echo htmlentities($result->Email);?></td>
<td><?php echo htmlentities($result->Telephone);?></td>
<td>Missing column!</td>
</tr>
</tbody>
<?php }
?>
<tfoot>
<tr>
<tr>
<th>User Id</th>
<th>Username</th>
<th>Fullname</th>
<th>Position</th>
<th>Gender</th>
<th>Email</th>
<th>Telephone</th>
<th>Action</th>
</tr>
</table>
<script>      
$(document).ready(function() {
$('#dataTable').DataTable({
'paging'      : true,
'lengthChange': false,
'searching'   : false,
'ordering'    : true,
'info'        : true,
'autoWidth'   : false
})
});
</script>      
</body>          
</html>

相关内容

最新更新

热门标签：