我正在尝试为从查询结果生成的 coupe 表进行分页。如标题中所述，我尝试使用 Bootstrap 插件链接:http://www.bootply.com/lxa0FF9yhw
当我运行页面时，我在控制台选项卡中收到此错误:未捕获的类型错误:children.size 不是在代码片段的这一部分中重定向我的函数
var numItems = children.size();
我是 jquery 的初学者，不知道如何解决这个问题。 非常感谢任何帮助，非常感谢! 有问题的表:
<h2 class="text-center">Reservations For Today</h2>
<hr>
<table class="table table-hover" id="myTable">
<thead>
<th>Reservation ID</th>
<th>User ID</th>
<th>Table #1</th>
<th>Table #2</th>
<th>Persons</th>
<th>Reservation Made on</th>
<th>Reserved by</th>
<th>Reserved via</th>
<th>Reserved for</th>
<th>Arrival</th>
<th>Departure</th>
<th>Reservation Status</th>
<th>Attendance</th>
</thead>
<tbody id="myTableBody">
<?php
$sql4 = "SELECT * FROM reservations WHERE reserve_date = '$today' ORDER BY reservation_status ASC, reserve_date ASC, reserve_time_start ASC";
$result4 = mysqli_query($conn, $sql4);
while($row = mysqli_fetch_assoc($result4)){
echo '<tr>';
foreach($row as $field) {
if($field === null){
echo '<td>' . " - " . '</td>';
}else{
echo '<td>' . htmlspecialchars($field) . '</td>';
}
}
echo '</tr>';
}
?>
</tbody>
</table>
<div class="col-md-12 text-center">
<ul class="pagination pagination-lg pager" id="myPager"></ul>
</div>
<button type="button" class="prev">Previous</button>
<button type="button" class="next">Next</button>
<button id="myBtn">Edit Attendance</button>
最佳答案
Bootstrap 3 表分页的代码片段。这是我已经测试过的工作代码，尝试一下。我正在使用 jQuery 的 DataTables 插件，这里是 DataTables link通过此链接，您将发现有关 bootstrap3 分页的所有内容。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
</head>
<body>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
</tr>
</tbody>
</table>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('#example').DataTable();
});
</script>
</body>
</html>
希望这对您有帮助
关于javascript - Bootstrap 3 表分页错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43963202/