Ajax异步以及pagination插件进行分页查询

最新推荐文章于 2021-08-06 00:33:36 发布

浮灬夸

最新推荐文章于 2021-08-06 00:33:36 发布

阅读量502

点赞数 3

分类专栏：原创文章标签： ajax java jquery json javascript

本文链接：https://blog.csdn.net/KyrieOH/article/details/106476375

版权

本文记录了在学习SSM框架过程中，如何利用Ajax实现异步分页查询数据的详细步骤。内容包括：1) 引入必要的js和css文件；2) 分页对象PageInfo的创建；3) 前端分页展示和callback函数；4) Controller层的处理，如使用、和注解进行数据交互；5) 业务层与Mapper的分页查询实现。

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

Ajax异步以及pagination插件进行分页

1、前言

此篇文章为自己在学习ssm框架，期间在异步获取数据并实现分页加载数据这个功能上卡顿很久，最终实现出，特在此记录并分享！

2、前期准备

引入<script type="text/javascript" src="js/jquery.pagination.js"></script>js文件
引入<link rel="stylesheet" href="css/pagination.css" />css外部样式表

3、代码实现

创建分页PageInfo对象

public class PageInfo<T> implements Serializable {
   

    //当前页码
    private int pageNum;
    //每页的数量
    private int pageSize;
    //总记录数
    private int total;
    //总页数 = 总记录数 % 每页记录的条数 == 0 ？总记录条数/每页显示条数 :总记录条数 + 1
    private int page;
    //结果集
    private List<T> list;`
  .........省略了getter、setter、toString方法

前台页面

有关pageination的相关资料可以去pageination官网查阅

callback: function (api) {
//回调函数
}

api接口中有四个重要的方法

方法名	参数	方法说明
getPageCount()	无参数	获取总页数
setPageCount(page)	page:页数	设置总页数
getCurrent()	无参数	获取当前页数（页码）
filling(page)	页数	填充数据，参数为页数

}

<!DOCTYPE html>
<html lang="zh-CN">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>login</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/pagination.css"/>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <!--分页插件-->
    <script type="text/javascript" src="js/jquery.pagination.js"></script>
    <title>Title</title>
    <style type="text/css">
    </style>