前言

分页组件比较常见,但是用avalon实现的见的不多,这个分页组件,可以适配2种分页方式,

第一种是每次点击下一页,就请求一次后台,并返回当页数据和总条数,我称之为假分页;

第二种是一次性把所有数据取出,每次点击分页,都是在一个数组中截取数据,而不请求后台,我称之为真分页;

在这个组件中,假分页和真分页在使用上,只是在VM中增加一个pageData属性(用于存放每页的数据)即可。

源码请参照:http://runjs.cn/code/xfqlscmq

HTML部分

<div ms-controller="mySingerCtrl">
<div class="wgzd_cnMain01cn01">
<div class="zhuboList">
<div class="zhuboList01" ms-repeat="pageData">
<a target="_blank" class="zhuboLIst01_pic" href="javascript:;">
<img ms-attr-src="el.pic">
</a>
<div class="zhuboList01R"><a target="_blank">{{decodeURIComponent(el.name)}}</a></div>
</div>
</div>
</div>
<div class="fanye" ms-if="totalPage > 1">
<a href="javascript:;" ms-on-click="goPage(1)"><span class="fanye01"></span></a>
<a href="javascript:;" ms-on-click="goPage(pageNo -1 < 1 ? 1 : pageNo -1)"><span class="fanye02"></span></a>
<a href="javascript:;" ms-on-click="goPage(el)" ms-repeat="totalPageArr" ms-attr-class="el == pageNo ? 'fanyeon' : ''">{{ el }}</a>
<a href="javascript:;" ms-on-click="goPage(pageNo + 1 >= totalPage ? totalPage : pageNo +1)"><span class="fanye03"></span></a>
<a href="javascript:;" ms-on-click="goPage(totalPage)"><span class="fanye04"></span></a>
</div>
</div>

VM部分

var mySingerVM = avalon.define({
$id: "mySingerCtrl", //- id
pageData: [], //- 分页数据,用于展示,每页18条
data: [], //- 数据
pageNo: 1, //- 页码
pageSize: 18, //- 每页多少条记录
totalPage: 1, //- 总页数
totalPageArr: [], //- 总页数数组,用于循环页数
goPage: function(pageNo) {
mySingerVM.pageNo = pageNo;
}
});

初始化部分

//- 获取数据主播数据
function init() {
$.getJSON("http://zhiboserver.kuwo.cn/proxy.p?src=MUSIC_WEB&cmd=gethall&type=1&callback=?", function(json) {
mySingerVM.data = json.roomlist;
});
} avalon.ready(function() {
init();
page.init(mySingerVM);
});

Page组件部分

//- 分页功能分为两种,
//- 第一种: 一次全部取出, 假分页
//- 第二种: 每次点击都请求一页数据, 真分页
//- 这个分页方法, 对两种分页都有效果, 假分页需要有一个data对象, 存放全部数据
var page = {
init: function(pageVM) {
var _this = this;
// _this.initPage(pageVM);
pageVM.$watch("pageNo", function() { //- 监听页码变化,点击分页时, 重新初始化分页
_this.initPage(pageVM);
});
//- 监听数据长度,主要是解决初始时, 数据为空, jax请求时, 数据存在之后, 初始化分页
if (pageVM.data) { //- 假分页的方式
pageVM.$watch("data.length", function() {
_this.initPage(pageVM);
});
} else { //- 真分页的方式
pageVM.$watch("pageData.length", function() {
_this.initPage(pageVM);
});
}
},
initPage: function(pageVM) { //- 初始化分页
pageVM.totalPageArr = [];
var _pageNo = pageVM.pageNo;
var _pageSize = pageVM.pageSize;
var totalCnt = 1;
if (pageVM.data) { //- 有data对象, 判定为假分页方式
pageVM.pageData = [];
totalCnt = pageVM.data.size();
var cnt = _pageNo * _pageSize < totalCnt ? _pageNo * _pageSize : totalCnt; //- 防止超出总数
for (var i = (_pageNo - 1) * _pageSize; i < cnt; i++) {
pageVM.pageData.push(pageVM.data[i]);
}
} else {
totalCnt = pageVM.totalCnt;
}
pageVM.totalPage = totalCnt % _pageSize == 0 ? parseInt(totalCnt / _pageSize) : parseInt(totalCnt / _pageSize) + 1;
for (var i = 0; i < pageVM.totalPage; i++) { //- 填充,用于分页循环,因为Avalon不支持数字循环,所以必须把数据转成数组
pageVM.totalPageArr.push(i + 1);
} var _arr = pageVM.totalPageArr; //- 处理页数过多时的问题
if (_arr.size() > 5) {
if (_pageNo - 2 > 0 && _arr.size() - _pageNo > 2) { //- 如果页码在中间
_arr.splice(0, (_pageNo - 3)); //- 先把前面的截取
var length = _arr[_arr.size() - 1] - (_pageNo + 2);
_arr.splice(5, length); //- 再截取后面的
} else if (_pageNo - 2 <= 0) { //- 页码在左边时
var length = _arr[_arr.size() - 1] - 5;
_arr.splice(5, length); //- 再截取后面的
} else if (_arr.size() - _pageNo <= 2) { //- 页码在右边时
var length = _arr[_arr.size() - 1] - 5;
_arr.splice(0, length); //- 再截取后面的
}
}
}
};

