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 相关文章推荐
JS原型对象通俗&quot;唱法&quot;
Dec 27 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
详解uniapp的全局变量实现方式
Jan 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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
php简单统计字符串单词数量的方法
2015/06/19 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
python实现哈希表
2014/02/07 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
python适合人工智能的理由和优势
2019/06/28 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
python实现canny边缘检测
2020/09/14 Python
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
初中数学教学反思
2014/01/16 职场文书
英语简历自我评价
2014/01/26 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
计划生育证明书写要求
2014/09/17 职场文书
医德医风自我评价
2014/09/19 职场文书
爱国影片观后感
2015/06/18 职场文书
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python