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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
javascript测试题练习代码
Oct 10 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
JsRender实用入门教程
Oct 31 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 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
Access数据库导入Mysql的方法之一
2006/10/09 PHP
支持oicq头像的留言簿(一)
2006/10/09 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
php发送post请求函数分享
2014/03/06 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
JS与框架页的操作代码
2010/01/17 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
three.js实现圆柱体
2018/12/30 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
用Python制作简单的钢琴程序的教程
2015/04/01 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
pycharm运行scrapy过程图解
2019/11/22 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
Unix如何在一行中运行多个命令
2015/05/29 面试题
Python基础知识之变量的详解
2021/04/14 Python
Python实战之实现康威生命游戏
2021/04/26 Python