zoukankan      html  css  js  c++  java
  • 前端分页

    一. 前端分页:

    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);                         //渲染数据在页面

    }

    });

  • 相关阅读:
    Python编程 从入门到实践-2变量上
    NX二次开发-基于Winform界面对话框与NXOPEN C#交互的开发(对话框嵌套)
    NX二次开发-UFUN获取投影曲线里的曲线UF_CURVE_ask_proj_curves
    NX二次开发-UFUN获取投影曲线里的曲线UF_MODL_ask_proj_curves
    NX二次开发-UFUN创建投影曲线UF_MODL_create_proj_curves
    NX二次开发-NXOPEN C#项目如何设断点调试代码
    NX二次开发-外部开发模式exe(不打开NX进行后台操作)以及封装exe传参调用
    NX二次开发-工程图模板,标题栏,页码,日期,比例,单位,部件名,等自动更新【转载】
    QTreeWidget 遍历所有子节点(QTreeWidgetItem)【转载】
    NX二次开发-使用NXOPEN C#手工搭建开发环境配置
  • 原文地址:https://www.cnblogs.com/xuanranit/p/8336667.html
Copyright © 2011-2022 走看看