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面向对象编程
Mar 04 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
javascript解析json格式的数据方法详解
Aug 07 Javascript
微信小程序自定义底部弹出框动画
Nov 18 Javascript
js实现电灯开关效果
Jan 19 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传输数据的代码
2007/11/13 PHP
分享一段PHP制作的中文拼音首字母工具类
2014/12/11 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
通用JS事件写法实现代码
2009/01/07 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python 变量的创建过程详解
2019/09/02 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
探亲邀请信范文
2014/01/30 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
车辆转让协议书
2014/04/15 职场文书
增员口号大全
2014/06/18 职场文书
男性健康日的活动方案
2014/08/18 职场文书
五好家庭事迹材料
2014/12/20 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
Python制作动态字符画的源码
2021/08/04 Python
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