HTML分页插件功能实现

最新推荐文章于 2024-07-24 16:53:23 发布

大灰狼学编程

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量1.6w

点赞数 11

分类专栏：网站开发文章标签： html 分页 jQuery

本文链接：https://blog.csdn.net/a_hui_tai_lang/article/details/84137847

版权

网站开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

分页功能实现案例展示如下：在这里插入图片描述

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

<link rel="stylesheet" href="css/toPage.css">
<script src="script/jquery.min.js"></script>
<link rel="stylesheet" href="css/toPage.css">

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

<!--分页容器_1-->
<div class="page_1"></div>
<!--分页容器_2-->
<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来展示分页数据，如下：


function change_content() {
  $.ajax({
      type: 'get',
      url: 'http://xxxx',
      dataType: "json",
      data: json_data,
      error: function (data) {
          //请求失败时被调用的函数 
          err_func(data);
      },
      success: function (data) {
	     //对数据的各种操作operation(data),返回需要展示的页面内容，
		 //最后绑定到$(obj_box).children('.page_content').html即可展示出来
		 var page_content=operation(data);
         $(obj_box).children('.page_content').html(page_content);
      }
  });
}

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

完整代码如下：
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>
    <!--分页容器_1-->
    <div class="page_1"></div>
    <!--分页容器_2-->
    <div class="page_2"></div>
    <!--先引入jquery-->
    <script src="script/jquery.min.js"></script>
    <!--再引入toPage.js-->
    <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

function page_ctrl(data_obj) {
  var obj_box=(data_obj.obj_box!== undefined)?data_obj.obj_box:function () {
    return;
  };//翻页容器dom对象,必要参数

  var total_item=(data_obj.total_item!== undefined)?parseInt(data_obj.total_item):0;//数据条目总数,默认为0,组件将不加载

  var per_num=(data_obj.per_num!== undefined)?parseInt(data_obj.per_num):10;//每页显示条数,默认为10条

  var current_page=(data_obj.current_page!== undefined)?parseInt(data_obj.current_page):1;//当前页,默认为1

  var total_page=Math.ceil(total_item/per_num);//计算总页数,不足2页,不加载组件

  if(total_page<2){
    return;
  }

  //在指定容器内加载分页数据

  $(obj_box).append('<div class="page_content"></div>');

  //在指定容器内加载分页插件

  $(obj_box).append('<div class="page_ctrl"></div>');

  function page_even() {

    /*加载数据*/

    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);
    }

    change_content();
    var inp_val=(current_page==total_page)?1:current_page+1;//跳转页数,input默认显示值
    var append_html='<button class="prev_page">上一页</button>';
    for(var i=0;i<total_page-1;i++){
      if(total_page>8&&current_page>6&&i<current_page-3){
        if(i<2){
          append_html+='<button class="page_num">'+(i+1)+'</button>';
        }
        else if(i==2){
          append_html+='<span class="page_dot">•••</span>';
        }
      }

      else if(total_page>8&&current_page<total_page-3&&i>current_page+1){
        if(current_page>6&&i==current_page+2){
          append_html+='<span class="page_dot">•••</span>';
        }else if(current_page<7){
          if(i<8){
            append_html+='<button class="page_num">'+(i+1)+'</button>';
          }else if(i==8){
            append_html+='<span class="page_dot">•••</span>';
          }
        }
        //append_html+='<span class="page_dot">•••</span>';
      }

      else{
        if(i==current_page-1){
          append_html+='<button class="page_num current_page">'+(i+1)+'</button>';
        }

        else{
          append_html+='<button class="page_num">'+(i+1)+'</button>';
        }
      }
    }

    if(current_page==total_page){
      append_html+='<button class="page_num current_page">'+(i+1)+'</button>';
    }else{
      append_html+='<button class="page_num">'+(i+1)+'</button>';
    }

    append_html+='<button class="next_page">下一页</button><span class="page_total">共 '+total_page+' 页, 到第</span><input class="input_page_num" type="text" value="'+inp_val+'"><span class="page_text">页</span><button class="to_page_num">确定</button>';

    $(obj_box).children('.page_ctrl').append(append_html);
    if(current_page==1){
      $(obj_box+' .page_ctrl .prev_page').attr('disabled','disabled').addClass('btn_dis');
    }else{
      $(obj_box+' .page_ctrl .prev_page').removeAttr('disabled').removeClass('btn_dis');
    }

    if(current_page==total_page){
      $(obj_box+' .page_ctrl .next_page').attr('disabled','disabled').addClass('btn_dis');
    }else{
      $(obj_box+' .page_ctrl .next_page').removeAttr('disabled').removeClass('btn_dis');
    }
  }

  page_even();
  $(obj_box+' .page_ctrl').on('click','button',function () {
    var that=$(this);
    if(that.hasClass('prev_page')){
      if(current_page!=1){
        current_page--;
        that.parent('.page_ctrl').html('');
        page_even();
      }
    }

    else if(that.hasClass('next_page')){
      if(current_page!=total_page){
        current_page++;
        that.parent('.page_ctrl').html('');
        page_even();
      }
    }

    else if(that.hasClass('page_num')&&!that.hasClass('current_page')){
      current_page=parseInt(that.html());
      that.parent('.page_ctrl').html('');
      page_even();
    }

    else if(that.hasClass('to_page_num')){
      current_page=parseInt(that.siblings('.input_page_num').val());
      that.parent('.page_ctrl').html('');
      page_even();
    }
  });

}

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

我的GitHub

大灰狼学编程

关注

11
点赞
踩
82

收藏

觉得还不错? 一键收藏
6
评论
HTML分页插件功能实现

分页功能实现案例展示如下：1.先引入css样式和jQuery，再引入分页插件toPage.js，谨记顺序不能乱&amp;amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;css/toPage.css&amp;quot;&amp;amp;gt;&amp;amp;lt;script src=&amp;quot;script/jquery.min.js&am
复制链接

扫一扫

专栏目录