js 实现的前端分页功能

<!DOCTYPE html>
<html>
  <head>
    <title>t.html</title>
    <meta name="content-type" content="text/html; charset=GB2312">
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <script src="js/jquery.js" ></script>
  </head>
  <style>
      span{
          margin-right:10px;
      }
  </style>
<body>
    <div id="demo">
        <ul id='id1'>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
        <div id='skip'></div>
    </div>
</body>
  <script type="text/javascript">
    var pagesize = 5;
    var arr = [],use=false;
    function pager(id,page,pagesize,skipid){
        console.log(page)
        if(!use){
            $(id+">li").each(function(i){
                arr.push($(this).html());
            });
            use = true;
        }
        console.log(arr);
        var count = arr.length;
        var pagecount = Math.ceil(count/pagesize);
        $(id).html("");
        if(page<1)
            page = 1;
        if(page > pagecount)
            page = pagecount;
        var content = "";
        for(var i=(page*pagesize-pagesize);i<(page*pagesize>count?count:page*pagesize);i++){
            content += "<li>"+arr[i]+"</li>"
        }
        console.log(content);
        $(id).html(content);
        var ye = "";
        for(var j=0;j<pagecount;j++){
            ye += "<span><a href='#' onclick=pager('"+id+"',"+(j+1)+","+pagesize+",'"+skipid+"')>"+(j+1)+"</a></span>";
        }
        var contents = "<span>共"+pagecount+"页/第"+page+"页</span>";
        contents += "<span>"+ye+"</span>";
        contents += "<span><a href='#' onclick=pager('"+id+"',"+(page-1)+","+pagesize+",'"+skipid+"')>&lt;&lt;</a></span>";
        contents += "<span><a href='#' onclick=pager('"+id+"',"+(page+1)+","+pagesize+",'"+skipid+"')>&gt;&gt;</a></span>";
        $(skipid).html(contents);
    }
    pager("#id1",0,pagesize,"#skip");
  </script>
</html>
js 实现的前端分页功能

猜你喜欢
