ANGULARJS中使用JQUERY分页控件


Posted in Javascript onSeptember 16, 2015

首篇,不知写何物,思来想去,敬上分页控件使用方法,望共同探讨。

分页乃前端数据展现之常用功能,而在我们使用的Angular js中,原生的分页需要将数据全部取到前端后,然后再到前端分页,在大批量数据操作时并不实用。接下来,我来介绍了将一种jquery的分页控件修改为Angularjs指令的方法。

首先在web项目中引用jquery1.10、Angularjs库文件以及jq-pagination控件。

我降指令名称为custompagination,为指令添加Html样式。

ANGULARJS中使用JQUERY分页控件

然后给指令添加对应的控制器。

ANGULARJS中使用JQUERY分页控件

指令使用时,html页面代码如下

ANGULARJS中使用JQUERY分页控件

对应控制器数据获取的方法为

ANGULARJS中使用JQUERY分页控件

控件的最终使用效果。

ANGULARJS中使用JQUERY分页控件

注意事项:jquery控件的调用更多的是使用一种同步的方式,而Angularjs获取后台数据则全部采用的是异步方式,在同时使用jquery和Angularjs时需要注意将两种不同的编程思想结合起来。在本例中最大的问题是在使用Angularjs获取后台数据后如何将新的分页情况通知给jquery分页控件,然后刷新分页控件的页面数据。本例是在Angularjs和jquery代码中各进行一次回调来实现的。其实也可以在Angularjs指令中使用watch来监视分页控件数据的变化达到刷新页面的目的,欢迎各位作进一步的探索。

Javascript 相关文章推荐
Javascript string 扩展库代码
Apr 09 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
jquery实现拖动效果
Aug 10 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
JS实现碰撞检测效果
Mar 12 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 Javascript
vue.js封装switch开关组件的操作
Oct 26 Javascript
JS数据类型分类及常用判断方法
Nov 19 Javascript
js实现tab切换效果实例
Sep 16 #Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 #Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 #Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 #Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 #Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 #Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 #Javascript
You might like
php中的一个中文字符串截取函数
2007/02/14 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
php文件上传简单实现方法
2015/01/24 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
Python3几个常见问题的处理方法
2019/02/26 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
高中班长自我鉴定
2013/12/20 职场文书
应用艺术专业个人的自我评价
2014/01/03 职场文书
北京奥运会口号
2014/06/21 职场文书
趣味运动会开幕词
2015/01/28 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
python基于turtle绘制几何图形
2021/06/15 Python
python入门学习关于for else的特殊特性讲解
2021/11/20 Python
javascript的var与let,const之间的区别详解
2022/02/18 Javascript