JQuery分页插件+Ajax+数据库limit实现分页效果

最新推荐文章于 2021-02-13 05:44:33 发布

WindBlows风

最新推荐文章于 2021-02-13 05:44:33 发布

阅读量896

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery SSM框架 Ajax 文章标签： JQuery分页插件 AJAX+数据库分页

本文链接：https://blog.youkuaiyun.com/WhenTheWindBlows/article/details/88805204

JQuery 同时被 3 个专栏收录

3 篇文章

订阅专栏

SSM框架

2 篇文章

订阅专栏

Ajax

2 篇文章

订阅专栏

本文介绍了如何在基于SSM框架的项目中，结合JQuery分页插件和AJAX技术实现数据库分页效果。首先，文章提供了分页插件的资源链接，然后详细阐述了分页的实现步骤，包括初始化数据、分页查询、数据渲染和回调函数的使用。在前端，通过AJAX首次请求数据并启用分页，回调函数处理分页逻辑，通过调整页数进行数据库查询并更新页面内容。后端则涉及分页类、控制器和映射文件的配合使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
【基于SSM框架实现，需要配置好SSM相关配置，参考本人：https://blog.youkuaiyun.com/WhenTheWindBlows/article/details/87908557】
分页插件（需要引入相应资源文件）：http://www.jq22.com/jquery-info20090
初始化数据->分页->查询数据->渲染->回调（查询->渲染）
html代码：（前端思路）
【第一步】ajax初次请求后台数据，成功返回JSON数据后，启用分页
【第二步】分页的回调函数返回page页数，将页数-1(页数从1开始，数据库limit从0开始往后查询，所有传递后台的当前页数要-1)，赋值给当前页数（currentPage），回调函数调用数据查询方法
【第三步】数据查询方法ajax请求，获得数据，并渲染至页面某一div
重复执行回调第二、三步，实现分页效果

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="basePath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
	<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
#contentList, #box {
text-align: center;	
}
#message {
display: inline-block;
}
#message table{
border:5px;
}
#message table td {
width: 200px;
}
.chooseBar {
	margin: 0 auto;
	width:800px;
}
</style>
<title>分页效果</title>
<link rel="stylesheet" type="text/css" href="${basePath}/css/paging.css">
<script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="${basePath}/js/jquery-1.11.1.min.js"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="${basePath}/js/paging.js"></script>
</head>
<body>
	<div id="main">
	<div>
		<form action="${basePath}/list/insert" method="post">
			<input type="text" name="name" /> <input type="submit" value="增加">
		</form>
	</div>
	<button id="show">显示</button>
	<div id="contentList">
		<div><h1>分页效果图</h1></div>
		<div id="message"></div>
		<div class="chooseBar">
			<div class="pagger-box pagger" id="box"></div>
		</div>
	</div>
	<script>
		var currentPage = 0;//第0页
		var pageSize = 3;//每页设置展示3条记录

		//初始化数据
		$(function() {
			$.ajax({
				url : "${basePath}" + "/list/home",
				data : {
					"currentPage" : currentPage,
					"pageSize" : pageSize,
				},
				dataType : "json",
				success : function(data) {//返回数据后，启用分页
				    showData(data);//加载页面需要渲染一次，之后由分页进行控制
					$('#box').paging({
						initPageNo : currentPage, // 初始页码
						totalPages : data.totalPage, //总页数
						totalCount : '合计' + data.totalRecord + '条数据', // 条目总数
						slideSpeed : 600, // 缓动速度。单位毫秒
						jump : true, //是否支持跳转
						callback : function(page) { // 回调函数
						if (page == 1) {
										$(".first-page").attr("disabled",
												"disabled");
										$(".pre-page").attr("disabled",
												"disabled");
									} else {
										$(".first-page").removeAttr(
												"disabled");
										$(".pre-page").removeAttr(
												"disabled");
									}
					  	if (page == data.totalPage) {
										$(".last-page").attr("disabled",
												"disabled");
										$(".next-page").attr("disabled",
												"disabled");
									} else {
										$(".last-page").removeAttr(
												"disabled");
										$(".next-page").removeAttr(
												"disabled");
									}
							query(page);//查询数据
						}
					})
				}
			})
		})

		//渲染数据
		function showData(data) {
			var list = data.dataList;//获取到的pager类，包涵了当前页数的记录列表，提取出列表
			var str = "";
			for (var i = 0; i < list.length; i++) {//拼接当前列表记录的html代码
				var str = str + "<tr><td>" + list[i].id + "</td><td>"
						+ list[i].name + "</td></tr>";
			}
			$("#message").html(//将结果渲染至页面
					"<table  border='8'><tr><th>序 号</th><th>姓  名</th></tr>" + str
							+ "</table>")
		}
		//查询数据
		function query(page) {
			$.ajax({
				url : "${basePath}" + "/list/home",
				data : {
					"currentPage" : page - 1,//数据库中从第0页开始查询
					"pageSize" : pageSize,
				},
				dataType : "json",
				success : function(data) {
					showData(data);//查到分页数据后，调用渲染数据方法
				}
			})
		}
	</script>
</div>
</body>
</html>

后端代码(基于SSM框架)
pager 分页类

package lqh.code.entity;

import java.util.List;

public class Pager<T> {
private int currentPage;//当前页
private int pageSize;//每页显示的数据量
private int totalRecord;//总的记录数
private int totalPage;//总页数
private List<T> dataList;//存储查询的当前页面记录
public int getCurrentPage() {
	return currentPage;
}
public void setCurrentPage(int currentPage) {
	this.currentPage = currentPage;
}
public int getPageSize() {
	return pageSize;
}
public void setPageSize(int pageSize) {
	this.pageSize = pageSize;
}
public int getTotalRecord() {
	return totalRecord;
}
public void setTotalRecord(int totalRecord) {
	this.totalRecord = totalRecord;
}
public int getTotalPage() {
	return totalPage;
}
public void setTotalPage(int totalPage) {
	this.totalPage = totalPage;
}
public List<T> getDataList() {
	return dataList;
}
public void setDataList(List<T> dataList) {
	this.dataList = dataList;
}

public Pager(int currentPage, int pageSize, int totalRecord) {
	super();
	this.pageSize = pageSize;
	this.totalRecord = totalRecord;
	//总页数
	this.totalPage = totalRecord%pageSize==0?totalRecord/pageSize:totalRecord/pageSize+1;
	//当前第几页
	this.currentPage=this.totalPage<pageSize?this.totalPage:currentPage;
}
public Pager() {
	super();
}
}

controller

@Controller
@RequestMapping("list")
public class MainController {
@Autowired
private UserService userService;
@RequestMapping("/home")
@ResponseBody
Pager<User> findUser(@Param("currentPage") int currentPage,@Param("pageSize") int pageSize){
	List<User> users= userService.findUserAll(currentPage*pageSize, pageSize);//currentPage*pageSize表示从第多少条记录开始往后查。如第2页，是在第一页的基础上1*3，也就是从4条记录开始再往后查3条记录。
	int total = userService.findUsers().size();//查询数据库，只计算数量。
	Pager<User> pager =new Pager<User>(currentPage, pageSize, total);//实例化分页类
	pager.setDataList(users);//将查询到的当前页面的用户列表封装给pager分页类并返回。
	return pager;
}

映射文件

<?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="lqh.code.dao.UserDao">
	<select id="findUsers" resultType="User">
	select id,name from userinfo
</select>
<select id="findUserAll" parameterType="java.lang.Integer" resultType="User">
	select id,name from userinfo limit #{arg0},#{arg1};
</select>