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解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
JavaScript Eval 函数使用
Mar 23 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
详解javascript函数的参数
Nov 10 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
layui使用label标签的方法
Sep 14 Javascript
JS原形与原型链深入详解
May 09 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连mysql和oracle数据库性能比较
2006/10/09 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
JavaScript使用cookie
2007/02/02 Javascript
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
国际贸易专业求职信
2014/06/04 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
房产公证书
2015/01/23 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
交通事故起诉书
2015/05/19 职场文书
会议主持人开场白台词
2015/05/28 职场文书
Redis高可用集群redis-cluster详解
2022/03/20 Redis