在html页面通过ajax分页显示用户信息 12

本文以ajax方式完成后台数据的分页查询和显示。

1、前提约束

2、技术选型

  • 前端分页插件jquery paginator
  • 前端模板技术 jquery-tmpl
  • 后端分页插件pagehelper

3、导入依赖的js、css

  • bootstrap.min.3.3.5.css
  • jquery-1.11.2.min.js
  • bootstrap.js
  • jquery.tmpl.js
  • jquery.pagination.js

4、在webapp下新建一个showstudents.html

<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.3.3.5.css"/>
    <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.js" type="text/javascript"></script>
    <script src="js/jquery.tmpl.js" type="text/javascript"></script>
    <script src="js/jquery.pagination.js" type="text/javascript"></script>
    <script type="text/javascript">
        var pageSize = 2;//设置每页显示条数
        //跳转到哪一页
        function loadPgae(pageNum) {
            $.ajax({
                type: "get",
                url: "student/query?pageSize=" + pageSize
                + "&pageNum=" + pageNum,
                async: false,
                dataType: "json",
                success: function (ObjData) {
                    build_page_info(ObjData);//显示内容
                    build_page_nav(ObjData);//分页展示
                }
            })
        }

        $(function () {
            loadPgae(1);//分页初始化
        })

        //构建表格
        function build_page_info(ObjData) {
            var lists = ObjData.data.list;
            $("#tbodyList").empty();
            $("#template1").tmpl(lists).appendTo("#tbodyList");
        }

        //构建分页栏
        function build_page_nav(result) {
            $("#page_nav_area").empty();
            var ul = $("<ul></ul>").addClass("pagination");
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
            var prePageLi = $("<li></li>").append($("<a></a>").append("«"));
            //当为第一页时，首页导航栏禁用
            if (result.data.hasPreviousPage == false) {
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            } else {
                firstPageLi.click(function () {
                    loadPgae(1);
                });
                prePageLi.click(function () {
                    loadPgae(result.data.pageNum - 1);
                });
            }
            var nextPageLi = $("<li></li>").append($("<a></a>").append("»"));
            var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
            //当为最后一页时，末页禁用
            if (result.data.hasNextPage == false) {
                nextPageLi.addClass("disabled");
                lastPageLi.addClass("disabled");
            } else {
                nextPageLi.click(function () {
                    loadPgae(result.data.pageNum + 1);
                });
                lastPageLi.click(function () {
                    loadPgae(result.data.pages);
                });
            }
            ul.append(firstPageLi).append(prePageLi);

            $.each(result.data.navigatepageNums, function (index, ele) {
                var navPageLi = $("<li></li>").append($("<a></a>").append(ele).attr("href", "#"));
                //让当前页码高亮显示
                if (result.data.pageNum == ele) {
                    navPageLi.addClass("active");
                }
                navPageLi.click(function () {
                    loadPgae(ele);
                });
                ul.append(navPageLi);
            });

            ul.append(nextPageLi).append(lastPageLi);
            var navPage = $("<nav></nav>").append(ul);
            navPage.appendTo("#page_nav_area");
        }
    </script>

</head>
<body>
    <table class="table">
        <caption>用户基本信息</caption>
        <thead>
        <tr>
            <th>id</th>
            <th>姓名</th>
        </tr>
        </thead>
        <tbody id="tbodyList">

        </tbody>
    </table>
    <div class="col-md-6">
        <nav aria-label="Page navigation" id="page_nav_area"></nav>
    </div>

    <script id="template1" type="text/x-jquery-tmpl">
        <tr>
            <td>{{= id}}</td>
            <td>{{= name}}</td>
        </tr>
    </script>
</body>
</html>

5、测试

打开浏览器，输入http://localhost:8088/showstudents.html
具体操作如下图所示：
1.gif
至此，我们完成了以解耦合【ajax】的方式将分页信息显示到页面。

posted @ 2020-03-27 15:22  张力的程序园  阅读(414)  评论(0)    收藏  举报