jQuery实现简单分页(jqPaginator插件)

---

前言

每天敲一档，档档不一样。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、jqPaginator是什么？

现在网上各种各样的分页组件很多，但是很难找到十分“称心如意”的，于是jqPaginator诞生了。
它可以不受CSS框架限制，可以使用在各种不同风格中的网页中。
高度自定义的Html结构。所以jqPaginator努力做到合理范围内的自定义，使其灵活的使用了各种不同的场景。

二、使用步骤

1.引入库

1.导入jQuery插件

<script src="jquery-1.11.3.min.js"></script>

下面为：在线连接

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

2.导入jqPaginator插件

<script src="jqPaginator.js"></script>

2.读入数据

代码如下（示例）：

$('#id').jqPaginator({
    totalPages: 100,//设置分页的总页数
    visiblePages: 10,//设置最多显示的页码数（例如有100页，当前第1页，则显示1 - 7页）
    currentPage: 1,//设置当前的页码

    first: '<li class="first"><a href="javascript:void(0);">First</a></li>',
    prev: '<li class="prev"><a href="javascript:void(0);">Previous</a></li>',
    next: '<li class="next"><a href="javascript:void(0);">Next</a></li>',
    last: '<li class="last"><a href="javascript:void(0);">Last</a></li>',
    page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
    onPageChange: function (num) {
        $('#text').html('当前第' + num + '页');
    }
});

3.参数文档

参数	默认值	说明
totalPages	0	设置分页的总页数
totalCounts	0	设置分页的总条目数
pageSize	0	设置每一页的条目数注意：要么设置totalPages，要么设置totalCounts + pageSize，否则报错；设置了totalCounts和pageSize后，会自动计算出totalPages。
currentPage	1	设置当前的页码
visiblePages	7	设置最多显示的页码数（例如有100页，当前第1页，则显示1 - 7页）
disableClass	‘disabled’	设置首页，上一页，下一页，末页的“禁用状态”样式
activeClass	‘active’	设置当前页码样式
first	bootstrap风格	设置“首页”的Html结构
prev	bootstrap风格	设置“上一页”的Html结构
next	bootstrap风格	设置“下一页”的Html结构
last	bootstrap风格	设置“末页”的Html结构
page	bootstrap风格	设置页码的Html结构,其中可以使用{{page}}代表当前页，{{totalPages}}代表总页数，{{totalCounts}}代表总条目数（例如：上面的“极简风格”的Demo，就是使用了{{占位符}}，并将visiblePages设为1实现的。）注意：first、prev、next、last。page只要设置一个，其余未设置的会变为空。
wrapper	(无)	分页结构的Html包裹，例如：<div class="your class"></div>，一般不会用到
onPageChange	(无)	回调函数，当换页时触发（包括初始化第一页的时候），会传入两个参数：1、“目标页"的页码，Number类型2、触发类型，可能的值：“init”（初始化），“change”（点击分页）

---

三、完整项目实现案列

我这里是用ajax方法来实现的一个完整分页。

1.先上效果

2.搭建Servlet运行环境

详细环境搭建教程
https://blog.csdn.net/qq_45694924/article/details/125935221?spm=1001.2014.3001.5501

3.建一个项目

项目结构为下图，我这里用的三层架构思想来搭建项目。

项目结构细节图

static和lib文件下都是属于外部导入文件

4.后端代码及解析

1.utils层

1.DBUtil

作用：用于连接MySQL数据库。

package com.hqyj.fish.utils;

import java.sql.*;

/**
 * @Author fish
 * @Date 2022/7/27 18:39
 * @Version IntelliJ IDEA 2019.3.1
 */
