Java 通过layui的分页插件laypage对数据进行分页

最近要在SpringMVC+MyBatis项目的某个页面对数据进行分页，大致思路为在页面创建两个隐藏的输入框保存当前页面pageNum和每页显示数据的条数pageSize，每次分页时，修改对应的值即可，然后把pageNum和pageSize传到后台给pageHelper

1.  MyBatis层（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.zghky.dao.***">
	<cache-ref namespace="com.zghky.dao.***"/>
	
	<resultMap id="getTestMap" type="Op">
		<id column="id" property="id" />
		<result column="geography_position" property="account.geographyPosition"/>
		<result column="op_type" property="opType"/>
		<result column="op_time" property="opTime"/>
		<result column="op_table_name" property="opTableName"/>
		<result column="op_record_id" property="opRecordId"/>
		<result column="op_record_name" property="opRecordName"/>
		<result column="user_id" property="account.id"/>
		<result column="user_name" property="account.userName"/>
	</resultMap>
	<select id="getOperationLog" resultMap="getTestMap">
    	select t.id, t.user_id, t.geography_position, t.op_type, 
		t.op_time, t.op_table_name, t.op_record_id, 
		t.op_record_name, a.user_name from op t left join 
		account a on t.user_id = a.id where t.op_record_name is not null 
		order by op.id desc
    </select>
</mapper>

注意：（1）在resultMap那里虽然SQL语句写的是类似t.id、t.op_type，但column还是要写为id、opType，因为查询出来的数据库字段名还是id、opType；

（2）由于我在test这个表里面有两个属性：account和otherField是另外两个表的联动，即存储这两个表的所有属性

其中pageNum和pageSize这两个属性在otherField表里面，userId、userName和geography_position属性在account表里面

所以在resultMap那里写对应数据存放字段要在property设置为account.id和account.geography_position之类的；

private Account account;
private OtherField otherField = new OtherField();

public Account getAccount() {
	return account;
}

public void setAccount(Account account) {
	this.account = account;
}

public OtherField getOtherField() {
	return otherField;
}

public void setOtherField(OtherField otherField) {
	this.otherField = otherField;
}

（3）order by后面的值要唯一，重复的话，分页会有些数据显示不出来；

（4）设置那些数据不显示要在MyBatis这里设置，如上面的where op.operation_record_name is not null，不让会使数据分页时显示条数不对；

（5）<resultMap>的id要和<select>那里的resultMap一致，<resultMap>的type设置的是保存查询数据的表。

2. Dao层

public interface OpMapper {
	
	public List<Op> getOp();
}

3. Service层

@Service
public class OperationLogService {

	@Autowired
	private OpMapper opMapper;
	
	@Transactional(readOnly = true)
	public PageInfo<Op> getOp(Op op){
		PageHelper.startPage(op.getOtherField().getPageNum(), 
				op.getOtherField().getPageSize());
		List<Op> ops = opMapper.getOp();
		PageInfo<Op> opInfo = new PageInfo<>(ops);
		return opInfo;
	}
}

4. Controller层

@Controller
@RequestMapping("/op")
public class OpController {

	@Autowired
	private OpService opService;
	
	@ResponseBody
	@RequestMapping(value = "/getOp", method = RequestMethod.POST)
	public PageInfo<Op> getOp(String page, String size) {
		Op op = new Op();
		OtherField otherField = new OtherField();
		int pages = Integer.parseInt(page);
		int sizes = Integer.parseInt(size);
		otherField.setPageNum(pages);
		otherField.setPageSize(sizes);
		op.setOtherField(otherField);
		return opService.getOp(op);
	}
	
}

5. 前端html

<div class="content">
	<div id="manager">
		<div id="list-manager">
			<table id="op-list" class="table table-hover list-manager">
				<tbody id="tbody"></tbody>
			</table>
		</div>
		
		<!-- 分页导航 -->
		<div id="page"></div>
		<!-- 隐藏当前页和条数，初始值为1,10 -->
		<input type="hidden" id="currPage" value="1">
		<input type="hidden" id="limit" value="10">
	</div>
</div>

主要是设置两个用来保存当前页和限制每页条数的输入框

<input type="hidden" id="currPage" value="1">
<input type="hidden" id="limit" value="10">

6. 前端js

var total = "";
$(function(){
	total = "";
	getOpInfo();
	toPage();
});

/*请求数据*/
function getOpInfo(){
	var page = $("#currPage").val();
	var size = $("#limit").val();
	
	$.ajax({
		url: path + 'op/getOp',
		type: "post",
		async: false,
		dataType: 'json',
		data: {
			"page": page,
			"size": size
		},
		success: successFunction,
		error: errorFunction
	});
}

/*数据请求成功*/
function successFunction(data){
	/*console.log(data);*/
	$("#currPage").val(data.page);// 重新赋值当前页
    $("#limit").val(data.limit);// 重新赋值本页条数
    
    var page = data.page;
    var limit = data.limit;
    total = data.total;
    var html = '';
    if(data.list.length > 0) {
    	$.each(data.list, function(index, item) {
    		// 显示数据处理
            html += '......';
    	});
    } else {
    	html += '<tr><td colspan="7">暂无数据</td></tr>';
    }
    $('#op-list').find('tbody').html(html);
}

/*数据请求失败*/
function errorFunction(){
	var html = '<tr><td colspan="7">暂无数据</td></tr>';
	$('#op-list>tbody').html(html);
}

/*时间戳转date年月日时分秒*/
function formatDateTime(time, format){
	var t = new Date(time);
	var tf = function(i){
		return (i < 10 ? '0' : '') + i
	};
	return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){
		switch(a){
			case 'yyyy':
				return tf(t.getFullYear());
				break;
			case 'MM':
				return tf(t.getMonth() + 1);
				break;
			case 'mm':
				return tf(t.getMinutes());
				break;
			case 'dd':
				return tf(t.getDate());
				break;
			case 'HH':
				return tf(t.getHours());
				break;
			case 'ss':
				return tf(t.getSeconds());
				break;
		}
	});
}

/*分页*/
function toPage(){
	layui.use('laypage', function(){
		var laypage = layui.laypage;
		
		laypage.render({
			elem: 'page',
			limits: [10, 20, 30, 40, 50, 100, 200, 300, 400],
            count: total,
            layout: ['prev', 'page', 'next', 'limit', 'skip', 'count'],
            jump: function(data, first){
            	/*console.log(data);*/
                $("#currPage").val(data.curr);
                $("#limit").val(data.limit);
                if(!first){// 点击右下角分页时调用
                	getOpInfo();
                }
            }
		});
	});
}

 

来源：oschina

链接：https://my.oschina.net/u/3986411/blog/4269730