翻页的js比

原创 1020005941 随笔 js 377阅读 2017-06-15 09:15:36 举报

<!--creat by zhuangjunkun 2017-6-14-->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>angular</title>
<style type="text/css">
.p-wrap{width: 800px;height: auto;margin: 0 auto;background: #000000;}
.p-item{display: block;width: 50%;margin:0 auto;margin-bottom:10px; text-align: center;background: red;height: 40px;line-height: 40px;}
</style>
</head>
<body>
<div class='p-wrap'>
<span class="p-item">测试1</span>
<span class="p-item">测试2</span>
<span class="p-item">测试3</span>
<span class="p-item">测试4</span>
<span class="p-item">测试5</span>
<span class="p-item">测试6</span>
<span class="p-item">测试7</span>
<span class="p-item">测试8</span>
<span class="p-item">测试9</span>
<span class="p-item">测试10</span>
<span class="p-item">测试11</span>
</div>
<div style="text-align: center;">
<button class="pre">上一页</button>
<span class="pageBox">1/1</span>
<button class="aft">下一页</button>
</div>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>;

<script type="text/javascript">

// var h=$('.p-item').prop('outerHTML')

//分页

//显示容器 以及 每页显示条数  
//参数:外容器,每页显示数目,前后按钮,页码显示,页码显示容器
/*type 参数 1,2 对应两种分页实现类型
 *current 此参数,在类型为2时有效, current=2 则显示最后一页,其他值则显示第一页
 *pWrap   容器
 *limit   每页显示数量
 *obj     数据对象
 *preBtn  上一页按钮
 *aftBtn  下一页按钮
 *pageBox  页码显示
 */
function pagenation(type,current,pWrap,limit,obj,preBtn,aftBtn,pageBox){

    var pWrap=$(pWrap),
        itemList= pWrap.find(obj),
        preBtn=$(preBtn),
        aftBtn=$(aftBtn),
        currentPage=0,
        type=type,
        pageBox=$(pageBox),
        pLimit=parseInt(limit);

//数量小于limit不做处理

        if(itemList.length<=pLimit){
            return false;
        }

//页数向上取整

    var page=Math.ceil(itemList.length/pLimit);

//类型1 数据全部查出来,清空列表在显示  适用于总数开始已知
//类型2 数据不清空,隐藏方式。适用于数量递增的,总数变化
if(type==1){
    //获取所有的数据,每limit数 分一组
    var aPage=new Array();
    var pageHtmlList=new Array();
    var pageHtml='';
        for(var i=0;i<page;i++){

            var s=pLimit*i,e=pLimit*(i+1);
                pageHtml='';

            aPage[i]=itemList.slice(s,e);

            for(var j=0;j<pLimit;j++){
                if($(aPage[i][j]).prop('outerHTML')!=undefined){
                    pageHtml=pageHtml+$(aPage[i][j]).prop('outerHTML');
                }
            }
//每页数据封存 在pageHtmlList 数组里
            pageHtmlList[i]=pageHtml;
        }
//处理显示,默认显示第一页内容
        pWrap.empty().append(pageHtmlList[currentPage])
        pageBox.text((currentPage+1)+'/'+page)

//上一页           
        preBtn.click(function(){
            if(currentPage==0){return false;}
            currentPage--;
            pWrap.empty().append(pageHtmlList[currentPage]);
            pageBox.text((currentPage+1)+'/'+page)
        })
//下一页
        aftBtn.click(function(){
            if(currentPage==page-1){return false;}
            currentPage++;
            pWrap.empty().append(pageHtmlList[currentPage]);
            pageBox.text((currentPage+1)+'/'+page)
        })
}

if(type==2){
//获取所有的数据,每limit数 分一组
    var aPage=new Array();
        for(var i=0;i<page;i++){

            var s=pLimit*i,e=pLimit*(i+1);

            aPage[i]=itemList.slice(s,e);

        }
//处理显示

//current=2,显示第后一页内容
if(current==2){
pWrap.find(obj).hide();
currentPage=page-1;
for(var i=0;i<pLimit;i++){
$(aPage[currentPage][i]).show();
}
pageBox.text(page+'/'+page)
}else{
pWrap.find(obj).hide();
for(var i=0;i<pLimit;i++){
$(aPage[currentPage][i]).show();
}
pageBox.text((currentPage+1)+'/'+page)
}

//上一页           
        preBtn.click(function(){
            if(currentPage==0){return false;}
            currentPage--;
            pWrap.find(obj).hide();
            for(var i=0;i<pLimit;i++){
            $(aPage[currentPage][i]).show();
        }
            pageBox.text((currentPage+1)+'/'+page)
    })
//下一页
        aftBtn.click(function(){
            if(currentPage==page-1){return false;}
            currentPage++;
            pWrap.find(obj).hide();

            for(var i=0;i<pLimit;i++){
            $(aPage[currentPage][i]).show();
        }
            pageBox.text((currentPage+1)+'/'+page)
    })
}

}

//类型1
// pagenation(1,2,'.p-wrap',5,'.p-item','.pre','.aft','.pageBox');
//类型2
pagenation(2,1,'.p-wrap',5,'.p-item','.pre','.aft','.pageBox');
</script>

</body>
</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复