AngularJS 前台分页实现的示例代码


Posted in Javascript onJune 07, 2018

考评员查询,因为整体的数据量比较小,所以我们可以将分页放到前台进行处理。

其实分页的原理也很简单,我们根据分页选择的页码数和每页数据条数决定当前显示的是数组中的第多少项到多少项,然后再构造分页的参数传入已有的分页指令。

// 初始化分页参数
$scope.pageParams = {
  size: $stateParams.size,   // 每页数据条数
  page: $stateParams.page,   // 页码数
  last: undefined,       // 是否首页
  first: undefined,       // 是否尾页
  totalPages: undefined,    // 总页数
  totalElements: undefined,   // 总数据条数
  numberOfElements: undefined  // 当前页有几条数据
};

这是我们的分页指令要的数据,所以我们就是两个任务,第一,截取当前页应该显示的数据,第二生成参数传给分页指令。

这是最后实现的CommonService中的公共方法。

/**
 * 重新生成分页参数与分页数据
 * @param {每页数据条数}  size
 * @param {页码数}    page
 * @param {全部数据}   data
 * @param {Function}   callback
 * callback (pageParams, currentPageData)
 * pageParams: 分页的标准
 * currentPageData: 当前页的数据
 */
self.reloadPageParamsAndData = function(size, page, data, callback) {
  // 校验传入的参数
  if (typeof size === 'undefined') {
    throw '未接收到每页数据条数信息';
  }
  if (typeof page === 'undefined') {
    throw '未接收到分页信息';
  }
  if (typeof data === 'undefined') {
    throw '未接收到数据信息';
  }
  // 计算总页数和总数据条数
  var totalPages  = Math.ceil(data.length / size);
  var totalElements = data.length;
  // 计算当前页是否为首页 是否为尾页
  var first = page === 0 ? true : false;
  var last = page === totalPages - 1 ? true : false;
  // 根据分页参数计算当前页应该显示的数据 slice数组元素分割
  var currentPageData = data.slice(0 + page * size, size + page * size);
  // 获取当前页总共有多少条数据
  var numberOfElements = currentPageData.length;

  // 重新生成分页参数
  var pageParams = {
    size: size,             // 每页数据条数
    page: page,             // 页码数
    last: last,             // 是否首页
    first: first,            // 是否尾页
    totalPages: totalPages,       // 总页数
    totalElements: totalElements,    // 总数据条数
    numberOfElements: numberOfElements  // 当前页有几条数据
  };

  // 回调
  if (callback) {
    callback(pageParams, currentPageData);
  }
};

获取当前页数据

获取当前页的数据,我们需要知道每页数据条数,页码数即可对数据进行分割。

var currentPageData = data.slice(0 + page * size, size + page * size);

对数据进行分割,数据应该是从0size,加上page * size就是之前的页数中的数据量。

构建分页参数

// 计算总页数和总数据条数
var totalPages  = Math.ceil(data.length / size);
var totalElements = data.length;
// 计算当前页是否为首页 是否为尾页
var first = page === 0 ? true : false;
var last = page === totalPages - 1 ? true : false;
// 获取当前页总共有多少条数据
var numberOfElements = currentPageData.length;

数据总数除以每页数据条数向上取整得到总页数。

如果页数为0,则为首页;如果页数为总页数减1,则为尾页。

<yunzhi-page reload="reloadByPage" total-pages="pageParams.totalPages" total-elements="pageParams.totalElements" first="pageParams.first" last="pageParams.last" number="pageParams.page" size="pageParams.size" number-of-elements="pageParams.numberOfElements"></yunzhi-page>

AngularJS 前台分页实现的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中对对层的控制
Dec 29 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
vue中使用codemirror的实例详解
Nov 01 Javascript
JavaScript实现密码强度实时验证
Mar 18 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
JS实现简易图片自动轮播
Oct 16 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 Javascript
浅谈PDF.js使用心得
Jun 07 #Javascript
vue better scroll 无法滚动的解决方法
Jun 07 #Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 #Javascript
JavaScript 正则命名分组【推荐】
Jun 07 #Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 #Javascript
vue.js实现标签页切换效果
Jun 07 #Javascript
js数组去重的N种方法(小结)
Jun 07 #Javascript
You might like
redis 队列操作的例子(php)
2012/04/12 PHP
php数字游戏 计算24算法
2012/06/10 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
Extjs中常用表单介绍与应用
2010/06/07 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
Python爬虫爬验证码实现功能详解
2016/04/14 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
如何在sublime编辑器中安装python
2020/05/20 Python
python eventlet绿化和patch原理
2020/11/21 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
单位工程竣工验收方案
2014/03/16 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
工作失职检讨书
2015/01/26 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
HttpClient实现文件上传功能
2022/08/14 Java/Android