Bootstrap table前端分页（ssm版）

说明
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);
    }
}