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 相关文章推荐
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 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
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
CI框架表单验证实例详解
2016/11/21 PHP
PHP中常用的魔术方法
2017/04/28 PHP
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
python psutil监控进程实例
2019/12/17 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
保安的辞职报告怎么写
2014/01/20 职场文书
应用化学专业职业生涯规划书
2014/01/22 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
读群众路线心得体会
2014/03/07 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL