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 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
javascript 类方法定义还是有点区别
Apr 15 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
jQuery事件对象总结
Oct 17 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 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 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
php常用图片处理类
2016/03/16 PHP
Laravel 5.3 学习笔记之 错误&日志
2016/08/28 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
Python读取图片属性信息的实现方法
2016/09/11 Python
Python实现简单的四则运算计算器
2016/11/02 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
HTML5注册页面示例代码
2014/03/27 HTML / CSS
金蝶的一道SQL笔试题
2012/12/18 面试题
sealed修饰符是干什么的
2012/10/23 面试题
Java基础类库面试题
2013/09/04 面试题
社区国庆节活动方案
2014/02/05 职场文书
委托公证书
2014/04/08 职场文书
机械系毕业生求职信
2014/05/28 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技
python使用shell脚本创建kafka连接器
2022/04/29 Python