Bootstrap table分页（ssm版）

这是一篇早期学习ssm的笔记，重点是分页

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);

    }

}

Bootstrap table后端分页（ssm版）

说明
bootstrap table可以前端分页，也可以后端sql用limit分页。
这里讲的是后端分页，即实用limit。性能较好，一般均用这种
源码下载地址：https://git.oschina.net/dshvv/pagination_byjava.git
该文主要讲后端分页：
1、前端每点击翻页按钮，就会向后端发出一次请求，后端只查询当前页数所需要的几条数据
2、查询也是后端，会进入服务器

源码

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-6 pull-right">

                    <div class="input-group">

                        <input type="text" class=" form-control" name="age" placeholder="请输入年龄">

                        <input type="text" class=" form-control" name="name" placeholder="请输入姓名">

                        <span class="input-group-btn">

                            <button class="btn btn-default search" type="button">Go!</button>

                        </span>

                    </div>

                </div>

                <!-- 表格 -->

                <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(searchArgs){

                     //---先销毁表格 ---

                     this.obj.bootstrapTable('destroy');

                     //---初始化表格,动态从服务器加载数据---

                     this.obj.bootstrapTable({

                        //【发出请求的基础信息】

                        url: '<%=basePath%>student/selectByFy',

                        method: 'post',

                        contentType: "application/x-www-form-urlencoded",

                        //【查询设置】

                        /* queryParamsType的默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort

                                          设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber */

                        queryParamsType:'',

                        queryParams: function queryParams(params) {

                          var param = {

                              pageNumber: params.pageNumber,

                              pageSize: params.pageSize

                          };

                          for(var key in searchArgs){

                              param[key]=searchArgs[key]

                          }

                          return param;

                        }, 

                        //【其它设置】

                        locale:'zh-CN',//中文支持

                        pagination: true,//是否开启分页（*）

                        pageNumber:1,//初始化加载第一页，默认第一页

                        pageSize: 3,//每页的记录行数（*）

                        pageList: [2,3,4],//可供选择的每页的行数（*）

                        sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）

                        showRefresh:true,//刷新按钮

                        //【样式设置】

                        height: 300,//table的高度

                        //按需求设置不同的样式：5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];

                        rowStyle: function (row, index) {

                            var style = "";

                            if (row.name=="小红") {style='success';}

                            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({})

            $(".search").click(function(){

                var searchArgs={

                     name:$("input[name='name']").val(),

                     age:$("input[name='age']").val()

                }

                bstpTable.inint(searchArgs)

            })

        </script>

    </body>

</html>

controller

package com.dsh.controller;

import java.util.HashMap;

import java.util.Map;

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.service.StudentService;

@Controller

@RequestMapping("student")

public class StudentController {

    @Autowired

    private StudentService studentService;

    @RequestMapping("selectByFy")

    @ResponseBody

    public  Map<String,Object> selectByFy(int pageSize,int pageNumber,String name,Integer age){

        /*所需参数*/

        Map<String, Object> param=new HashMap<String, Object>();

        int a=(pageNumber-1)*pageSize;

        int b=pageSize;

        param.put("a", a);

        param.put("b", b);

        param.put("name", name);

        param.put("age", age);

        return studentService.selectByFy(param);

    }

}

service

package com.dsh.service.imp;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import com.dsh.mapper.StudentCustomMapper;

import com.dsh.pojo.Student;

import com.dsh.service.StudentService;

@Service

public class StudentServiceImp implements StudentService {

    @Autowired

    private StudentCustomMapper studentDao;

    @Override

    public Map<String,Object> selectByFy(Map<String, Object> param) {

        //bootstrap-table要求服务器返回的json须包含：totlal，rows

        Map<String,Object> result = new HashMap<String,Object>();

        int total=studentDao.selectByFy(null).size();

        List<Student> rows=studentDao.selectByFy(param);

        result.put("total",total);

        result.put("rows",rows);

        return result;

    }

}

mapper.xml（即dao）

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >

<mapper namespace="com.dsh.mapper.StudentCustomMapper" >

    <select id="selectByFy" resultType="com.dsh.pojo.Student" parameterType="Map">

        SELECT *

        FROM student

        <if test="a!=null">

            <where>

                <if test="name!=null and name!=''"> name=#{name}</if>

                <if test="age!=null and age!=''">AND  age=#{age}</if>

            </where>

            LIMIT #{a},#{b}

        </if>

    </select>

</mapper>