HTML分页插件功能实现

分手后的思念是犯贱 2022-04-16 03:37 1255阅读 0赞

分页功能实现案例展示如下：![在这里插入图片描述][20181116133259683.png]

1.先引入css样式和jQuery，再引入分页插件toPage.js，谨记顺序不能乱

2.定义两个分页容器的div展示，实际应用时定义一个分页容器即可，这里主要是展示案例所以定义了两个容器，如下：

<div class="page_1"></div>
    
    <div class="page_2"></div>

3.接着我们使用插件写js代码

<script>
          /*容器1参数*/
          var obj_1={ 
            obj_box:'.page_1',//翻页容器
            total_item:72//条目总数
            /*per_num:10,//每页条目数 current_page:8//当前页*/
          };
          /*容器2参数*/
          var obj_2={ 
            obj_box:'.page_2',//翻页容器
            total_item:372,//条目总数
            per_num:20,//每页条目数
            current_page:8//当前页
          };
          /*调用分页方法,初始化数据*/
          page_ctrl(obj_1);
          page_ctrl(obj_2);
        </script>

4.关于如何修改每页展示的内容：在toPage.js里面有一个change\_content()方法，请自行修改即可  
以下代码解读：定义了ul，li，分页展示：编号，分页条目；最后要记得吧内容绑定到$(obj\_box).children(’.page\_content’).html下才能展示出来

function change_content() { 
          /*此处根据项目实际自行编写页面显示内容的方法,举例说明:*/
          var page_content='<ul style="width: 300px;margin: 10px auto;">';//当前页内容
          for(var i=0;i<per_num;i++){ 
            page_content+='<li>'+((current_page-1)*per_num+i+1)+',分页条目</li>';
          }
          page_content+='</ul>';
          $(obj_box).children('.page_content').html(page_content);
        }

另外，也可以也可以写ajax来展示分页数据，如下：

我自己制作的小说网站，也使用了该分页功能，感觉不错，值得推荐  
也欢迎访问[我的小说网站][Link 1]  
![在这里插入图片描述][20181116141913582.png]

完整代码如下：  
index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>仿淘宝分页插件</title>
      
      <link rel="stylesheet" href="css/toPage.css">
    </head>
    <body>
        <h2 style="text-align: center">仿淘宝分页插件,完美兼容ie8,简单处理后可兼容更低版本ie</h2>
        
        <div class="page_1"></div>
        
        <div class="page_2"></div>
        
        <script src="script/jquery.min.js"></script>
        
        <script src="script/toPage.js"></script>
        
        <script> /*容器1参数*/ var obj_1={ obj_box:'.page_1',//翻页容器 total_item:72//条目总数 /*per_num:10,//每页条目数 current_page:8//当前页*/ }; /*容器2参数*/ var obj_2={ obj_box:'.page_2',//翻页容器 total_item:372,//条目总数 per_num:20,//每页条目数 current_page:8//当前页 }; /*调用分页方法,初始化数据*/ page_ctrl(obj_1); page_ctrl(obj_2); </script>
    </body>
    </html>

css/toPage.css

.page_ctrl{ 
      text-align: center;
      margin: 10px auto;
      box-sizing: border-box;
    }
    
    .page_ctrl *{ 
      line-height: 26px;
    }
    
    .page_ctrl button{ 
      margin:0 3px;
      min-width:30px;
      background: #ffffff;
      border: 1px solid #e5e5e5;
      color: #5e5e5e;
      cursor: pointer;
      outline: none;
      text-align: center;
    }
    
    .page_ctrl button:hover{ 
      background: #0eb0d2;
      color: #ffffff;
    }
    
    .page_ctrl .btn_dis{ 
      cursor: default;
      opacity: .7;
      background: #eeeeee;
      color: #5e5e5e;
    }
    
    .page_ctrl .btn_dis:hover{ 
      background: #eeeeee;
      color: #5e5e5e;
    }
    
    .page_ctrl .current_page{ 
      background: #0eb0d2;
      color: #ffffff;
    }
    
    .page_ctrl .input_page_num{ 
      width:30px;
      height: 26px;
      margin:0 3px;
      padding: 0;
      text-align: center;
      background: #ffffff;
      border: 1px solid #e5e5e5;
      color: #5e5e5e;
      outline: none;
    }
    .page_ctrl .page_total,.page_ctrl .page_text{ 
      color: #2b2b2b;
      font-size: 13px;
    }

script/toPage.js

代码放在GitHub上，[LoyalWilliams/front-end][LoyalWilliams_front-end]

[我的GitHub][GitHub]

[20181116133259683.png]: /images/20220416/d3bf16c72b874d91a8c717981d903cb6.png
[Link 1]: http://47.94.232.43/novel/index.html
[20181116141913582.png]: /images/20220416/0b725a524d914b3d881eefb4db5c4dba.png
[LoyalWilliams_front-end]: https://github.com/LoyalWilliams/front-end/tree/master/%E4%BB%BF%E6%B7%98%E5%AE%9D%E5%88%86%E9%A1%B5%E6%8F%92%E4%BB%B6
[GitHub]: https://github.com/LoyalWilliams