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>