web项目如何分页?经典分页算法

①新建一个类VO，新建字段 count(一共多少条记录)，presentPage（当前在第几页）,List<Student> studentLs;(当前页面对象的集合)；

public class TeacherPage {
    private Integer count;
    private Integer presentPage;
    private List<Student> studentLs;
}

②service层

@Override
    public R getPage(Integer inset, Integer tiaoshu) {
        StudentPage studentPage=new StudentPage();
        studentPage.setCount(studentDao.getCount());
        studentPage.setStuLs(studentDao.getPage((inset-1)*tiaoshu,tiaoshu));
        studentPage.setPresentPage(inset);
        return R.ok(studentPage);
    }

inset:第几页 tiaoshu:一页有几条

③dao层

<select id="getCount" resultType="Integer">
        select count(id) from tb_student
</select>

<select id="getPage" parameterType="Integer" resultType="com.chen.entity.Student">
        select * from tb_student limit #{inset},#{tiaoshu}
</select>

④前端页面:采用前后端分离模式，通过AJax异步交互得到,其中有个分页算法

Html

<div class="research_content">
					<div class="research_table">
						<table class="table table-bordered">
							<thead>
								<tr style="line-height: 18.2px;">
									<th scope="col">#</th>
									<th scope="col">学号</th>
									<th scope="col">姓名</th>
									<th scope="col">年龄</th>
									<th scope="col">性别</th>
									<th scope="col">电话</th>
									<th scope="col">学院</th>
									<th scope="col">专业</th>
									<th scope="col">年级</th>
									<th scope="col">班级</th>
								</tr>
							</thead>
							<tbody id="tbody">
								<tr style="line-height: 18.2px;">
									<th scope="row">1</th>
									<td>null</td>
									<td>null</td>
									<td>null</td>
									<td>null</td>
									<td>null</td>
									<td>null</td>
									<td>null</td>
									<td>null</td>
									<td>null</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="research_grouppage">
						<nav aria-label="Page navigation example" class="pageBlock">
							<ul class="pagination pagination-sm" id="fenye">
								<li class="page-item"><a class="page-link" href="#">上一页</a></li>
								<li class="page-item"><a class="page-link" href="#">1</a></li>
								<li class="page-item"><a class="page-link" href="#">2</a></li>
								<li class="page-item"><a class="page-link" href="#">3</a></li>
								<li class="page-item"><a class="page-link" href="#">下一页</a></li>
							</ul>
						</nav>
					</div>
				</div>

JavaScript

window.onload = function() {
	load(1)

}

function load(a) {
	get("http://localhost:8089/ssmStudent_war_exploded/StudentController/getPage", {
			"inset": a,
			"tiaoshu": 10
		},
		function success(res) {
			$("#tbody").empty();
			res.msg.stuLs.forEach(function(value, index) {
				$("#tbody").append(
					'<tr style="line-height: 18.2px;">' +
					'<th scope="row">' + value.id + '</th>' +
					'<td>' + value.stuNumber + '</td>' +
					'<td>' + value.stuName + '</td>' +
					'<td>' + value.stuAge + '</td>' +
					'<td>' + value.stuSex + '</td>' +
					'<td>' + value.stuPhone + '</td>' +
					'<td>' + value.collegeName + '</td>' +
					'<td>' + value.majorName + '</td>' +
					'<td>' + value.grade + '</td>' +
					'<td>' + value.className + '</td>' +
					'</tr>'
				)
			});
			var page = Math.ceil(res.msg.count / 10);
			var presentPageNext = res.msg.presentPage + 1;
			if (presentPageNext >= page) {
				presentPageNext = page;
			}
			var presentPageBack = res.msg.presentPage - 1;
			if (presentPageBack <= 1) {
				presentPageBack = 1;
			}
			$("#fenye").empty()
			console.log(page)
			if (page == 1 && res.msg.presentPage == 1) {
				$("#fenye").append(
					'<li class="page-item"><a class="page-link" onclick="load(' + 1 + ')" href="#">上一页</a></li>' +
					'<li class="page-item"><a class="page-link" onclick="load(' + 1 + ')" href="#">1</a></li>' +
					'<li class="page-item"><a class="page-link" onclick="load(' + 1 + ')" href="#">下一页</a></li>'
				);
			} else if (page == 2) {
				$("#fenye").append(
					'<li class="page-item"><a class="page-link" onclick="load(' + presentPageBack + ')" href="#">上一页</a></li>' +
					'<li class="page-item"><a class="page-link" onclick="load(' + 1 + ')" href="#">1</a></li>' +
					'<li class="page-item"><a class="page-link" onclick="load(' + 2 + ')" href="#">2</a></li>' +
					'<li class="page-item"><a class="page-link" onclick="load(' + presentPageNext + ')" href="#">下一页</a></li>'
				);
			} else if (page == 3) {
				'<li class="page-item"><a class="page-link" onclick="load(' + presentPageBack + ')" href="#">上一页</a></li>' +
					'<li class="page-item"><a class="page-link" onclick="load(' + 1 + ')" href="#">1</a></li>' +
					'<li class="page-item"><a class="page-link" onclick="load(' + 2 + ')" href="#">2</a></li>' +
					'<li class="page-item"><a class="page-link" onclick="load(' + 3 + ')" href="#">3</a></li>' +
					'<li class="page-item"><a class="page-link" onclick="load(' + presentPageNext + ')" href="#">下一页</a></li>'
			} else if (page == 4) {
				'<li class="page-item"><a class="page-link" onclick="load(' + presentPageBack + ')" href="#">上一页</a></li>' +
					'<li class="page-item"><a class="page-link" onclick="load(' + 1 + ')" href="#">1</a></li>' +
					'<li class="page-item"><a class="page-link" onclick="load(' + 2 + ')" href="#">2</a></li>' +
					'<li class="page-item"><a class="page-link" onclick="load(' + 3 + ')" href="#">3</a></li>' +
					'<li class="page-item"><a class="page-link" onclick="load(' + 4 + ')" href="#">4</a></li>' +
					'<li class="page-item"><a class="page-link" onclick="load(' + presentPageNext + ')" href="#">下一页</a></li>'
			} else if (page >= 5) {
				if (a <= 2) {
					a = 3
				} else if (a >= page - 2) {
					a = page - 2
				}
				$("#fenye").append(
					'<li class="page-item"><a class="page-link" onclick="load(' + presentPageBack + ')" href="#">上一页</a></li>' +
					'<li class="page-item" onclick="load(' + (a - 2) + ')"><a class="page-link" href="#">' + (a - 2) + '</a></li>' +
					'<li class="page-item" onclick="load(' + (a - 1) + ')"><a class="page-link" href="#">' + (a - 1) + '</a></li>' +
					'<li class="page-item" onclick="load(' + (a) + ')"><a class="page-link" href="#">' + (a) + '</a></li>' +
					'<li class="page-item" onclick="load(' + (a + 1) + ')"><a class="page-link" href="#">' + (a + 1) + '</a></li>' +
					'<li class="page-item" onclick="load(' + (a + 2) + ')"><a class="page-link" href="#">' + (a + 2) + '</a></li>' +
					'<li class="page-item"><a class="page-link" onclick="load(' + presentPageNext + ')" href="#">下一页</a></li>'
				)
			}
		},
		function error(err) {

		})
}

这个ajax是包装过的，主要看分页算法思想