• 前端分页


    一. 前端分页:

    1.分页实现思路:
    当前页: currentPage   //直接获取
    后端提供数据: results  //发送请求,获取数据
    数据总条数:totalCount = results.length;

    举个栗子: 103条数据 每页10条 一共分 11 页:

    第一页: firstPage: 1 

    上一页: previousPage = Math.max(currentPage - 1, 1);
    当前页  上一页 
      3      2
      4      3
      1      1

    下一页: next = Math.min(currentPage + 1, totalPage);
    当前页  下一页 
      1      2
      2      3
      11     11

    总页数:totalPage = Math.ceil( totalCount / pageSize )

    // 下面是关键点:(每页显示 "数据的开始坐标和结束坐标"):
    起始坐标: start = (currentPage-1) * pageSize 
    结束坐标: end= Math.min(start + pageSize , totalCount); 

    当前页  起始坐标  结束坐标
      1      0       10
      2      10      20
      3      20      30
      ...
      10     90      100
      11     100     103

    那么,每页显示的数据就可以截取出来:
    第一种截取方式:
    var results;
    var arr = [];
    for(var i=start; i<end; i++) {
       arr.push(results[i]);
    };

    //再用arr去渲染模板

    第二种截取方式:
    var arr = results.slice(start, end);
    //再用arr去渲染模板


    2.分页实现的步骤:

    1). 发送请求,获取所有的数据:
    $.get('http://realauth.com', function(data){
       var results = JSON.parse(data);
    });

    2). 自己定一个每页显示多少条:
    var pageSize = 3

    3). 自己计算出总页数,计算出数据总条数:
    var totalCount = results.length                     //总页数
    totalPages = Math.ceil ( totalCount / pageSize );  //总条数 向上取整

    4). 使用分页插件:(举个栗子说明下配置,其他插件对应相关配置说明走)
    $('#pagination').twbsPagination({
    totalPages: totalPages , // 总页数
    visiblePages: 5,         // 插件当前展示几页
    first: '首页',
    next: '下一页',
    prev: '上一页',
    last: '尾页',
    onPageClick: function (event, currentpage) {      // 点击页码, 触发事件(调用插件中封装好的方法onPageClick())
      //console.log(currentpage);                    // 通过currentpage获取当前页码
     }
    });

    5). 计算出每页的“开始坐标”和“结束坐标”:
    $('#pagination').twbsPagination({

    //引入分页插件配置(根据个人需求引入需要的插件,这里只是举个分页插件栗子):
    totalPages: totalPages , // 总页数
    visiblePages: 5,        // 插件当前展示几页
    first: '首页',
    next: '下一页',
    prev: '上一页',
    last: '尾页',
    onPageClick: function (event, currentpage) {           // 点击页码, 触发事件(调用插件中封装好的方法onPageClick())

       //console.log(currentpage);                         // 通过currentpage获取当前页码

       var start = (currentpage-1) * pageSize;             //截取数据的起始坐标
       var end = Math.min(start + pageSize , totalCount);  //截取数据的结束坐标
       var arr = results.slice(start, end);                //以一个新数组的形式,返回截取的元素

       var html = template("mytmpl", {"list": arr});       //使用artTemplate模板中template()方法,进行页面数据拼接

       $("#userTbody").html(html);                         //渲染数据在页面

    }

    });

  • 相关阅读:
    使用ajax和history.pushState无刷新改变页面URL
    转:js-sdk探索之微信网页分享
    DOM操作优化
    转:jQuery插件开发精品教程,让你的jQuery提升一个台阶
    转:关于垂直网格与CSS基线对其的探讨
    伪元素控制网页表单样式
    div模拟textarea
    给独立程序员の建议
    ReactiveCocoa / RxSwift 笔记一
    ReactiveCocoa 浅析
  • 原文地址:https://www.cnblogs.com/chensv/p/9019951.html
Copyright © 2020-2023  润新知