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

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

WindBlows风

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

阅读量848

点赞数

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

本文链接：https://blog.csdn.net/whenthewindblows/article/details/88805204

版权

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

摘要由CSDN通过智能技术生成

在这里插入图片描述
【基于SSM框架实现，需要配置好SSM相关配置，参考本人：https://blog.csdn.net/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;	
}
#messa