首页 > Web开发 > 详细

PageInfo 前台分页js,带分页栏

时间:2015-09-24 16:05:41      阅读:261      评论:0      收藏:0      [点我收藏+]

在使用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);
}

 

PageInfo 前台分页js,带分页栏

原文:http://www.cnblogs.com/sloveling/p/Page_info.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!