【第一篇】搞定BootstrapTable（后端使用SpringMVC+Hibernate）

kkorkk

已于 2023-10-31 20:42:45 修改

阅读量7.5k

点赞数 2

分类专栏：前端文章标签：分页显示 BootstrapTable

于 2017-09-05 22:23:07 首次发布

本文链接：https://blog.csdn.net/kkorkk/article/details/77857703

版权

还是那句老话，好记性不如烂笔头。记得以前的一个Demo项目里面有分页，但是没有用插件，自己手写的分页处理，但是效果并不是很好，最近接触到插件BootstrapTable，风格和Bootstrap统一，现在就来说说怎样使用它。

初上手，直接套json数据进去，然后设置分页方式为client'，很快表格就做出来，但是一般项目中都是使用后台来进行分页的，不可能一下从数据库从捞出成千上万条数据，先不说流量的问题，客户端的渲染也吃力。在使用服务器后端分页的过程中，也遇到了一些问题，相信大部分初次接触BootstrapTable的人应该都会遇到。所以特此写一个完整的例子，后面应该还会继续完善，包括增、删、改。

好，废话少说，上代码。

先上项目架构：

项目使用maven构建，由于项目结构不是很复杂，所以就不做过多介绍。

接下来看index.jsp

<%@ page contentType="text/html;charset=UTF-8"%>
<html>

<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-table.css" type="text/css">
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap-table.js"></script>
<script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>

<body>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title text-center">Bootstrap-table样例演示</h3>
		</div>
		<div class="panel-body">

			<div id="toolbar" class="btn-group">
			<button id="btn_edit" type="button" class="btn btn-default">
				<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
			</button>
			<button id="btn_delete" type="button" class="btn btn-default">
				<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
			</button>
		</div>

		<table data-toggle="table" id="table" data-height="400"
			data-classes="table table-hover" data-striped="true"
			data-pagination="true" data-side-pagination="server"
			data-search="true" data-show-refresh="true" data-show-toggle="true"
			data-show-columns="true" data-toolbar="#toolbar">
			<thead>
				<tr>
					<th data-field="state" data-checkbox='ture'></th>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
				</tr>
			</thead>
		</table>
	</div>
	</div>


</body>

<script type="text/javascript">
	$("#superBtn").click(function() {
		$.get("getPageInfo?limit=5&offset=0", function(data, status) {
			aler

最低0.47元/天解锁文章

kkorkk

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
【第一篇】搞定BootstrapTable（后端使用SpringMVC+Hibernate）

还是那句老话，好记性不如烂笔头。记得以前的一个Demo项目里面有分页，但是没有用插件，自己手写的分页处理，但是效果并不是很好，最近接触到插件BootstrapTable，风格和Bootstrap统一，现在就来说说怎样使用它。初上手，直接套json数据进去，然后设置分页方式为client'，很快表格就做出来，但是一般项目中都是使用后台来进行分页的，不可能一下从数据库从捞出成千上万条数据，先不说流
复制链接

扫一扫