• 前端分页


    一. 前端分页:

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

    }

    });

  • 相关阅读:
    CentOS 如何将.deb 文件 转换.rpm
    zabbix 使用SNMP监控富士施乐打印机
    zabbix5.0安装centos7环境
    zabbix5.0安装centos8
    iptables 扩展模式
    -bash: mail: command not found
    笔记本安装Centos8
    Centos 8 安装
    zabbix5.4部署
    死循环判断进程是否存活脚本
  • 原文地址:https://www.cnblogs.com/xuanranit/p/8336667.html
Copyright © 2020-2023  润新知