public class DBUtil {
    static {
        try {
            Class.forName("com.mysql.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    public static Connection getConnection(){

        Connection con = null;
        try {
            //连接MySQL,输入自己的账号和密码
            con = DriverManager.getConnection("jdbc:mysql:///user?useUnicode=true&characterEncoding=UTF-8", "root", "root");
            return con;
        } catch (SQLException throwables) {
            throwables.printStackTrace();
            return null;
        }
    }

    //关闭数据库
    public static void closeAll(ResultSet rs, PreparedStatement pre, Connection con){
        if(rs!=null){
            try {
                rs.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
        if(pre!=null){
            try {
                pre.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
        if(con!=null){
            try {
                con.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
    }
}

2.PageUtil

作用：仅对实现这个页面的一个实例化

package com.hqyj.fish.utils;

import java.util.List;

/**
 * @Author fish
 * @Date 2022/7/27 18:40
 * @Version IntelliJ IDEA 2019.3.1
 */
public class PageUtil<T> {
    //当前页面
    private int pageNum;
    //每页显示的条数
    private int pageSize;
    //总条数
    private int totalCount;
    //数据集
    private List<T> pageInfo;

    public int getPageNum() {
        return pageNum;
    }

    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }

    public List<T> getPageInfo() {
        return pageInfo;
    }

    public void setPageInfo(List<T> pageInfo) {
        this.pageInfo = pageInfo;
    }
}

2.entity层

1.User.java

作用：实例化对象类

package com.hqyj.fish.entity;

/**
 * @Author fish
 * @Date 2022/7/27 18:41
 * @Version IntelliJ IDEA 2019.3.1
 */
public class User {
    private Integer id;
    private String userName;
    private String userAge;
    private String userSex;
    private String userTel;

    public User() {
    }

    public User(Integer id, String userName, String userAge, String userSex, String userTel) {
        this.id = id;
        this.userName = userName;
        this.userAge = userAge;
        this.userSex = userSex;
        this.userTel = userTel;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getUserAge() {
        return userAge;
    }

    public void setUserAge(String userAge) {
        this.userAge = userAge;
    }

    public String getUserSex() {
        return userSex;
    }

    public void setUserSex(String userSex) {
        this.userSex = userSex;
    }

    public String getUserTel() {
        return userTel;
    }

    public void setUserTel(String userTel) {
        this.userTel = userTel;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", userName='" + userName + '\'' +
                ", userAge='" + userAge + '\'' +
                ", userSex='" + userSex + '\'' +
                ", userTel='" + userTel + '\'' +
                '}';
    }


}

3.dao层

1.UserDao.java接口

作用：定义两个接口。

package com.hqyj.fish.dao;

import com.hqyj.fish.entity.User;

import java.util.List;

/**
 * @Author fish
 * @Date 2022/7/27 18:50
 * @Version IntelliJ IDEA 2019.3.1
 */
public interface UserDao {
    //从第几页开始遍历，一页有多少个
    List<User> queryUserPage(int pageNum,int pageSize);
    //总的记录个数
    int countUserAll();
}

2.UserDaoImpl.java

作用：实现两个接口

package com.hqyj.fish.dao.Impl;

import com.hqyj.fish.dao.UserDao;
import com.hqyj.fish.entity.User;
import com.hqyj.fish.utils.DBUtil;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

/**
 * @Author fish
 * @Date 2022/7/27 18:42
 * @Version IntelliJ IDEA 2019.3.1
 */
public class UserDaoImpl implements UserDao {
    private Connection con = null;
    private PreparedStatement pre = null;
    private ResultSet rs = null;
    @Override
    public List<User> queryUserPage(int pageNum, int pageSize) {
        try {
            con = DBUtil.getConnection();
            String sql = "select * from user limit ?,?";
            pre = con.prepareStatement(sql);
            //
            pre.setInt(1,(pageNum-1)*pageSize);
            //设置插多少条记录
            pre.setInt(2,pageSize);
            rs = pre.executeQuery();
            List<User> users = new ArrayList<>();
            while (rs.next()){
                User u = new User();
                u.setId(rs.getInt("id"));
                u.setUserName(rs.getString("user_name"));
                u.setUserSex(rs.getString("user_sex"));
                u.setUserAge(rs.getString("user_age"));
                u.setUserTel(rs.getString("user_tel"));
                users.add(u);
            }
            return users;
        } catch (SQLException throwables) {
            throwables.printStackTrace();
            return null;
        }finally {
            DBUtil.closeAll(rs,pre,con);
        }
    }

    @Override
    public int countUserAll() {
        try {
            con = DBUtil.getConnection();
            String sql = "select count(*) as countAll from user";
            pre = con.prepareStatement(sql);
            rs = pre.executeQuery();
            if(rs.next()){
                int count = rs.getInt("countAll");
                return count;
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return 0;
    }


}

4.service层

1.UserService.java接口

package com.hqyj.fish.service;

import com.hqyj.fish.entity.User;
import com.hqyj.fish.utils.PageUtil;

/**
 * @Author fish
 * @Date 2022/7/27 18:40
 * @Version IntelliJ IDEA 2019.3.1
 */
public interface UserService {

    PageUtil<User> queryUserPage(int pageNum,int pageSize);
}

2.UserServiceImpl.java

package com.hqyj.fish.service.Impl;

import com.hqyj.fish.dao.Impl.UserDaoImpl;
import com.hqyj.fish.dao.UserDao;
import com.hqyj.fish.entity.User;
import com.hqyj.fish.service.UserService;
import com.hqyj.fish.utils.PageUtil;

/**
 * @Author fish
 * @Date 2022/7/27 18:41
 * @Version IntelliJ IDEA 2019.3.1
 */
public class UserServiceImpl implements UserService {
    private UserDao ud = new UserDaoImpl();
    @Override
    public PageUtil<User> queryUserPage(int pageNum, int pageSize) {
        PageUtil<User> pageUtil = new PageUtil<>();
        pageUtil.setPageNum(pageNum);
        pageUtil.setPageSize(pageSize);
        pageUtil.setTotalCount(ud.countUserAll());
        pageUtil.setPageInfo(ud.queryUserPage(pageNum,pageSize));
        return pageUtil;
    }
}

5.controller层

1.UserPageController.java

package com.hqyj.fish.controller;


import com.fasterxml.jackson.databind.ObjectMapper;
import com.hqyj.fish.entity.User;
import com.hqyj.fish.service.Impl.UserServiceImpl;
import com.hqyj.fish.service.UserService;
import com.hqyj.fish.utils.PageUtil;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @Author fish
 * @Date 2022/7/27 18:43
 * @Version IntelliJ IDEA 2019.3.1
 */
@WebServlet("/page")
public class UserPageController extends HttpServlet {
    private UserService us = new UserServiceImpl();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        String method = req.getParameter("method");
        if(method.equals("queryUser")){
            queryUserAll(req,resp);
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }

    public void queryUserAll(HttpServletRequest req, HttpServletResponse resp) throws IOException {
//        获取当前页码
        String pageNum = req.getParameter("pageNum");
        int pageNum1 = Integer.parseInt(pageNum);
        if(pageNum1==-1){
            pageNum1=1;
        }
//        获取每页展示的条数
        String pageSize = req.getParameter("pageSize");
        int pageSize1 = Integer.parseInt(pageSize);
        PageUtil<User> userPageUtil = us.queryUserPage(pageNum1, pageSize1);
        resp.setContentType("text/html;charset=UTF-8");
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(userPageUtil);
        resp.getWriter().write(json);

    }

}

后端的代码完成，现在开始写前端的代码

5.前端代码及解析

user_page.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>用户列表</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="static/js/jquery-1.11.3.min.js"></script>
    <script src="static/js/jqPaginator.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>用户名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>电话</th>
        </tr>
        </thead>

        <tbody id="tab"></tbody>
        <tfoot>
        <tr>
            <td colspan="8">
                <ul class="pagination" id="pagination1"></ul>
            </td>
        </tr>
        </tfoot>
    </table>

</body>
    <script>
        var total = 0;//总条数
        var totalPages = 0;//总页数
        var visiblePages = 3;//显示的分页按钮数
        var currentPage = 0;//当前页码
        var pageSize = 3;//每页展示的条数
        $(function () {
            //页面加载完毕首次访问
            showUser(-1);

            $('#pagination1').jqPaginator({
                pageSize: pageSize,
                visiblePages: visiblePages,
                currentPage: currentPage,
                totalCounts: total,
                first: '<li class="first"><a href="javascript:void(0);">第一页</a></li>',
                prev: '<li class="prev"><a href="javascript:void(0);">前一页</a></li>',
                next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
                last: '<li class="last"><a href="javascript:void(0);">最后一页</a></li>',
                page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
                onPageChange: function (num) {
                    /* num代表改变过后的页码 */
                    showUser(num);
                }
            });
        });


        /**
         * 当前页码
         * @param num
         */
        function showUser(page_num) {
            $.ajax({
                url:"page",
                type:"GET",
                async:false, //同步请求，这里必须要设置为同步请求，否则初始化参数不成功，会报错。
                dataType:"json",
                data:{"pageNum":page_num,"pageSize":pageSize,"method":"queryUser"},
                success:function (data) {
                    console.log(data);
                    if(page_num==-1){//首页发送请求，默认查询第一页数据,首次访问需要初始化参数
                        total = data.totalCount;
                        currentPage = data.pageNum;
                    }
                    var str="";
                    for(var i=0;i<data.pageInfo.length;i++){
                        str+="<tr id='t_"+data.pageInfo[i].id+"'><td>"+data.pageInfo[i].userName+"</td><td>"+data.pageInfo[i].userAge+""
                            +"</td><td>"+data.pageInfo[i].userSex+"</td><td>"+data.pageInfo[i].userTel
                    }
                    $("#tab").html(str);
                }
            });
        }
    </script>
</html>

到这里就完了，下一步就是调式，运行成功，万事大吉！
下面这些就是本代码中所需要添加得依赖。

6.依赖包下载

项目包中的依赖，这是一个压缩文件，解压出来有两个文件分别是：static和lib，将它们解压。然后添加到对应的位置。
https://pan.baidu.com/s/1-U3rQIR1nXisD2jHZUXiRQ?pwd=8kf1
提取码：8kf1

四、完整项目下载

链接：https://pan.baidu.com/s/1uCyV2nw2DeVd7Hp_aogm1A?pwd=wkyw
提取码：wkyw
有什么不懂，欢迎在评论区留言！

---

总结

都看到这里了，点个赞，再走呗！