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);

}

巴特西

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

最新文章

热门文章