1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Web前端笔记-使用bootstrap-table.js和bootstrap-table.css使得表格分页

Web前端笔记-使用bootstrap-table.js和bootstrap-table.css使得表格分页

时间:2022-11-04 02:55:14

相关推荐

Web前端笔记-使用bootstrap-table.js和bootstrap-table.css使得表格分页

最终效果如下:

翻页后

首先把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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。