SSM框架的(CRUD)_查询_构建分页条12

• 分页信息以及分页条
  （1）为对应div元素添加ID

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

（2）请求成功后调用方法

success : function(result) {
    //console.log(result)
    //1、解析并显示员工数据
    build_emps_table(result);
    //2、解析并显示分页信息
    build_page_info(result);
    //3、解析显示分页条数据
    build_page_nav(result);
}

（3）创建方法

//解析显示分页信息
        function build_page_info(result) {
            $("#page_info_area").append(
                    "当前" + result.extend.pageInfo.pageNum + " 页,总"
                            + result.extend.pageInfo.pages + "页,总"
                            + result.extend.pageInfo.total + "条记录");
        };
        //解析显示分页条
        function build_page_nav(result) {
            //page_nav_area
            var ul = $("<ul></ul>").addClass("pagination");
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
            var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
            var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
            
            //添加首页和前一页 的提示
            ul.append(firstPageLi).append(prePageLi);
            
            //1,2,3遍历给ul中添加页码提示
            $.each(result.extend.pageInfo.navigatepageNums, function(index,item) {
                var numLi = $("<li></li>").append($("<a></a>").append(item));
                ul.append(numLi);
            });
            //添加下一页和末页 的提示
            ul.append(nextPageLi).append(lastPageLi);
            //把ul加入到nav
            var navEle = $("<nav></nav>").append(ul);
            navEle.appendTo("#page_nav_area");
        };