基于jquery.pagination.js前端实现分页功能（假分页）

最新推荐文章于 2024-08-10 08:26:26 发布

weixin_39407291

最新推荐文章于 2024-08-10 08:26:26 发布

阅读量1.2k

点赞数

文章标签： jquery.pagination.js

今天在项目中遇到后台把数据全部返回未作分页处理的情况，遂研究了一下纯前端实现分页功能的方法，项目已引入插件jquery.pagination.js，插件功能文章中不再赘述，有兴趣可阅读博客：
https://www.cnblogs.com/aiiright/p/6734384.html
https://blog.csdn.net/m0_38082783/article/details/73737283
本文开发时需引用js文件：

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <script src="http://106.2.44.116/src/javascript/base/jquery.pagination.js"></script>

demo全部代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
       　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="http://106.2.44.116/src/javascript/base/jquery.pagination.js"></script>
        <style>
            #con{
                width:100%;
            }
            .conDv{
                width:200px;
                height:300px;
                float:left;
            }
            .conDv .pic,.conDv .name,.conDv .number,.conDv .section{
                width:100%;
                height:20px;
                text-align:center;
                line-height:20px;
            }
            .box{
                position: absolute;
                bottom:630px;
                left:40px;
            }
        </style>
    </head>
    <body>
        <div id="con">
            
        </div>
       <div class="box">
           
       </div>
       <script>
           var list =[
                    {pic:"1",name:"zhang",number:"1234",section:"企业事业部"},
                    {pic:"2",name:"zhang",number:"1234",section:"企业事业部"},
                    {pic:"3",name:"zhang",number:"1234",section:"企业事业部"},
                    {pic:"4",name:"zhang",number:"1234",section:"企业事业部"},
                    {pic:"5",name:"zhang",number:"1234",section:"企业事业部"},
                    {pic:"6",name:"zhang",number:"1234",section:"企业事业部"},
                    {pic:"7",name:"zhang",number:"1234",section:"企业事业部"},
                    {pic:"8",name:"zhang",number:"1234",section:"企业事业部"},
                    {pic:"9",name:"zhang",number:"1234",section:"企业事业部"},
                    {pic:"10",name:"zhang",number:"1234",section:"企业事业部"},
                    {pic:"11",name:"zhang",number:"1234",section:"企业事业部"},
                    {pic:"12",name:"zhang",number:"1234",section:"企业事业部"},            
           ];
         

       $('.box').pagination({
                    totalData:12,
                    showData:4,
                    coping:true,
                    jump:true,
                    keepShowPN:true,
                    homePage:'首页',
                    endPage:'末页',
                    prevContent:'上页',
                    nextContent:'下页',
                    callback:function(api){
                                  console.log("点击分页了")
                                  console.log((api.getCurrent()-1)*4+"到"+(api.getCurrent()-1)*4*2);
                                  $("#con").text("");
                                  var page = (api.getCurrent()-1)*4 ;
                                  showTable(page);
                    }
      },function(api){
        console.log('初始化')
        showTable(0);
      });
      function showTable(page){
                  var dataList = [];
                  for(var i=page;i<page+4;i++){
                           $("<div class=\"conDv\">"+
                                 "<div class=\"pic\">"+list[i].pic+"</div>"+
                                  "<div class=\"name\">"+list[i].name+"</div>"+
                                  "<div class=\"number\">"+list[i].number+"</div>"+
                                  "<div class=\"section\">"+list[i].section+"</div>"+
                              "</div>").appendTo("#con");
                        dataList.push(list[i]);
                      }
                console.log(dataList)
       }
       </script>
    </body>
</html>