bootstrap-table的服务端分页

一、list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div style="margin-left: 10px;margin-right: 10px;">
    <form class="form-inline">
        <div class="form-group">
            <label for="exampleInputName7">编号</label>
            <input type="text" class="form-control" id="exampleInputName7" name="id" placeholder="请输入..." value="">
        </div>  &nbsp;
        <div class="form-group">
            <label for="exampleInputName2">创建人</label>
            <input type="text" class="form-control" id="exampleInputName2" name="createperson" placeholder="请输入...">
        </div>  &nbsp;
        <div class="form-group">
            <label for="exampleInputName3">出生日期</label>
            <input type="text" id="start-time" class="form-control" name="startTime" id="exampleInputName3" placeholder="请选择...">
        </div>
        <div class="form-group">
            <label for="exampleInputName4">---</label>
            <input type="text" id="end-time" class="form-control" name="endTime" id="exampleInputName4" placeholder="请选择...">
        </div>
        <button type="button" class="btn btn-success btn-sm btn-search">搜索</button>
    </form>
    <br>
    <table id="child-list"></table>
    <style>
        #child-list td,tr,th{
            text-align: center;
        }
    </style>
    <button id="list_refresh" hidden>刷新</button>
    <script>
        //日历初始化
        laydate.render({
            elem:'#start-time',
            type:'datetime'
        });
        laydate.render({
            elem:'#end-time',
            type:'datetime'
        })
        $('#child-list').bootstrapTable({
            method:'get',
            url:'${ctx}/children/list',
            pageSize:10, //每页显示条数
            pageNumber:1, //起始页
            pagination:true,//是否显示分页
            pageList:[5,10,12], //可供选择的页大小
            queryParamsType:'',//默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
                                // 设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber
            sidePagination:'server',//服务器分页
            queryParams:queryParams,//请求服务器时传递的参数
            columns:[{
                field:'id',
                title:'编号'
            },{
                field:'height',
                title:'身高'
            },{
                field:'weight',
                title:'体重'
            },{
                field:'borntime',
                title:'出生日期'
            },{
                field:'createtime',
                title:'创建日期'
            },{
                field:'createperson',
                title:'创建人'
            },{
                field:'memo',
                title:'备注'
            },{
                title:'操作',
                formatter:function (value,row,index) {
                    return '<button class="btn btn-danger btn-xs btn-del" url="${ctx}/children/delete/'+row.id+'">删除</button>&nbsp;&nbsp;' +
                        '<button class="btn btn-primary btn-xs btn-edit" url="${ctx}/children/edit/'+row.id+'">修改</button>';
                }
            }]
        });
        //请求服务器时传递的参数
        function queryParams(params) {
            return {
                pageSize:params.pageSize,
                pageNumber:params.pageNumber,
                id:$('input[name=id]').val(),
                createperson:$('input[name=createperson]').val(),
                startTime:$('input[name=startTime]').val(),
                endTime:$('input[name=endTime]').val()
            }
        }
        //查询按钮点击事件
        $('.btn-search').click(function () {
            $('#list_refresh').click();
        });
        //列表刷新
        $("#list_refresh").click(function () {
            $("#child-list").bootstrapTable('refresh',{
                url:'${ctx}/children/list'
            })
        });
        //删除
        $('#child-list').delegate('.btn-del','click',function () {
            var url = $(this).attr("url");
            layer.confirm('确认删除？',{btn:['删除','取消']},function () {
                $.ajax({
                    url:url,
                    type:'get',
                    success:function (data) {
                        if(data.status == 0) {
                            layer.msg(data.msg, {icon: 1});
                            //刷新数据
                            $("#list_refresh").click();
                        }else{
                            layer.alert(data.msg,{icon:2});
                        }
                    },
                    dataType:'json'
                });
            },function (index) {
                layer.close(index);
            })
        })

        //修改
        $('#child-list').delegate('.btn-edit','click',function () {
            var url = $(this).attr("url");
            //跳转到修改页面
            $("#content-main").load(url);
        })
    </script>
</div>

二、QueryDto

package com.xyp.common.model;

/**
 * @Description: 查询数据模型
 * @Date: Created in 9:32 2018/2/17
 * @Modified By:
 */
public class QueryDto {

    private Integer pageSize;       //每页显示条数
    private Integer pageNumber;     //当前第几页
    private String id;              //编号
    private String createperson;    //创建人
    private String startTime;       //起始日期
    private String endTime;         //结束日期

    public Integer getPageSize() {
        return pageSize;
    }

    public void setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
    }

    public Integer getPageNumber() {
        return pageNumber;
    }

    public void setPageNumber(Integer pageNumber) {
        this.pageNumber = pageNumber;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getCreateperson() {
        return createperson;
    }

    public void setCreateperson(String createperson) {
        this.createperson = createperson;
    }

    public String getStartTime() {
        return startTime;
    }

    public void setStartTime(String startTime) {
        this.startTime = startTime;
    }

    public String getEndTime() {
        return endTime;
    }

    public void setEndTime(String endTime) {
        this.endTime = endTime;
    }
}

三、ChildrenController

package com.xyp.controller;

