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 相关文章推荐
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 Javascript
vue中jsonp插件的使用方法示例
Sep 10 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
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
php实现URL加密解密的方法
2016/11/17 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
常用的javascript function代码
2008/05/23 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
Bootstrap表单布局
2016/07/19 Javascript
学习vue.js计算属性
2016/12/03 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
python监控键盘输入实例代码
2018/02/09 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
仓库主管的岗位职责
2013/12/04 职场文书
两只小狮子教学反思
2014/02/05 职场文书
球队口号
2014/06/18 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
资产运营委托书范本
2014/10/16 职场文书
2015年采购员工作总结
2015/04/27 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL