<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入jq--> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <!--引入bootstrap--> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script> <style> *{ padding: 0; margin: 0; list-style: none; } .main{ width: 500px; margin:0 auto; } .main>ul>li{ width: 500px; height: 80px; border-bottom: 1px solid #666; text-align: center; line-height: 80px; } .disabled{ cursor: not-allowed; } </style> </head> <body> <div class="main"> <ul> <li> <p>这是1个</p> </li> <li> <p>这是2个</p> </li> <li> <p>这是3个</p> </li> <li> <p>这是4个</p> </li> <li> <p>这是5个</p> </li> <li> <p>这是6个</p> </li> <li> <p>这是7个</p> </li> <li> <p>这是8个</p> </li> <li> <p>这是9个</p> </li> <li> <p>这是10个</p> </li> <li> <p>这是11个</p> </li> <li> <p>这是12个</p> </li> <li> <p>这是13个</p> </li> <li> <p>这是14个</p> </li> <li> <p>这是15个</p> </li> <li> <p>这是16个</p> </li> <li> <p>这是17个</p> </li> <li> <p>这是18个</p> </li> <li> <p>这是19个</p> </li> <li> <p>这是20个</p> </li> </ul> <!--bootstrap 生成的分页--> <nav aria-label="Page navigation"> <ul class="pagination"> <li id="last"> <a href="javascript:void(0);" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <!--伪代码--> <!--<li id="firstPage"><a href="#" >1</a></li>--> <!--<!–<li><a href="#">2</a></li>–>--> <!--<li><a href="#">3</a></li>--> <!--<li><a href="#">4</a></li>--> <!--<li><a href="#">5</a></li>--> <li id="next"> <a href="javascript:void(0);" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </div> </body> <script> /*** * 渲染页面 * 动态创建底部分页的li * 给li绑定点击事件 点击到哪一页就展示哪一页的内容 * 设置上翻一页 下翻一页 */ var ul=$(".main>ul"); var lis=ul.children(); var allColum=lis.length;//总数 var onlyPage=8;//每一个的个数 var pages=Math.ceil(allColum/onlyPage)//总页数 var currentPage=1//当前页面 //动态创建底部分页的li for(var i=pages-1;i>=0;i--){ var li= $("<li class='num'><a href='javascript:void(0)'>"+(i+1)+"</a></li>") $("#last").after(li) } // 渲染页面 render(lis,onlyPage,pages,currentPage) function render(lis,onlyPage,pages,currentPage) { for(var j=1;j<=pages;j++){ if(currentPage==j) { for (var i = 0; i < lis.length; i++) { lis[i].style.display="block"; if(i<(currentPage-1)*onlyPage || i>currentPage*onlyPage-1){ lis[i].style.display="none"; } } } } } //给所有的a绑定点击事件 var as=$(".num") for (var i = 0; i < as.length; i++) { as[i].index=i; as[i].onclick=function () { currentPage=this.index+1 render(lis,onlyPage,pages,currentPage) } } // 设置上翻一页 下翻一页 //上翻一页 最前一页禁用 $("#last").click(function () { currentPage--; if(currentPage<=1){ $(this).addClass("disabled") } render(lis,onlyPage,pages,currentPage) }) // 下翻一页 最后一页禁用 $("#next").click(function () { currentPage++; if(currentPage>=pages){ $(this).addClass("disabled") } render(lis,onlyPage,pages,currentPage) }) </script> </html>
jQuery写的一个分页展示的demo(结合bootstrap)
最新推荐文章于 2021-01-05 10:18:29 发布