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

---

前言

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

---

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

一、jqPaginator是什么？

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

二、使用步骤

1.引入库

1.导入jQuery插件

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

下面为：在线连接

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

2.导入jqPaginator插件

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

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 + '页');
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.参数文档

---

三、完整项目实现案列

我这里是用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();
            }
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

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;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

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 + '\'' +
                '}';
    }


}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

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();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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;
    }


}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

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);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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);

    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

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

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

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

6.依赖包下载

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

四、完整项目下载

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

---

总结

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