本文介绍如何基于SSM+bootstrapTable实现前端分页
首先需要搭建SSM项目，为节省时间搭建SSM项目过程省略。。
效果图如下所示：
数据库脚本如下所示：
CREATE TABLE `student` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(100) DEFAULT NULL,
`age` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=21 DEFAULT CHARSET=gbk;
/*Data for the table `student` */
insert into `student`(`id`,`name`,`age`) values (1,'张三',10),(2,'李四',15),(3,'小红',8),(4,'小明',20),(5,'诸葛亮',30),(6,'周瑜',20),(7,'孙悟空',500),(8,'猪八戒',200),(9,'唐僧',20),(10,'阿尔法',15),(11,'张学良',12),(12,'小兰',8),(13,'易烊千玺',20),(14,'俞灏明',30),(15,'游鸿明',20),(16,'海明威',28),(17,'老王',10),(18,'哪咤',8),(19,'红孩儿',9),(20,'黄帝',10);
1.jsp页面中需要引入jquery及bootstrap、bootstraptable分页插件
<!-- jq -->
<script type="text/javascript" src="<%=basePath%>js/jquery-3.1.1.min.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="<%=basePath%>/plugs/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="<%=basePath%>/plugs/bootstrap/js/bootstrap.min.js"></script>
<!-- 分页插件 -->
<link rel="stylesheet" href="<%=basePath%>plugs/bootstrap-table/bootstrap-table.min.css">
<script type="text/javascript" src="<%=basePath%>plugs/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="<%=basePath%>plugs/bootstrap-table/bootstrap-table-locale-all.min.js"></script>
2.设置bootstraptable
<script type="text/javascript">
class BstpTable{
constructor(obj) {
this.obj=obj;
}
inint(){
//---先销毁表格 ---
this.obj.bootstrapTable('destroy');
//---初始化表格,动态从服务器加载数据---
this.obj.bootstrapTable({
//【发出请求的基础信息】
url: '<%=basePath%>student/selectAll',
method: 'post',
contentType: "application/x-www-form-urlencoded",
//【其它设置】
locale:'zh-CN',//中文支持
pagination: true,//是否开启分页（*）
pageNumber:1,//初始化加载第一页，默认第一页
pageSize: 3,//每页的记录行数（*）
pageList: [2,3,4],//可供选择的每页的行数（*）
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
showRefresh:true,//刷新按钮
search: true,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端
//【样式设置】
height: 300,//table的高度
//按需求设置不同的样式：5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
rowStyle: function (row, index) {
var style = "";
if (row.name=="老王") {style ='danger';}
return { classes: style }
},
//【设置列】
columns: [
{field: 'id',title: 'id'},
{field: 'name',title: '姓名'},
{field: 'age',title: '年龄'},
{field: 'tool',title: '操作', align: 'center',
formatter:function(value,row,index){
var element =
"<a class='edit' data-id='"+row.id +"'>编辑</a> "+
"<a class='delet' data-id='"+row.id +"'>删除</a> ";
return element;
}
}
]
})
}
}
var bstpTable=new BstpTable($("table"));
bstpTable.inint()
</script>
热门文章
