说明
bootstrap table可以前端分页，也可以后端sql用limit分页。
前端分页下性能和意义都不大，故一般情况下不用这种，请看我的另一篇后端分页的博客
源码下载地址：https://git.oschina.net/dshvv/pagination_byjs.git
该文主要讲前端分页：
1、后端一次性查询所，（底层因该是有个缓存json）然后前端分页
2、查询也是前端搜索（即搜索前端缓存的json内容），不进入服务器
源码
html
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta charset="utf-8">
<title>图片上传</title>
<!-- 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>
</head>
<body>
<div class="container" style="margin-top:100px">
<div class="row">
<!-- 表格 -->
<div class="col-xs-12">
<table class="table table-striped table-bordered table-hover" ></table>
</div>
</div>
</div>
<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>
</body>
</html>
controller
package com.dsh.controller; import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.dsh.pojo.Student;
import com.dsh.service.StudentService; @Controller
@RequestMapping("student")
public class StudentController {
@Autowired
private StudentService studentService; @RequestMapping("selectAll")
@ResponseBody
public List<Student> getAll(){
return studentService.selectAll();
}
}
service
package com.dsh.service.imp; import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.dsh.mapper.StudentMapper;
import com.dsh.pojo.Student;
import com.dsh.pojo.StudentExample;
import com.dsh.pojo.StudentExample.Criteria;
import com.dsh.service.StudentService; @Service
public class StudentServiceImp implements StudentService {
@Autowired
private StudentMapper studentMapper;
public List<Student> selectAll() {
//这里我用的是mybatis自定生成的代码里Example查询用法，不需理解，会用就行
StudentExample example=new StudentExample();
Criteria criteria=example.createCriteria();
criteria.getAllCriteria();
return studentMapper.selectByExample(example);
}
}