专栏首页web秀jquery如何模拟分页-小白进阶

jquery如何模拟分页-小白进阶

下面注释很详细,这里就不做过多的介绍了

html容器

<div id="docList"></div>
<div class="more" id="docLoadMore">加载更多</div>

js逻辑处理

var data = {
  // 分页数据
  docPages: {
    pageNo: 1, // 当前页码
    pageSize: 3 // 一页多少条数据
  },
  // 模拟数据
  docList: [{
    name: '这是我的第1篇文章'
  },{
    name: '这是我的第2篇文章'
  },{
    name: '这是我的第3篇文章'
  },{
    name: '这是我的第4篇文章'
  },{
    name: '这是我的第5篇文章'
  },{
    name: '这是我的第6篇文章'
  },{
    name: '这是我的第7篇文章'
  },{
    name: '这是我的第8篇文章'
  }]
}
$('#docLoadMore').on('click',function(){
    function getHtml(name) {
      // html模板
      var tpl = '<div class="load-li  dis-flex clearfix">'+
                  '<span class="align-left">'+
                      '<img src="../images/productDetails/yh_product_wendang_icon@2x.png" / class="word-icon">'+
                  '</span>'+
                  '<span class="color-66 flex1 li-content fs-01">'+name+'</span>'+
                  '<span class="align-right">'+
                      '<img src="../images/productDetails/yh_product_xiazai_icon@2x.png" / class="load-icon">'+
                  '</span>'+
              '</div>';
      return tpl;
    }
    var pageNo = data.docPages.pageNo;
    var pageSize = data.docPages.pageSize;
    // 计算最多分多少页
    // 总条数 / 一页多少条 = 可以分多少页  如果是小数  向上取整(Math.ceil)
    let maxPage = Math.ceil(data.docList.length / pageSize);
    // 如果页面大于总页数return
    if (pageNo > maxPage) {
        console.log('没有更多了');
        return;
    }
    // 计算第n页时取第几条到第几条数据
    var startIndex = (pageNo-1) * pageSize; // 下标从0开始,所以-1
    // 1:(1-1)*2=>0
    // 2:(2-1)*2=>2
    // 3:(3-1)*2=>4
    // 4:(4-1)*2=>6
    var endIndex = pageNo * pageSize - 1;
    // 1: 1*2=>2
    // 2: 2*2=>4
    // 3: 3*2=>6
    data.docPages.pageNo ++;
    // 根据下标找到对应的页码的数据
    var newPage = vm.data.docList.slice(startIndex, endIndex+1);
    let html = '';
    newPage.map(function(item){
        html += getHtml(item.name);
    });
    // 向元素后面插入准备好的html内容
    $('#docList').append(html);

})

提示

tips:上面代码没有初始化第一页数据,点击一下才会出来第一页的数据,所以可以在页面加载完毕,自动触发一下点击事件

// 页面加载完毕触发一次,作为默认值
$('#docLoadMore').trigger('click');

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue手把手带你撸项目系列之动态面包屑

    面包屑应该是我们在项目中经常使用的一个功能,一般情况下它用来表示我们当前所处的站点位置,也可以帮助我们能够更快的回到上个层级。 今天我们就来聊聊如何在 Vue...

    Javanx
  • VUE开发一个组件——Vue 分页组件

    想要快速开始的,请向下看。如果想理解源码的,可以直接跳过“快速开始”, 到“源码解读”

    Javanx
  • 有趣的JS面试题,一起探讨一下吧

    title: 有趣的JS面试题,一起探讨一下吧 subtitle: js-case date: 2018-08-02 09:12:22 tags: [we...

    Javanx
  • Dubbo源码解析之SPI(一):扩展类的加载过程

    Dubbo是一款开源的、高性能且轻量级的Java RPC框架,它提供了三大核心能力:面向接口的远程方法调用、智能容错和负载均衡,以及服务自动注册和发现。

    宜信技术学院
  • SQL基础(1)

    DDL: 数据定义语言,用于定义不同的数据段、数据库、表、列、索引等数据库对象。常用的关键字包含create、alter、drop、truncate等

    July
  • 如何在 Kubernetes 环境中搭建 MySQL(三):使用 PVC 挂接 RBD

    MySQL 中的数据是关键信息,是有状态的,不可能随着 MySQL pod 的销毁而被销毁,所以数据必须要外接到一个可靠的存储系统中,目前已经有了 Ceph 系...

    用户2443625
  • border-radius

    用户7873631
  • Android开发笔记(八十四)使用Properties读写属性值

    Java中的配置文件常为.properties文件,而Properties类便是读写此类文件的工具。属性文件有两种格式,一种是文本格式,其内容是“键=值”的...

    用户4464237
  • pandas速查表

    统计特征:https://zhuanlan.zhihu.com/p/82394380

    MachineLP
  • 非编系统,什么是非编系统?

    有一些打算从事影视后期制作的小伙伴可能不知道什么叫做非编系统,今天我来简单的介绍一下什么叫做非编系统。

    迪蓝科技

扫码关注云+社区

领取腾讯云代金券