代码&优雅着&生活

导航

PageInfo 前台分页js,带分页栏

在使用mybatis3,并且使用分页,PageHelper 接口,分页还是很好使用的。使用pageInfo的后台分页接口。

/**
 * 
 * @param switchPage方法,切换页码方法
 * 
 * function switchPage(pageNum){
        $("input[name='pageNum']").val(pageNum);
         $("#blgTable tr:gt(0)").remove();
        getLuoJiaoDianResult();
        
    }
 * 
 * @getResult() 获取结果集方法
 * 
 * function getLuoJiaoDianResult(){
        var dat=serializeObject("#dizhi");
        $.post("${BASE_PATH}dz/list",dat,function(data){
            $("#blgTable tr:gt(0)").remove();
                var option="";
                if(data.list.length==0){
                    option+="<tr><td colspan='6'> 没有符合条件的查询结果!</td></tr>"
                        
                }else{
                    $(data.list).each(function(i){
                        if(this.fenquzhihuibu==null){
                            this.fenquzhihuibu="";
                        }
                        if(this.paichusuo==null){
                            this.paichusuo="";
                        } 
                        
                        if(i%2==0){
                            option+="<tr style='background:rgb(243, 248, 251)'>";
                        }else{
                            option+="<tr style='background:rgb(226, 237, 247)'>";
                        }
                        option+="<td>"+this.xingming+"</td><td>"+
                        this.shenfenzheng+"</td><td>"+this.dizhi+"</td><td> "+
                        this.fenquzhihuibu+" </td><td>"+this.paichusuo+"</td><td><a onclick=selectPersonInfo('"+this.personid+"') >详情</a></td></tr>";
                        
                    });
                    }
                    pageInfoBar(data,"pagebar");
                    $("#blgTable").append(option);
                
            },"json");
    }
 * 
 * 
 * 
 * 获取分页导航条
 * @param pageInfo 
 * @param barDivId
 */
function pageInfoBar(pageInfo, barDivId) {
    var barDiv = $("#" + barDivId);
    var context = "<span>当前页:" + pageInfo.pageNum + "&nbsp;总页数:"
            + pageInfo.pages + "&nbsp;&nbsp;总记录数:"+pageInfo.total+"</span>";
    context += "<div class='query-content-page-btn'><ul>";
    if (pageInfo.pageNum > 1) {
        context += "<li class='prev-next' onclick=switchPage('"
                + pageInfo.prePage + "')>上一页</li>";
    }
    for (var i = 0; i < pageInfo.navigatepageNums.length; i++) {
        if (pageInfo.pageNum == pageInfo.navigatepageNums[i]) {
            context += "<li class='query-content-page-cur' onclick=switchPage('"
                    + pageInfo.navigatepageNums[i]
                    + "')>"
                    + pageInfo.navigatepageNums[i] + "</li>"
        } else {
            context += "<li onclick=switchPage('"
                    + pageInfo.navigatepageNums[i] + "')>"
                    + pageInfo.navigatepageNums[i] + "</li>"
        }

    }

    if (pageInfo.pageNum < pageInfo.pages) {
        context += "<li class='bus-border-right prev-next' onclick=switchPage('"
                + pageInfo.nextPage + "')>下一页</li>";
    }
    context += "</ul></div>";
    barDiv.html(context);
}

 

posted on 2015-09-24 14:43  幸运的凌人  阅读(4125)  评论(0编辑  收藏  举报