jquery中对于ul>li列表分页。学习记录

这个是很简单的一种分页，只能对列表进行分页。为了开发有可能需要用到记录下来

Html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>li文章分页</title>
    <script src="../../../project/HTML/Temporary/JS/jquery-3.2.1/jquery-3.2.1.min.js"></script>
    <script src="../../../project/HTML/Temporary/JS/pagenation.js"></script>
</head>
<body>
<ul id="all">
    <li>第1集</li>
    <li>第2集</li>
    <li>第3集</li>
    <li>第4集</li>
    <li>第5集</li>
    <li>第6集</li>
    <li>第7集</li>
    <li>第8集</li>
    <li>第9集</li>
    <li>第10集</li>
</ul>
<div class="page">
    <div id="page">

    </div>


</div>
<script>
    var zz=getzz()
    var pageno=1 ; //当前页
    var pagesize=5; //每页多少条信息
    if(zz.length%pagesize==0){
        var  pageall =zz.length/pagesize ;
    }else{
        var  pageall =parseInt(zz.length/pagesize)+1;
    }   //一共多少页
    change(1);
</script>
</body>
</html>

引入的pagenation文件里面其实就是两个函数：

function getzz() {
    var a = $("ul#all li");
    var zz =new Array(a.length);
    for(var i=0;i <a.length;i++){
        zz[i]=a[i].innerHTML;
    } //div的字符串数组付给zz
    return zz;
}
function change(e){
    debugger
    pageno=e;
    if(e<1){
        e=1;pageno=1;//就等于第1页 ， 当前页为1
    }
    if(e>pageall){  //如果输入页大于最大页
        e=pageall;pageno=pageall; //输入页和当前页都=最大页
    }
    $("#all").html("");//全部清空
    var html="";
    for(var i=0;i<pagesize;i++){
        html += '<li>' + zz[(e-1)*pagesize+i] +'</li>';//创建一页的li列表
        if(zz[(e-1)*pagesize+i+1]==null) break;//超出最后的范围跳出
    }
    $("ul#all").html(html);//给ul列表写入html
    var ye="";
    for(var j=1;j<=pageall;j++){
        if(e==j){
            ye=ye+"<span><a href='#' onClick='change("+j+")' style='color:#FF0000'>"+j+"</a></span> "
        }else{
            ye=ye+"<a href='#' onClick='change("+j+")'>"+j+"</a> "
        }
    }
    var pageContent="";
    pageContent +='第<span id=\"a2\">'+pageno+'</span>/';
    pageContent +='<span id="a1">'+pageall+'</span>页';
    pageContent +='<span id="a3">'+ye+'</span>';
    pageContent +='<a href="#" onClick="change(--pageno)">上一页</a>';
    pageContent +='<a href="#" onClick="change(++pageno)">下一页</a>';
    $("#page").html(pageContent);
}

 

posted @ 2017-07-11 17:14  jackche  阅读(5334)  评论(0)  编辑  收藏  举报