本文接上一篇客户端分页，如果想看客户端分页，请点这里。 接下来继续服务端分页，首先还是先来几个地址：bootstrap table中文文档，bootstrap table使用介绍，JqueryAPI，bootstrap官网。
首先，还是先贴出test.jsp和test.js文件：
test.jsp文件代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="baseurl" value="${pageContext.request.contextPath}/"/>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="${baseurl }/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="${baseurl }/bootstrap/css/bootstrap-table.css"/>
<script src="${baseurl }/jquery/jquery.min.js"></script>
<script src="${baseurl }/bootstrap/js/bootstrap-table.js"></script>
<script src="${baseurl }/bootstrap/js/bootstrap-table-zh-CN.js"></script>
<script src="${baseurl }/scripts/test.js"></script>
<title>test</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div>
<div class="center-block" style="width: 240px;">
<input type="text" id="searchText" class="form-control pull-left glyphicon glyphicon-search"
style="width: 200px;" placeholder="角色名/是否可用">
<button id="searchBtn" class="btn btn-default glyphicon glyphicon-search"></button>
</div>
<div id="toolbar" class="btn-group">
<button type="button" class="btn btn-default glyphicon glyphicon-pencil" id="btn-add">新增</button>
<button type="button" class="btn btn-default glyphicon glyphicon-edit" id="btn-edit">编辑</button>
<button type="button" class="btn btn-default glyphicon glyphicon-remove" id="btn-del">删除</button>
</div>
</div>
<table id="test-table"></table>
</div>
</div>
</div>
</body>
</html>test.js文件代码
$(function() {
/*load页面之后，加载数据*/
initTable();
/*点击删除*/
$("#btn-del").click(function() {
//逻辑
});
/*点击新增*/
$("#btn-add").click(function() {
//逻辑
});
/*
* 点击编辑，弹出层
*/
$("#btn-edit").click(function() {
//逻辑
});
});
/* 改变可用状态available*/
function changeStatus(event) {
//逻辑
}
/* 初始化表格 */
function initTable(){
var rows = new Array();
$('#role-table').bootstrapTable({
method : 'POST', //服务器数据的请求方式 'get' or 'post'
contentType : "application/x-www-form-urlencoded", //服务端分页，必须改成这个
url : '/test/test/getList', //服务器数据的加载地址
dataType : 'json', //服务器返回的数据类型
cache : false, //设置禁用 AJAX 数据缓存
pagination : true, //设置为 true 会在表格底部显示分页条
paginationLoop : false, //设置分页条禁用循环的功能。
sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
searchOnEnterKey : true, //启用搜索框时，设置true则当按下enter键触发搜索方法，否则自动触发
striped : true, //设置隔行变色效果
clickToSelect : true, //在点击行时，自动选择rediobox 和 checkbox
queryParams : queryParams, //请求服务器时附加的参数
queryParamsType : '', //设置为 'limit' 则会发送符合 RESTFul 格式的参数.
minimumCountColumns : 2, //当列数小于此值时，将隐藏内容列下拉框。
paginationPreText : '上一页',
paginationNextText : '下一页',
pageNumber : 1, //初始化加载第一页，默认第一页
pageSize : 15, //每页的记录行数（*）
pageList : [5,10,15], //可供选择的每页的行数（*）
toolbar : '#toolbar', //指定工具按钮组的容器
toolbarAlign : 'right', //指定 toolbar 水平方向的位置。'left' or 'right'
uniqueId : "id", //每一行的唯一标识，一般为主键列
responseHandler : responseHandler, //加载服务器数据之前的处理程序，可以用来格式化数据。 参数：res为从服务器请求到的数据。
/*
* 监听事件：行全选/多选/取消多选时需要改变样式——选中多行时不可编辑，只可删除
*/
onCheckAll: function (rows) {
$("#btn-edit").attr("disabled","disabled");
},
onUncheckAll: function (rows) {
$("#btn-edit").removeAttr("disabled");
},
onCheck: function (row) {
rows.push(row);
if (rows.length > 1) {
$("#btn-edit").attr("disabled","disabled");
} else {
$("#btn-edit").removeAttr("disabled");
}
},
onUncheck: function (row) {
removeByValue(rows,row);
if (rows.length > 1) {
$("#btn-edit").attr("disabled","disabled");
} else {
$("#btn-edit").removeAttr("disabled");
}
},
columns: [
{
selectItemName :'btSelectItem',
checkbox:true,
align : 'center',
valign : 'middle'
},{
field : 'id',
title : '序号',
visible:false,
align : 'center',
valign : 'middle'
},{
field : 'roleName',
title : '角色名',
align : 'center',
valign : 'middle'
},{
field : 'available',
title : '是否可用',
align : 'center',
valign : 'middle',
formatter:function(value,row,index){
if (value == '0') {
return '是';
} else if (value == '1') {
return '否';
}
}
},{
field : 'createTime',
title : '创建时间',
align : 'center',
valign : 'middle'
},{
field : 'updateTime',
title : '修改时间',
align : 'center',
valign : 'middle'
},{
field : 'available',
title : '操作',
align : 'center',
valign : 'middle',
formatter:function(value,row,index){
if (value == '0') {
return '<button type="button" class="btn btn-link btn-sm" onclick="changeStatus(this);">禁用</button>';
} else if (value == '1') {
return '<button type="button" class="btn btn-link btn-sm" onclick="changeStatus(this);">激活</button>';
}
}
}]
});
}
function refresh() {
$("#test-table").bootstrapTable('refreshOptions',{url:'/test/test/getList'});
}
function queryParams(params) {
//searchText 即搜索框输入的搜索条件
var searchText = $("#searchText").val();
if (searchText == '是') {
searchText = '0';
} else if (searchText == '否') {
searchText = '1';
}
var param = {
pageSize : this.pageSize, // 页面大小
pageNumber : this.pageNumber, // 页码
searchText : searchText
}
return param;
}
function responseHandler(res) {
if (res) {
return {
"rows" : res.result,
"total" : res.total
};
} else {
return {
"rows" : [],
"total" : 0
};
}
}
function removeByValue(arr, val) {
for(var i=0; i<arr.length; i++) {
if(arr[i] == val) {
arr.splice(i, 1);
break;
}
}
}
既然是服务端分页，那么后台自然就需要写分页功能的代码了。这个例子查询角色列表，所以先建一个角色实体类
package com.hanjc.test.entity;
import java.io.Serializable;
import java.util.Date;
import com.fasterxml.jackson.annotation.JsonFormat;
/**
* 角色实体类
* @author hanjc
*/
public class Role implements Serializable{
private static final long serialVersionUID = 4806557312064805277L;
private int id; //主键，自增数字
private String roleName; //角色名称
private String available; //是否可用：0可用；1不可用
private Date createTime; //创建时间
private Date updateTime; //更新时间
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getRoleName() {
return roleName;
}
public void setRoleName(String roleName) {
this.roleName = roleName;
}
public String getAvailable() {
return available;
}
public void setAvailable(String available) {
this.available = available;
}
public Date getCreateTime() {
return createTime;
}
/*
* 格式化日期字符串
*/
@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
public void setCreateTime(Date createTime) {
this.createTime = createTime;
}
public Date getUpdateTime() {
return updateTime;
}
@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
public void setUpdateTime(Date updateTime) {
this.updateTime = updateTime;
}
}
然后定义一个分页类，保存分页相关的参数
package com.hanjc.test.vo;
import java.util.List;
public class Pagination {
private int pageSize; //页面大小,即查询时偏移量
private int pageNumber; //页码
private int first; //第一条
private String searchText; //搜索参数
private int total; //查询总条数
private List<?> result; //查询结果
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getPageNumber() {
return pageNumber;
}
public void setPageNumber(int pageNumber) {
this.pageNumber = pageNumber;
}
public int getFirst() {
return first;
}
public void setFirst(int first) {
this.first = first;
}
public String getSearchText() {
return searchText;
}
public void setSearchText(String searchText) {
this.searchText = searchText;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
public List<?> getResult() {
return result;
}
public void setResult(List<?> result) {
this.result = result;
}
}
接下来就是业务代码了，首先controller层：
package com.hanjc.test.controller;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.hanjc.test.service.RoleService;
import com.hanjc.test.vo.Pagination;
/**
* Controller层
* @author hanjc
*/
@Controller
@RequestMapping("/test")
public class RoleController {
@Resource
private RoleService roleService;
/**
* @param request
*/
@RequestMapping("/getList")
@ResponseBody
public Pagination getList(HttpServletRequest request) {
return roleService.getList(request);
}
}service层
package com.hanjc.test.service;
import javax.servlet.http.HttpServletRequest;
import com.hexinyy.jzkfgl.vo.Pagination;
public interface RoleService {
Pagination getList(HttpServletRequest request);
}package com.hanjc.test.service.impl;
import java.util.List;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Service;
import com.hanjc.test.common.pagination.PageUtil;
import com.hanjc.test.dao.RoleDAO;
import com.hanjc.test.entity.Role;
import com.hanjc.test.service.RoleService;
import com.hanjc.test.vo.Pagination;
/**
* Service层
* @author hanjc
*/
@Service
public class RoleServiceImpl implements RoleService {
@Resource
private RoleDAO roleDAO;
@Override
public Pagination getList(HttpServletRequest request) {
//PageUtil是抽取出来的设置分页查询参数的类
Pagination pageParam = PageUtil.getPageParam(request);//获取分页查询 数据参数
Pagination countParam = PageUtil.getCountParam(request);//获取分页查询 总条数参数
//查询list和总条数
List<Role> list = roleDAO.getList(pageParam);
int total = roleDAO.getPageCount(countParam);
//设置分页
Pagination pagination = new Pagination();
pagination.setTotal(total);
pagination.setResult(list);
return pagination;
}
}dao层接口：
package com.hanjc.test.dao;
import java.util.List;
import com.hanjc.test.entity.Role;
import com.hanjc.test.vo.Pagination;
public interface RoleDAO {
List<Role> getList(Pagination pagination);
int getPageCount(Pagination pagination);
}mysql数据表和mapper.xml文件就不贴了，无非一些sql语句，下面是PageUtil类：
package com.hanjc.test.common.pagination;
import javax.servlet.http.HttpServletRequest;
import org.apache.logging.log4j.LogManager;
import org.apache.logging.log4j.Logger;
import com.hanjc.test.common.exception.BusinessException;
import com.hanjc.test.common.exception.EMsgCfg;
import com.hanjc.test.vo.Pagination;
/**
* 分页工具类
* @author hanjc
*/
public class PageUtil {
private static Logger logger = LogManager.getLogger(PageUtil.class.getName());
/*
* 查询数据设置参数，包括pSize ，pNumber 和查询条件searchText
* mysql 分页查询 limit (pSize*(pNumber-1)+1),pSize;
*/
public static Pagination getPageParam(HttpServletRequest request) {
String pSize = request.getParameter("pageSize");
String pNumber = request.getParameter("pageNumber");
String searchText = request.getParameter("searchText");
Pagination pagination = null;
try {
if (pSize == null || pSize.equals("") || pNumber == null || pNumber.equals("")) {
//自定义异常：分页参数错误
throw new BusinessException(EMsgCfg.PAGE_PARAM_ERROR);
}
int pageSize = Integer.parseInt(pSize);
int pageNumber = Integer.parseInt(pNumber);
int first = pageSize*(pageNumber - 1);
pagination = new Pagination();
pagination.setFirst(first);
pagination.setPageSize(pageSize);
if (searchText != null && !searchText.equals("")) {
pagination.setSearchText(searchText);
}
} catch (ClassCastException e) {
logger.error("类型转换错误！",e);
} catch (Exception e) {
logger.error(e);
}
return pagination;
}
/*
* 设置查询总条数参数，searchText
*/
public static Pagination getCountParam(HttpServletRequest request) {
String searchText = request.getParameter("searchText");
Pagination pagination = new Pagination();
if (searchText != null && !searchText.equals("")) {
pagination.setSearchText(searchText);
}
return pagination;
}
}
到这里分页的功能就算完了，希望对大家有参考价值。
马上就放假了，归心似箭呀哈哈，祝所有码农们新年快乐，回家不用修电脑！
1154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
