最終效果如下：

翻頁后

首先把bootstrap-table.js和bootstrap-table.css下載下來。

把英文改成中文，如下：

把需要用表格的頁面在

</body>前加入此JavaScript代碼：

<!-- 表格分頁相關 --> <script type="text/javascript">$(document).ready(function () {$("#table_page").bootstrapTable({columns:[{field: 'name', title: '名稱'},{field: 'power', title: '當前功率'},{field: 'up', title: '總調節上限'},{field: 'down', title: '總調節下限'}]})}) </script>

此時表格HTML數據如下：

<table class="table table-bordered tile" id="table_page" data-pagination="true" data-side-pagination="client" data-page-size="3"><thead><tr><th>名稱</th><th>當前功率</th><th>總調節上限</th><th>總調節下限</th></tr></thead><tbody><tr><td>1</td><td>Jhon </td><td>Makinton </td><td>@makinton</td></tr><tr><td>2</td><td>Malinda</td><td>Hollaway</td><td>@hollway</td></tr><tr><td>3</td><td>Wayn</td><td>Parnel</td><td>@wayne123</td></tr><tr><td>XX</td><td>1000</td><td>1000</td><td>100</td></tr><tr><td>XX</td><td>1112</td><td>2000</td><td>500</td></tr></tbody> </table>

?

總結

以上是生活随笔為你收集整理的Web前端笔记-使用bootstrap-table.js和bootstrap-table.css使得表格分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。