ssm框架实现分页JavaScript

在SSM框架中，使用JavaScript实现分页的方法如下：

1. 在页面中添加分页所需的HTML元素，如下：

<div id="pageDiv">
    <ul class="pagination">
        <li><a href="javascript:void(0);" onclick="toPage(1)">首页</a></li>
        <li><a href="javascript:void(0);" onclick="toPage(pageNum-1)">上一页</a></li>
        <li><a href="javascript:void(0);" onclick="toPage(pageNum+1)">下一页</a></li>
        <li><a href="javascript:void(0);" onclick="toPage(pages)">末页</a></li>
    </ul>
</div>

其中，toPage函数用于跳转到指定的页码，pageNum表示当前页码，pages表示总页数。

2. 在页面中添加JavaScript代码，用于发送分页请求，如下：

<script type="text/javascript">
    // 分页请求函数
    function toPage(pageNum) {
        // 发送分页请求
        $.ajax({
            url: "/user/list",
            type: "get",
            data: {pageNum: pageNum},
            success: function (data) {
                $("#tableDiv").html(data);
            }
        });
    }
</script>

其中，$.ajax()函数用于发送分页请求，url表示请求的URL地址，type表示请求的方式，data表示请求的参数，success表示请求成功后的回调函数，data表示服务器返回的数据，将其填充到表格中即可。

3. 在Controller中添加分页查询的方法，并返回分页结果，如下：

@RequestMapping("/list")
public String list(@RequestParam(defaultValue = "1") Integer pageNum,
                   @RequestParam(defaultValue = "10") Integer pageSize,
                   Model model) {
    // 查询数据
    List<User> userList = userService.getUserList(pageNum, pageSize);
    // 封装分页对象
    PageInfo<User> pageInfo = new PageInfo<>(userList);
    // 将分页对象和数据传递给页面
    model.addAttribute("pageInfo", pageInfo);
    model.addAttribute("userList", userList);
    return "user/list_table";
}

其中，getUserList方法用于查询数据，PageInfo对象用于封装分页信息，将其传递给页面即可。

4. 在页面中添加表格元素，用于显示分页数据，如下：

<div id="tableDiv">
    <table class="table table-bordered table-hover">
        <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        </thead>
        <tbody>
        <!-- 使用Thymeleaf循环遍历用户列表 -->
        <tr th:each="user : ${userList}">
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.age}"></td>
        </tr>
        </tbody>
    </table>
</div>

其中，使用Thymeleaf循环遍历用户列表，并将查询到的用户数据填充到表格中。

以上就是使用JavaScript实现分页查询的方法，该方法可以自由控制分页请求，实现灵活性较高。