Recently, you need to paginate the data on a page of spring MVC + mybatis project. The general idea is to create two hidden input boxes on the page to save the pageNum of the current page and the number of pieces of data displayed on each page pageSize. Modify the corresponding values each time you paginate, and then transfer the pageNum and pageSize to the background pageHelper

1. MyBatis layer (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>

Note: (1) in resultMap, although the SQL statement is similar to t.id and t.op'u type, the column should be written as ID and opType, because the database field name queried is still ID and opType;

(2) Because I have two properties in the test table: account and otherField are the linkage of the other two tables, that is, to store all the properties of the two tables

The two properties pageNum and pageSize are in the otherField table, and the userId, userName and geography  position properties are in the account table

Therefore, to write the corresponding data storage field in the resultMap, you need to set the property to account.id and 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) The value after order by should be unique. If it is repeated, some data will not be displayed in the paging;

(4) Set the data display not to be set here in MyBatis, such as where op.operation "record" name is not null above, so that the number of displayed data in paging is not correct;

(5) The id of < resultMap > should be the same as that of < Select > where the type of < resultMap > is set to save the table of query data.

2. Dao layer

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

3. Service layer

@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 layer

@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. Front end 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>
		
		<!-- Paged navigation -->
		<div id="page"></div>
		<!-- Hide the current page and number of items, with an initial value of 1,10 -->
		<input type="hidden" id="currPage" value="1">
		<input type="hidden" id="limit" value="10">
	</div>
</div>

It mainly sets two input boxes to save the current page and limit the number of entries per page

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

6. Front end js

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

/*Request data*/
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
	});
}

/*Data request successful*/
function successFunction(data){
	/*console.log(data);*/
	$("#currPage").val(data.page); / / reassign the current page
    $("#limit").val(data.limit); / / reassign the number of entries on this page
    
    var page = data.page;
    var limit = data.limit;
    total = data.total;
    var html = '';
    if(data.list.length > 0) {
    	$.each(data.list, function(index, item) {
    		// Display data processing
            html += '......';
    	});
    } else {
    	html += '<tr><td colspan="7">No data available</td></tr>';
    }
    $('#op-list').find('tbody').html(html);
}

/*Data request failed*/
function errorFunction(){
	var html = '<tr><td colspan="7">No data available</td></tr>';
	$('#op-list>tbody').html(html);
}

/*Time stamp date mm / DD / yyyy HHM / S*/
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;
		}
	});
}

/*paging*/
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){// Called when you click Page in the lower right corner
                	getOpInfo();
                }
            }
		});
	});
}