前端的一个分页写法

Posted 2020-08-20 猿猴张

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端的一个分页写法相关的知识，希望对你有一定的参考价值。

<!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>我的分页</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var pageArray = [];

    var liCount = $(‘li‘).length;//获取获取记录条数
    var PageSize  = 10;//设置每页，你准备显示几条
    var PageCount  = Math.ceil(liCount/PageSize);//计算出总共页数
    var currentPage = 1;//设置当前页
    
    var i=0;
    for(i=1; i<=PageCount; i++){
        $(‘<a href="#" pageNum="‘+i+‘" >第‘+i+‘页</a>‘).appendTo(‘#pageIt‘);//显示分页按钮
    }
    
    var $li =  $(‘li‘);
    $li.each(function(){
        pageArray.push(this);
    });
    
    for(i=0;i<10;i++){
        $(‘#pagingList‘).append(pageArray[i]);
    }
    
    function showPage(whichPage){
        $(‘#pagingList‘).html(‘‘);
        for(i = (whichPage-1)*10; i < 10*whichPage ; i++){
            $(‘#pagingList‘).append(pageArray[i]);
        }
    }
    var a;
    $(‘a‘).click(function(){
        a = $(this).attr(‘pagenum‘);
        showPage(a);
    })
    
    debugger;
});
</script>
</head>

<body>
<div id="pageIt" ></div>
<div id="pagingList"></div>
<br /><br /><br /><br /><br />
<ul id="list" >

<li class="mm">美女A</li>
<li class="gg">帅哥A</li>
<li class="mm">美女B</li>
<li class="gg">帅哥B</li>
<li class="mm">美女C</li>
<li class="gg">帅哥C</li>
<li class="mm">美女D</li>
<li class="gg">帅哥D</li>
<li class="mm">美女E</li>

<li class="gg">帅哥E</li>
<li class="mm">美女F</li>
<li class="gg">帅哥F</li>
<li class="mm">美女G</li>
<li class="gg">帅哥G</li>
<li class="mm">美女H</li>
<li class="gg">帅哥H</li>
<li class="mm">美女A</li>
<li class="gg">帅哥A</li>

<li class="mm">美女B</li>
<li class="gg">帅哥B</li>
<li class="mm">美女C</li>
<li class="gg">帅哥C</li>
<li class="mm">美女D</li>
<li class="gg">帅哥D</li>
<li class="mm">美女E</li>
<li class="gg">帅哥E</li>
<li class="mm">美女F</li>

<li class="gg">帅哥F</li>
<li class="mm">美女G</li>
<li class="gg">帅哥G</li>
<li class="mm">美女H</li>
<li class="gg">帅哥H</li>
<li class="mm">美女A</li>
<li class="gg">帅哥A</li>
<li class="mm">美女B</li>
<li class="gg">帅哥B</li>

<li class="mm">美女C</li>
<li class="gg">帅哥C</li>
<li class="mm">美女D</li>
<li class="gg">帅哥D</li>
<li class="mm">美女E</li>
<li class="gg">帅哥E</li>
<li class="mm">美女F</li>
<li class="gg">帅哥F</li>
<li class="mm">美女G</li>

<li class="gg">帅哥G</li>
<li class="mm">美女H</li>
<li class="gg">帅哥H</li>
<li class="mm">美女A</li>
<li class="gg">帅哥A</li>
<li class="mm">美女B</li>
<li class="gg">帅哥B</li>
<li class="mm">美女C</li>
<li class="gg">帅哥C</li>

<li class="mm">美女D</li>
<li class="gg">帅哥D</li>
<li class="mm">美女E</li>
<li class="gg">帅哥E</li>
<li class="mm">美女F</li>
<li class="gg">帅哥F</li>
<li class="gg">帅哥G</li>
<li class="gg">帅哥H</li>
<li class="gg">帅哥G</li>

</ul>
</body>
</html>

以上是关于前端的一个分页写法的主要内容，如果未能解决你的问题，请参考以下文章

bladex中自定义分页的写法~

es6的一些简洁写法（代码优化）

Java33分页处理

Mybatis中实现mysql分页写法！！注意

片段被视图分页器布局切割

在html中分页加查询打卡信息条件前端怎么写