jquery分页动态

最新推荐文章于 2022-04-15 09:31:17 发布

communal

最新推荐文章于 2022-04-15 09:31:17 发布

阅读量119

点赞数

分类专栏： JS JavaScript

本文链接：https://blog.csdn.net/yan072201/article/details/102619643

版权

JS JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>动态分页</title>
</head>

<body>
   <div class="layui-box layui-laypage layui-laypage-molv" id="layui-laypage-1" style="margin-top: 10px;font-size: 14px">
       <span class="layui-laypage-limits">
           <select lay-ignore="" style="height: 25px" class="pageSizeSelect">
               <option value="10" selected >10 条/页</option>
               <option value="20">20 条/页</option>
               <option value="30">30 条/页</option>
               <option value="40">40 条/页</option>
               <option value="50">50 条/页</option>
           </select>
       </span>

       <a href="javascript:" class="layui-laypage-first" data-page="0">首页</a>
       <a href="javascript:" class="layui-laypage-pre" data-page="2">上一页</a>
       <a href="javascript:" class="layui-laypage-next" data-page="2">下一页</a>
       <a href="javascript:" class="layui-laypage-last" data-page="2">末页</a>
       <span class="layui-laypage-count">共 120 条</span>
   </div>
</body>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   var currentPage = 1;//当前页
   var pageSize = 10;//每页条数
   var total = 135;//总条数
   var totalsize = 1;//总页数
   var showPageSize = 5;//一共显示几个页码

   //初始化页码
   $(function() {
   sufa();
   })

   //设置页码的索引单击事件
   $(".layui-box").delegate(".pageNumber","click",function () {
       var no = parseInt($(this).attr("data"));
       currentPage = no;
       sufa();
   })

   //每页条数变更
$(".pageSizeSelect").on('change',function(){
       pageSize = parseInt($(this).find("option:selected").val());
       currentPage = 1;
       sufa();
})

   //第一页
   $(".layui-laypage-first").on('click',function(){
       if(currentPage != 1) {
           currentPage = 1;
       sufa();
       }
})

   //上一页
   $(".layui-laypage-pre").on('click',function(){
       if(currentPage != 1) {
           currentPage = currentPage-1;
       sufa();
       }
})

   //下一页
   $(".layui-laypage-next").on('click',function(){
       if(currentPage != totalsize) {
           currentPage = currentPage+1;
       sufa();
       }
})

   //末页
   $(".layui-laypage-last").on('click',function(){
       if(currentPage != totalsize) {
           currentPage = totalsize;
       sufa();
       }
})

   function sufa() {
       var aa = [];//页码集合
       aa.push(currentPage);
       totalsize = Math.ceil(total/pageSize);//总页数
       for(var i=1 ;i<showPageSize;i++) {
           var a= currentPage+i;
           var b= currentPage-i;
           if(aa.length < showPageSize) {
               if(a<=totalsize) aa.push(a);//添加当前页右边页码
               if(b>0) aa.push(b);//添加当前页左边页码
           }
       }
       aa.sort(function compare(val1,val2){return val1-val2;});

       var content = "";
       for(var i=0 ;i<aa.length;i++) {
           if(aa[i] == currentPage) {
               content += "<a class=\"pageNumber aaa\" href='#' data='"+aa[i]+"'>"+aa[i]+"</a>";
           }else {
               content += "<a class=\"pageNumber\" href='#' data='"+aa[i]+"'>"+aa[i]+"</a>";
           }
       }
$(".pageNumber").remove();//清除所有旧页码
       $(".layui-laypage-pre").after(content);//添加新页码
   }
})
</script>

<style>
   .layui-box a {
       padding: 5px 10px;
       text-decoration-line:none;
       background-color: #f4f4f5;
       margin-left: 5px;
       color: #606266;
       border-radius: 2px;
   }

   .layui-box .aaa {
       background-color: #58C7C7;
       color: #fff;
   }
</style>
</html>