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 相关文章推荐
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
javascript常用函数(1)
Nov 04 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
读Javascript高性能编程重点笔记
Dec 21 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
vue使用openlayers实现移动点动画
Sep 24 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封装的smartyBC类完整实例
2016/10/19 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
基于Jquery的简单&简陋Tabs插件代码
2010/02/09 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
ant design实现圈选功能
2019/12/17 Javascript
Python中自定义函数的教程
2015/04/27 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
Python是什么 Python的用处
2020/05/26 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
工厂厂长岗位职责
2013/11/08 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
财务主管岗位职责
2014/02/28 职场文书
施工质量承诺书范文
2014/05/30 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
文明好少年事迹材料
2014/08/19 职场文书
2014年班级工作总结
2014/11/14 职场文书
工程安全生产协议书
2014/11/21 职场文书
自我工作评价范文
2015/03/06 职场文书
招商银行收入证明
2015/06/17 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android