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 UrlDecode函数代码
Jan 09 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 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连mysql和oracle数据库性能比较
2006/10/09 PHP
如何删除多级目录
2006/10/09 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
鼠标图片振动代码
2006/07/06 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
pytorch实现线性拟合方式
2020/01/15 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
python实现简单俄罗斯方块
2020/03/13 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
传播学专业毕业生自荐信
2013/11/04 职场文书
学校会议通知范文
2015/04/15 职场文书
大学生村官入党自传
2015/06/26 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
中秋节主题班会
2015/08/14 职场文书
初中数学教学随笔
2015/08/15 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL
python基础之类方法和静态方法
2021/10/24 Python