（参考案例）利用Jquery，Ajax请求分页查询，给分页按钮绑定单机事件时点击跳转仅显示第一页数据的可能原因之一。

最新推荐文章于 2022-12-08 09:31:37 发布

小新o

最新推荐文章于 2022-12-08 09:31:37 发布

阅读量317

点赞数

文章标签： ajax jquery javascript html

本文链接：https://blog.csdn.net/zoyu45/article/details/120476360

版权

利用Jquery，Ajax请求分页查询，给分页按钮绑定单机事件时点击跳转仅显示第一页数据的可能原因之一：Ajax请求的data参数写错了，就会默认显示第一页：

参考参数：

 $.ajax({
            url: "${APP_PATH}/emps",
            data: "pn="+pn,
            type: "GET",
            success: function (result) {
                }

参考案例

<%--
  Created by IntelliJ IDEA.
  User: zoyu
  Date: 2021/9/24
  Time: 19:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>

    <title>员工列表</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <%--引入jQuery--%>
    <script TYPE="text/javascript" src="${APP_PATH}/static/js/jquery-1.12.4.min.js"></script>
    <%--引入样式--%>
    <link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js" rel="stylesheet">


</head>
<body>
<%--    搭建显示页面--%>
<div class="container">
    <%--标题--%>
    <div class="row">
        <div class="col-md-12">
            <h1>SSM-CRUD</h1>
        </div>
    </div>
    <%--按钮--%>
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary">新增</button>
            <button class="btn btn-danger">删除</button>
        </div>
    </div>
    <%--显示表格数据--%>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="emps_table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>empName</th>
                        <th>gender</th>
                        <th>email</th>
                        <th>deptName</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>

            </table>
        </div>
    </div>

    <%--显示分页信息--%>
    <div class="row">
        <%--分页文字信息--%>
        <div class="col-md-6" id="page_info_area">
        </div>
        <%--分页条信息--%>
        <div class="col-md-6" id="page_nav_area">
        </div>
    </div>
</div>


<script type="text/javascript">
    //1.页面加载完成以后,直接发送ajax请求要到分页数据
    $(function () {
        //去首页
        to_page(1);
    });
    
    function to_page(pn) {
        $.ajax({
            url: "${APP_PATH}/emps",
            data: "pn="+pn,
            type: "GET",
            success: function (result) {
                //解析列表信息
                build_emps_table(result);
                //解析分页显示数据
                build_page_info(result);
                //解析分页条信息
                build_page_nav(result);
            }
        });
    }

    //解析列表信息
    function build_emps_table(result) {
        $("#emps_table tbody").empty();
        var emps = result.extend.pageInfo.list;
        $.each(emps, function (index, item) {
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);
            var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");
            var emailTd = $("<td></td>").append(item.email);
            var deptNameTd = $("<td></td>").append(item.department.deptName);
            var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm")
                .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
            var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
            var btnTd = $("<td></td>").append(editBtn).append("  ").append(delBtn);
            $("<tr></tr>").append(empIdTd).append(empNameTd).append(genderTd)
                .append(emailTd).append(deptNameTd).append(btnTd).appendTo("#emps_table tbody");
        });
    }
    //解析显示分页信息
    function build_page_info(result) {
        //page_info_area
        $("#page_info_area").empty();
        var pageInfo = result.extend.pageInfo;
        //当前第 页,共 页,总记录数 条
        $("#page_info_area").append("当前第 " + pageInfo.pageNum + " 页,共 "
            + pageInfo.pages + " 页,总记录数 " + pageInfo.total + " 条");
    }
    //解析分页条信息
    function build_page_nav(result) {
        //page_nav_area
        $("#page_nav_area").empty();
        var ul = $("<ul></ul>").addClass("pagination");
        //page_nav_area
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
        if (result.extend.pageInfo.hasPreviousPage == false){
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        }

        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
        if (result.extend.pageInfo.hasNextPage == false){
            lastPageLi.addClass("disabled");
            nextPageLi.addClass("disabled");
        }

        ul.append(firstPageLi).append(prePageLi);
        //1,2,3,4,5
        $.each(result.extend.pageInfo.navigatepageNums,function (index, item) {
            var pageNavLi = $("<li></li>").append($("<a></a>").append(item));
            if(result.extend.pageInfo.pageNum == item){
                pageNavLi.addClass("active");
            }
            pageNavLi.click(function () {
                to_page(item);
                console.log(item);
            });
            ul.append(pageNavLi);
        });

        ul.append(nextPageLi).append(lastPageLi).appendTo("#page_nav_area");

    }

</script>
</body>
</html>

小新o

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（参考案例）利用Jquery，Ajax请求分页查询，给分页按钮绑定单机事件时点击跳转仅显示第一页数据的可能原因之一。

利用Jquery，Ajax请求分页查询，给分页按钮绑定单机事件时点击跳转仅显示第一页数据的可能原因之一：Ajax请求的data参数写错了，就会默认显示第一页：参考参数： $.ajax({ url: "${APP_PATH}/emps", data: "pn="+pn, type: "GET", success: function (result) { }...
复制链接

扫一扫