SSM框架的(CRUD)_查询_分页显示完整细节13

1、当前页面添加样式区别其它页码

$.each(result.extend.pageInfo.navigatepageNums, function(index,item) {
                var numLi = $("<li></li>").append($("<a></a>").append(item));
                if (result.extend.pageInfo.pageNum == item) {
                    numLi.addClass("active");
                }
                numLi.click(function() {
                    to_page(item);
                });
                ul.append(numLi);
            });

2、当有前一页，则可以点击，否则禁用

if(result.extend.pageInfo.hasPreviousPage == false){
    firstPageLi.addClass("disabled");
    prePageLi.addClass("disabled");
}

3、当有下一页，则可以点击，否则禁用

if(result.extend.pageInfo.hasNextPage == false){
    nextPageLi.addClass("disabled");
    lastPageLi.addClass("disabled");
}

4、将ajax请求封装成方法

//1、页面加载完成以后，直接去发送一个ajax请求，要到分页数据
        $(function() {
            //去首页
            to_page(1);
        });

        function to_page(pn) {
            $.ajax({
                url : "${APP_PATH}/emps",
                data : "pn=" + pn,
                type : "GET",
                success : function(result) {
                    //console.log(result)
                    //1、解析并显示员工数据
                    build_emps_table(result);
                    //2、解析并显示分页信息
                    build_page_info(result);
                    //3、解析显示分页条数据
                    build_page_nav(result);
                }
            });
        };

5、当点击分页num时，调用方法

numLi.click(function() {
    to_page(item);
});

6、每一次点击分页时，应先提前清空之前的数据

//清空table表格
$("#emps_table tbody").empty();
$("#page_info_area").empty();
$("#page_nav_area").empty();

7、为首页、上一页、下一页、末页添加点击事件

if (result.extend.pageInfo.hasPreviousPage == false) {
    firstPageLi.addClass("disabled");
    prePageLi.addClass("disabled");
} else {
    //为元素添加点击翻页的事件
    firstPageLi.click(function() {
        to_page(1);
    });
    prePageLi.click(function() {
        to_page(result.extend.pageInfo.pageNum - 1);
    });
}
if (result.extend.pageInfo.hasNextPage == false) {
    nextPageLi.addClass("disabled");
    lastPageLi.addClass("disabled");
} else {
    nextPageLi.click(function() {
        to_page(result.extend.pageInfo.pageNum + 1);
    });
    lastPageLi.click(function() {
        to_page(result.extend.pageInfo.pages);
    });
}

8、给分页插件配置合理化参数reasonable（低于第一页查第一页，超过末页查末页）

<plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor">
            <!-- 分页参数合理化 -->
            <property name="reasonable" value="true" />
        </plugin>
</plugins>