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 相关文章推荐
js arguments对象应用介绍
Nov 28 Javascript
js关闭父窗口时关闭子窗口
Apr 01 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
纯JS代码实现气泡效果
May 04 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
Vue路由守卫之路由独享守卫
Sep 25 Javascript
vue项目中极验验证的使用代码示例
Dec 03 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
Laravel 5.5 异常处理 & 错误日志的解决
2019/10/17 PHP
jQuery 使用个人心得
2009/02/26 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
Python实现二分查找算法实例
2015/05/26 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
用python找出那些被“标记”的照片
2017/04/20 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
django数据库自动重连的方法实例
2019/07/21 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
火锅店营销方案
2014/02/26 职场文书
协议书范本
2014/04/23 职场文书
安全协议书
2014/04/23 职场文书
师德演讲稿范文
2014/05/06 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书