Spring + Mybatis + jQuery.Pagination.js 异步分页及 JsonConfig 的使用详解

在现代 Web 应用开发中，数据分页展示是一个常见的需求。Spring 作为优秀的 Java 企业级开发框架，Mybatis 作为持久层框架，搭配 jQuery.Pagination.js 前端分页插件以及 JsonConfig 处理 JSON 数据，能够高效地实现异步分页功能。本文将详细介绍如何整合这些技术实现该功能。

目录#

  1. 环境搭建
  2. Spring 与 Mybatis 整合配置
  3. 后端分页逻辑实现
  4. jQuery.Pagination.js 前端分页插件使用
  5. JsonConfig 的作用及使用
  6. 完整示例代码
  7. 总结与参考

1. 环境搭建#

1.1 项目依赖#

  • Maven 依赖：
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-context</artifactId>
    <version>5.3.18</version>
</dependency>
<dependency>
    <groupId>org.mybatis</groupId>
    <artifactId>mybatis</artifactId>
    <version>3.5.7</version>
</dependency>
<dependency>
    <groupId>org.mybatis</groupId>
    <artifactId>mybatis-spring</artifactId>
    <version>2.0.6</version>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.28</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.13.3</version>
</dependency>

1.2 数据库准备#

创建一个测试表（以用户表为例）：

CREATE TABLE `user` (
  `id` int NOT NULL AUTO_INCREMENT,
  `username` varchar(255) DEFAULT NULL,
  `age` int DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;

2. Spring 与 Mybatis 整合配置#

2.1 Spring 配置文件（applicationContext.xml）#

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
                           http://www.springframework.org/schema/beans/spring-beans.xsd
                           http://www.springframework.org/schema/context
                           http://www.springframework.org/schema/context/spring-context.xsd">
 
    <context:component-scan base-package="com.example"/>
 
    <bean id="dataSource" class="org.apache.commons.dbcp2.BasicDataSource">
        <property name="driverClassName" value="com.mysql.cj.jdbc.Driver"/>
        <property name="url" value="jdbc:mysql://localhost:3306/test?useSSL=false&amp;serverTimezone=UTC"/>
        <property name="username" value="root"/>
        <property name="password" value="root"/>
    </bean>
 
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="mapperLocations" value="classpath:mapper/*.xml"/>
    </bean>
 
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.example.mapper"/>
    </bean>
</beans>

2.2 Mybatis Mapper 文件（UserMapper.xml）#

<?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="com.example.mapper.UserMapper">
 
    <select id="getUserList" resultType="com.example.entity.User">
        SELECT * FROM user LIMIT #{offset}, #{pageSize}
    </select>
 
    <select id="getUserCount" resultType="int">
        SELECT COUNT(*) FROM user
    </select>
</mapper>

3. 后端分页逻辑实现#

3.1 实体类（User.java）#

package com.example.entity;
 
public class User {
    private int id;
    private String username;
    private int age;
 
    // 省略 getter 和 setter 方法
}

3.2 Mapper 接口（UserMapper.java）#

package com.example.mapper;
 
import com.example.entity.User;
import org.apache.ibatis.annotations.Param;
 
import java.util.List;
 
public interface UserMapper {
    List<User> getUserList(@Param("offset") int offset, @Param("pageSize") int pageSize);
    int getUserCount();
}

3.3 Service 层（UserService.java）#

package com.example.service;
 
import com.example.entity.User;
import com.example.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
 
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
@Service
public class UserService {
 
    @Autowired
    private UserMapper userMapper;
 
    public Map<String, Object> getUserPage(int pageNum, int pageSize) {
        int offset = (pageNum - 1) * pageSize;
        List<User> userList = userMapper.getUserList(offset, pageSize);
        int totalCount = userMapper.getUserCount();
        Map<String, Object> resultMap = new HashMap<>();
        resultMap.put("userList", userList);
        resultMap.put("totalCount", totalCount);
        return resultMap;
    }
}

3.4 Controller 层（UserController.java）#

package com.example.controller;
 
import com.example.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
 
import java.util.Map;
 
@RestController
@RequestMapping("/user")
public class UserController {
 
    @Autowired
    private UserService userService;
 
    @RequestMapping("/page")
    public Map<String, Object> getUserPage(@RequestParam("pageNum") int pageNum,
                                           @RequestParam("pageSize") int pageSize) {
        return userService.getUserPage(pageNum, pageSize);
    }
}

4. jQuery.Pagination.js 前端分页插件使用#

4.1 引入插件#

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.pagination.js/2.1.6/jquery.pagination.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.pagination.js/2.1.6/pagination.css">

4.2 前端页面（index.html）#

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Spring + Mybatis + jQuery.Pagination.js 分页示例</title>
</head>
 
<body>
    <table id="userTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div id="pagination"></div>
 
    <script>
        $(function () {
            var pageSize = 5;
            var totalCount = 0;
 
            function loadUserList(pageNum) {
                $.ajax({
                    url: "/user/page",
                    type: "GET",
                    data: {
                        pageNum: pageNum,
                        pageSize: pageSize
                    },
                    success: function (data) {
                        var userList = data.userList;
                        totalCount = data.totalCount;
                        var tbody = $('#userTable tbody');
                        tbody.empty();
                        userList.forEach(function (user) {
                            tbody.append('<tr><td>' + user.id + '</td><td>' + user.username + '</td><td>' + user.age + '</td></tr>');
                        });
                        $('#pagination').pagination({
                            items: totalCount,
                            itemsOnPage: pageSize,
                            currentPage: pageNum,
                            prevText: '上一页',
                            nextText: '下一页',
                            onPageClick: function (pageNum) {
                                loadUserList(pageNum);
                            }
                        });
                    }
                });
            }
 
            loadUserList(1);
        });
    </script>
</body>
 
</html>

5. JsonConfig 的作用及使用#

5.1 JsonConfig 简介#

JsonConfig 是 Jackson 库中的一个类，用于配置 JSON 序列化和反序列化的规则。例如，可以配置日期格式、忽略某些字段等。

5.2 示例用法（在 Spring MVC 中配置）#

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
 
    @Override
    public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
        MappingJackson2HttpMessageConverter converter = new MappingJackson2HttpMessageConverter();
        ObjectMapper objectMapper = new ObjectMapper();
        JsonFactory jsonFactory = objectMapper.getFactory();
        JsonGenerator generator = jsonFactory.createGenerator(new StringWriter());
        JsonGenerator.Feature[] features = {JsonGenerator.Feature.QUOTE_FIELD_NAMES, JsonGenerator.Feature.WRITE_NUMBERS_AS_STRINGS};
        generator.configure(features, true);
        objectMapper.setSerializationInclusion(JsonInclude.Include.NON_NULL);
        objectMapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);
        converter.setObjectMapper(objectMapper);
        converters.add(converter);
    }
}

6. 完整示例代码#

7. 总结#

通过本文的介绍，我们了解了如何使用 Spring、Mybatis、jQuery.Pagination.js 和 JsonConfig 实现异步分页功能。在实际项目中，要注意以下几点：

  • 数据库优化：合理设计 SQL 语句，添加索引等优化查询性能。
  • 前端交互：处理好分页插件与后端数据的交互逻辑，提供良好的用户体验。
  • 异常处理：在后端和前端都要做好异常处理，防止系统崩溃。

参考#

2026-08