SSM AJAX 分页

    <nav aria-label="Page navigation">
        <div class="span7">
            <%--===分页条开始==================--%>
<%--            <div class="pagination">--%>
<%--                <div id="pageinfo"></div>--%>
<%--            </div>--%>

            <div class="pagination" style="padding-left: 404px;">
                <ul id="page_nav" class="pagination">

                </ul>
            </div>
        </div>

<script type="text/javascript">
        $(function () {
            to_page(1);

        });
        function to_page(pn) {
            var data = {};
            data.deptNo = $("#Dept").val();
            data.eStateNo = $("#eState").val();
            data.empName = $("#eName").val();
            data.pageNum = pn;
            $.ajax({
                url: "emp/queryByMore.do",
                data: data,
                dataType: "json",
                type: "get",
                success: function (resp) {
                    build_table(resp);
                    build_pageinfo(resp);
                    build_page_nave(resp);
                }
            });
        }
        function build_table(resp) {
            $("#gbys tbody").empty();
            var temp = "<thead><tr><th>" +
                "<div class='layui-unselect header layui-form-checkbox' lay-skin='primary'><i class='layui-icon'>&#xe605;</i></div>"
                + "</th>"
                + "<th style='text-align: center'>工号</th>"
                + "<th style='text-align: center'>姓名</th>"
                + "<th style='text-align: center'>性别</th>"
                + "<th style='text-align: center'>年龄</th>"
                + "<th style='text-align: center'>手机号码</th>"
                + "<th style='text-align: center'>职位</th>"
                + "<th style='text-align: center'>部门</th>"
                + "<th style='text-align: center'>就职状态</th>"
                + "<th style='text-align: center'>操作"
                + "</th></tr></thead>";
            $.each(resp.list, function (i, v) {
                temp += "<tbody><tr><td>"
                    + "<div class='layui-unselect layui-form-checkbox' lay-skin='primary' data-id='2'><i class='layui-icon'>&#xe605;</i></div>" +
                    "</td>" +
                    "<td>" + v.empNo + "</td>" +
                    "<td>" + v.empName + "</td>" +
                    "<td>" + v.empSex + "</td>" +
                    "<td>" + v.empAge + "</td>" +
                    "<td>" + v.empPhone + "</td>" +
                    "<td>" + v.empJob + "</td>" +
                    "<td>" + v.deptName + "</td>" +
                    "<td>" + v.estate + "</td>" +
                    "<td>" +
                    "<a style='text-decoration: none;cursor: pointer' onclick=x_admin_show('更新员工','emp/updateEmployee.do?empNo=" + v.empNo + "')>更新</a>" +
                    "</td></tr></tbody>";
            })

            $("#gbys").empty();
            $("#gbys").append(temp);
            bianse();
        }
        function build_pageinfo(resp) {
            //  当前pageinfo.pageNum}页,
            //共pageinfo.pages}页,
            //共pageinfo.total}条记录
            $("#pageinfo").empty();

            $("#pageinfo")
                .append("当前第" + resp.pageNum + "页，" +
                    "共" + resp.pages + " 页，" +
                    "共" + resp.total + "条记录")
        }
        function build_page_nave(resp) {
            $("#page_nav").empty();

            var firstPage = $("<li></li>")
                .append($("<a></a>")
                    .append("首页")
                    .attr("href", "#"));

            var lastPage = $("<li></li>")
                .append($("<a></a>")
                    .append("尾页")
                    .attr("href", "#"));

            var prePage = $("<li></li>")
                .append($("<a></a>")
                    .append("Prev")
                    .attr("href", "#"));
            var nextPage = $("<li></li>")
                .append($("<a></a>")
                    .append("Next")
                    .attr("href", "#"));
            if (resp.hasPreviousPage == false) {
                firstPage.addClass("disabled");
                prePage.addClass("disabled");
            } else {

                //首页的点击事件
                firstPage.click(function () {
                    to_page(1);
                });

                //Prev的点击事件
                prePage.click(function () {
                    to_page(resp.pageNum - 1);
                });
            }
            if (resp.hasNextPage == false) {
                lastPage.addClass("disabled");
                nextPage.addClass("disabled");
            } else {
                //Next的点击事件
                nextPage.click(function () {
                    to_page(resp.pageNum + 1);
                });

                //尾页的点击事件
                lastPage.click(function () {
                    to_page(resp.pages);
                });
            }
            $("#page_nav")
                .append(firstPage)
                .append(prePage);
            $.each(resp.navigatepageNums, function (index, item) {

                var numli = $("<li></li>")
                    .append($("<a></a>")
                        .append(item)
                        .attr("href", "#"));
                if (resp.pageNum == item) {
                    numli.addClass("active");
                }
                numli.click(function () {
                    to_page(item);
                });

                $("#page_nav").append(numli);
            });
            $("#page_nav").append(nextPage)
                .append(lastPage);
        }
    </script>

 

    </nav>