码迷,mamicode.com
首页 > Web开发 > 详细

使用js进行分页

时间:2016-01-21 10:40:19      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:

通过Ajax调用js方法进行局部刷新分页,大大减少性能消耗

下面是js代码,可封装成js文件

/**
 * 分页的改变
 * @param pageShowId    分页显示的id
 * @param i    (1 上一页,2 下一页,3 当前页,4 第一页)
 * @returns    操作过后的页数(当前页)
 */
function pageChange(pageShowId,i){
    if(i == 1){
        clickUp(pageShowId);
    }else if(i == 2){
        clickNext(pageShowId);
    }else if(i == 4){
        setPageNum(pageShowId, 1, 1);
    }
    var nowPage = getPageNum(pageShowId, 1);
    return nowPage;
}

/**
 * 点击上一页的时候触发
 */
function clickUp(pageShowId){
    var now = getPageNum(pageShowId,1);
    if(now==1){
        nowPage = 1;
    }else if(now>1){
        nowPage = parseInt(now) - 1;
    }
    setPageNum(pageShowId,1,nowPage);
}

/**
 * 点击下一页时触发
 * @param pageShowId
 * @returns
 */
function clickNext(pageShowId){
    var now = getPageNum(pageShowId,1);
    var all = getPageNum(pageShowId,2);
    if(now==all){
            nowPage = all;
    }else if(parseInt(now)<parseInt(all)){
        nowPage = parseInt(now) + 1;
    }else{
        nowPage = 1;
    }
    setPageNum(pageShowId,1,nowPage);
}

/**
 * 获取分页(pageShowId 显示分页的id,index 1为当前页,2为总页)
 */
function getPageNum(pageShowId,index){
    var pageText = $("#"+pageShowId+"").text();
    var strs= new Array(); //定义一数组 
    strs = pageText.split("/");
    if(index==1){
        return strs[0];
    }else if(index==2){
        return strs[1];
    }
}

/**
 * 设置分页(pageShowId 显示分页的id,index 1为当前页,2为总页,str 是要修改的字符串)
 */
function setPageNum(pageShowId,index,str){
    var pageText = $("#"+pageShowId+"").text();
    var strs= new Array(); //定义一数组 
    strs = pageText.split("/");
    if(index==1){
        //修改当前页
        $("#"+pageShowId+"").text(str+"/"+strs[1]);
    }else if(index==2){
        //修改总页
        $("#"+pageShowId+"").text(strs[0]+"/"+str);
    }
}

 

service实例代码

   /**
     * 礼品列表
     */
    public List<Object> list(int pageNow) {
        //每页显示条数
        int pageNum = 5;
        //开始条数
        int beginNum = (pageNow - 1) * pageNum;
        //查询
        List<Coupon> couponDataTotal = couponDataDao.list(beginNum, pageNum);
        //总条数
        int count = couponDataDao.countlist();
        //总页数
        int allPage = PageUtil.countPageByCountAndpageNum(count, pageNum);
        //数据集合
        List<Object> list = new ArrayList<Object>();
        list.add(couponDataTotal);
        list.add(allPage);
        return list;
    }

Ajax请求实例

//获取礼品统计列表
 function getCouponDataList(nowPage){
      $(".remove").remove();
      $.ajax({
            url:path + "/couponData/couponList",
            type:"POST",
            dataType: "json",
            data:{nowPage:nowPage},
            success:function(data){
      //设置分页 setPageNum(
"pageShow-up", 2, data[1]); var html = ‘‘; for(var i=0; i<data[0].length; i++){ var info = data[0][i]; html +=" <tr class=‘cl remove‘>" +" <td>"+info.title+"</td>" +" </tr>"; } $(".insert").append(html); }, error:function(e){ alert("错误"); } }); }

//上一页 1 下一页 2
function change(i){
var pageShowId = "pageShow-up";
var nowPage = pageChange(pageShowId, i);
getCouponDataList(nowPage);
};

html代码

 <span id="pageShow-up" class="btn_page">1/1</span>

以上大致就是全部代码

 

使用js进行分页

标签:

原文地址:http://www.cnblogs.com/angto64/p/5147378.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!