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 相关文章推荐
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
canvas绘制的直线动画
Jan 23 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 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的开合式多级菜单程序
2006/10/09 PHP
set_include_path在win和linux下的区别
2008/01/10 PHP
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
PHP重定向的3种方式
2013/03/07 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
PHP分享图片的生成方法
2018/04/25 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
javascript数据类型示例分享
2015/01/19 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
详解Nuxt.js 实战集锦
2019/11/19 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
python add_argument()用法解析
2020/01/29 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
巴西购物网站:Onofre Agora
2020/06/08 全球购物
顶撞老师检讨书
2014/02/07 职场文书
《藏戏》教学反思
2014/02/11 职场文书
计算机专业求职信
2014/06/02 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书