import com.xyp.common.model.AjaxResult;
import com.xyp.common.model.BasePage;
import com.xyp.common.model.QueryDto;
import com.xyp.model.Children;
import com.xyp.service.ChildrenService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.Date;
import java.util.List;
import java.util.Random;

/**
 * @Description:
 * @Date: Created in 13:06 2018/2/16
 * @Modified By:
 */
@Controller
public class ChildrenController {

    @Autowired
    private ChildrenService childrenService;

    /**
     * 跳转到list.jsp页面
     * @return
     */
    @RequestMapping(value = "/children/index",method = RequestMethod.GET)
    public String index(){
        return "children/list";
    }

    /**
     * 获取新生儿列表
     * @return
     * @throws Exception
     */
    @RequestMapping(value = "/children/list",method = RequestMethod.GET)
    @ResponseBody
    public BasePage<Children> list(QueryDto queryDto) throws Exception {
        return childrenService.queryForPage(queryDto);
    }

    /**
     * 根据id删除新生儿信息
     * @param id
     * @return
     * @throws Exception
     */
    @RequestMapping(value = "/children/delete/{id}",method = RequestMethod.GET)
    @ResponseBody
    public AjaxResult delete(@PathVariable("id") String id) throws Exception {
        int res = childrenService.delete(id);
        if(res > 0){
            return AjaxResult.success("删除成功");
        }
        return AjaxResult.error("删除出错");
    }

    /**
     * 获取需要更新的新生儿信息，并跳转到相应的更新页面
     * @param id
     * @return
     */
    @RequestMapping(value = "/children/edit/{id}",method = RequestMethod.GET)
    public String edit(@PathVariable("id") String id,Model model){
        model.addAttribute("edit_child",childrenService.getByParimaryKey(id));
        return "children/update";
    }

    /**
     * 修改信息
     * @param children
     * @return
     */
    @RequestMapping(value = "/children/edit",method = RequestMethod.POST)
    @ResponseBody
    public AjaxResult edit(Children children) throws Exception {
        int res = childrenService.update(children);
        if(res > 0){
            return AjaxResult.success("修改成功");
        }
        return AjaxResult.error("修改失败");
    }
}

四、ChildrenService

package com.xyp.service;

import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.xyp.common.model.BasePage;
import com.xyp.common.model.QueryDto;
import com.xyp.common.service.BaseService;
import com.xyp.mapper.ChildrenMapper;
import com.xyp.model.Children;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import tk.mybatis.mapper.common.Mapper;

import java.util.List;

/**
 * @Author: sky_xiaolu
 * @Description:
 * @Date: Created in 13:07 2018/2/16
 * @Modified By:
 */
@Service
public class ChildrenService extends BaseService<Children> {
    @Autowired(required = false)
    private ChildrenMapper childrenMapper;

    public Mapper<Children> getMapper() {
        return childrenMapper;
    }

    /**
     * 分页查询
     * @return
     */
    public BasePage<Children> queryForPage(QueryDto queryDto){
        PageHelper.startPage(queryDto.getPageNumber(), queryDto.getPageSize());
        List<Children> list = childrenMapper.pageInfo(queryDto);
        PageInfo<Children> pageInfo = new PageInfo<Children>(list);
        return new BasePage<Children>(pageInfo.getTotal(),pageInfo.getList());
    }
}

五、ChildrenMapper

package com.xyp.mapper;

import com.xyp.common.model.QueryDto;
import com.xyp.model.Children;
import tk.mybatis.mapper.common.Mapper;

import java.util.List;

public interface ChildrenMapper extends Mapper<Children> {

    /**
     * 分页查询
     * @param queryDto
     * @return
     */
    List<Children> pageInfo(QueryDto queryDto);
}

六、ChildrenMapper.xml

<?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.xyp.mapper.ChildrenMapper" >
  <resultMap id="BaseResultMap" type="com.xyp.model.Children" >
    <!--
      WARNING - @mbg.generated
    -->
    <id column="Id" property="id" jdbcType="CHAR" />
    <result column="RegisterId" property="registerid" jdbcType="CHAR" />
    <result column="`Index`" property="index" jdbcType="INTEGER" />
    <result column="Height" property="height" jdbcType="INTEGER" />
    <result column="Weight" property="weight" jdbcType="INTEGER" />
    <result column="BornTime" property="borntime" jdbcType="TIMESTAMP" />
    <result column="CreateTime" property="createtime" jdbcType="TIMESTAMP" />
    <result column="CreatePerson" property="createperson" jdbcType="VARCHAR" />
    <result column="Memo" property="memo" jdbcType="VARCHAR" />
  </resultMap>

  <select id="pageInfo" parameterType="com.xyp.common.model.QueryDto" resultMap="BaseResultMap">
      SELECT * FROM children
      <where>
        <if test="id != null and id != ''">
          AND Id = #{id}
        </if>
        <if test="createperson != null and createperson != ''">
          AND CreatePerson LIKE '%${createperson}%'
        </if>
        <if test="startTime != null and endTime != null and startTime != '' and endTime != ''">
          AND BornTime BETWEEN #{startTime} AND #{endTime}
        </if>
      </where>
  </select>
</mapper>