最终效果如下:
翻页后
首先把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>