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一些不错的函数脚本代码
Sep 10 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
href下载文件根据id取url并下载
May 28 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
jQuery中的通配符选择器使用总结
May 30 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 Javascript
微信小程序实现轮播图指示器
Jun 25 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缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
php简单判断文本编码的方法
2015/07/30 PHP
JQuery 学习技巧总结
2010/05/21 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
Python Flask基础教程示例代码
2018/02/07 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
python实现维吉尼亚加密法
2019/03/20 Python
numpy库reshape用法详解
2020/04/19 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
优秀学生党员先进事迹材料
2014/05/29 职场文书
多媒体教室标语
2014/06/26 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
优秀员工推荐材料
2014/12/20 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书