avalon实现分页组件的更多相关文章

  1. 一步步编写avalon组件02:分页组件

    本章节,我们做分页组件,这是一个非常常用的组件.grid, listview都离不开它.因此其各种形态也有. 本章节教授的是一个比较纯正的形态,bootstrap风格的那种分页栏. 我们建立一个ms- ...

  2. 基于avalon1.4.x ----分页组件编写

    avalon分页组件 (1.4.x版本) 随着avalon2的推出,avalon1的官网已经不再维护了,现在似乎是找不到avalon 1.4版本的官方文档了,所以本文章所有的内容均不保证正确性,只能保 ...

  3. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  4. angular-ui分页组件

    http://angular-ui.github.io/bootstrap/#/pagination 分页组件只提供生成分页按钮,数据的显示需要使用ng-repeat, 注意设置 items-per- ...

  5. asp.net mvc4+mysql做一个简单分页组件(部分视图)

    在开始做mysql分页功能组件前,便设定的是要有一定可复用性.先在项目里Views文件夹下右键新建名为_PaginationComponent.cshtml,这里html及css我采用的bootstr ...

  6. ReactJS实现的通用分页组件

    大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果 ...

  7. 基于vue2.0的分页组件开发

    今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...

  8. 基于Vue封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...

  9. [js开源组件开发]ajax分页组件

    ajax分页组件 我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...

随机推荐

  1. c++内存模型------计算机系统核心概念及软硬件实现

    c++编程语言有3中不同类项的变量:全局变量.局部变量和动态分配变量.变量的值存储在计算机的内存中,但是变量存储的方式取决于变量的类项.3种类型的变量分别对应存储器中3个特定的区域: 全局变量存放在存 ...

  2. 去掉textarea 右下角图标 resize: none;

    如下图默认右下角有小图标: 加个样式: resize: none;就可以了:

  3. Web渗透测试(xss漏洞)

    Xss介绍—— XSS (cross-site script) 跨站脚本自1996年诞生以来,一直被OWASP(open web application security project) 评为十大安 ...

  4. 【转】C#中静态方法和非静态方法的区别

    源地址:https://www.cnblogs.com/amoshu/p/7477757.html 备注:静态方法不需要类的实例化就能调用,因为它是一直保存在内存中,不像非静态方法一样要放在实例化类时 ...

  5. 最近关于linux的一些小问题。

    redhat 用yum更新时需要注册付费.centos 不用. 原来版本的ifconfig 在centos中变为了ip addr.

  6. The server of Apache (一)——apache服务的基本安装过程

    一.为了避免端口冲突,需要卸载linux系统中以RPM方式安装的httpd ~] # rpm -qa | grep httpd ~] # rpm -e httpd --nodeps (此处nodeps ...

  7. Python实现KNN算法

    Python实现Knn算法 关键词:KNN.K-近邻(KNN)算法.欧氏距离.曼哈顿距离  KNN是通过测量不同特征值之间的距离进行分类.它的的思路是:如果一个样本在特征空间中的k个最相似(即特征空间 ...

  8. mysql 5.7.22 解压缩安装

    1.下载地址:https://dev.mysql.com/downloads/mysql/5.7.html#downloads 直接点击下载项 下载后: 2.可以把解压的内容随便放到一个目录,我的是如 ...

  9. flask简单了解

    Flask简介: Flask是一个Python编写的Web 微框架,让我们可以使用Python语言快速实现一个网站或Web服务,在介绍Flask之前首先来聊下它和Django的联系以及区别,djang ...

  10. JavaWeb学习笔记(十)—— JavaBean总结【转】

    一.什么是JavaBean JavaBean是一个遵循特定写法的Java类,它通常具有如下特点: 这个Java类必须具有一个无参的构造函数 属性必须私有化. 私有化的属性必须通过public类型的方法 ...