本插件的开发目的主要给前端同学使用,本人是专注于后台开发的,对css样式不熟悉,但逼于前端要求做一个共公组件方便日常开发,所以这个插件在样式上可能不适合大部分人,喜欢的拿走吧,不喜欢的也请别喷。

 一、使用环境

  1.Angularjs  1.x

  2.Bootstrap 3

 在自己的环境里请自行配置js和css,本文不作这方面的介绍。

二、效果图

  

  效果逻辑:

    1.当前页码默认选中高亮状态

    2.页码少于等于1,则“上一页”为不可点击状态

    3.页码大于等于最大页码,则“下一页”为不可点击状态

    4.页码输入框的范围是 1~最大页码,当超过最大页码时,“确定”按钮不可点

    5.如果总记录数不存在或少于1,则整个插件不显示任何效果

三、使用步骤

  1.下载文件:etgyd.pagination.min.js   添加到页面里

<script type="text/javascript" src="etgyd.pagination.min.js"></script>

  2.Angularjs 添加引用

angular.module('Webapp', ['etgyd.pagination']);

  3.html里使用本指令

<div>
<etgyd-pagination page-model="pagevo" page-control="pageConfig" call-function="queryPage(pagevo.pageNum)" ></etgyd-pagination>
</div>

  参数说明: 

参数 说明 例子
page-model
 {
pageNum: 1,//当前页码
pageSize: 10,//每页大小
total: 200,//总记录数
pages: 20,//总页数,允许为空
pagesLength: 5//显示分页按钮数,必须为奇数,默认为5,允许为空
}
 
page-control
开放的api,目前只有extent()

$scope.pageConfig.extent()
call-function
回调方法,可以自定义查询,此处会返回点击的页码
$scope.queryPage=function(num){

    $scope.query("",num);
}

  4.controller的实现

   这里需要定义两个方法 1、上面所提到的回调方法$scope.queryPage  2、与服务器交互的查询方法 $scope.query

  $scope.queryPage接收的参数为指令返回的,固定为pageNum

  $scope.query 实现如下,大家可以自行修改,以下只是我的实现,其中有两个地方需要注意,分页对象必须要声明,声明后要延时执行指令,时间最好大于200ms,我这里写的是1秒后执行

整个指令的使用就是以上这些,很久没有写博客了,这次也算是在学习了一天后的少少分享,可能有些地方写得不太好,欢迎留言!

Angularjs+Bootstrap实现分页指令的更多相关文章

  1. angular+bootstrap分页指令案例

    AngularJS中不仅内置了许多指令,而且开发人员也可以通过自定义指令来完成特殊操作,指令创建成功后可以到处复用. Web应用中的分页处理最为常见,我们可以将分页模块编写成一个可以复用的Angula ...

  2. AngularJS Bootstrap

    AngularJS 的首选样式表是 Bootstrap. 可以在 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: < ...

  3. 带你走近AngularJS - 创建自己定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...

  4. 使用KnockoutJs+Bootstrap实现分页

    [后端人员耍前端系列]KnockoutJs篇:使用KnockoutJs+Bootstrap实现分页   一.引言 由于最近公司的系统需要改版,改版的新系统我打算使用KnockoutJs来制作Web前端 ...

  5. 带你走近AngularJS 之创建自定义指令

    带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...

  6. AngularJS -- Bootstrap(启动器)(转载)

    AngularJS -- Bootstrap(启动器)   点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Bootstrap(初始化) ...

  7. AngularJS进阶(六)AngularJS+BootStrap实现弹出对话框

    AngularJS+BootStrap实现弹出对话框 参考资料: http://angular-ui.github.io/bootstrap/#/modal https://www.zybuluo.c ...

  8. 【17】AngularJS Bootstrap

    AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架. Bootstrap 你 ...

  9. ThinkPHP 整合Bootstrap Ajax分页

    ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...

随机推荐

  1. Ajax——php基础知识(二)

    header header('content-type:text/html; charset= utf-8');//设置编码格式为:utf-8 header('location:http://www. ...

  2. CSS——img

    img标签初始化:在低版本的ie浏览器会自带边框,所以建议border:0px.

  3. Flask 框架构建

    Flask 框架构建,目标构建成Django类似的结构 一. 先看看构建后的效果 # 第一次初始化 python manage.py db init # 生成数据库版本 python manage.p ...

  4. codeforces_731C_[dfs][并查集]

    C. Socks time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...

  5. HDU_1158_Employment Planning_dp

    Employment Planning Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  6. 通过PHP怎样取到android系统下apk应用的包名,版本号等信息

    公司项目关系,要求在通过PHP解析android系统应用apk包内的一切可用的信息.比如说:APK包名,版本号,版本名,安装权限等一系列关于对应包的信息.通过google查找相关的解决方案,都没有找到 ...

  7. yum进程被占用

    使用yum安装软件的时候出现,/var/run/yum.pid 已被锁定,PID 为 6503 的另一个程序正在运行的问题 [root@localhost mysql]# yum install gc ...

  8. S3C2440时钟体系

    注:以下内容学习于韦东山老师arm裸机第一期视频教程 一. 2440时钟简介 1.1 2440是一个SOC(system on chip)系统,不仅有很多CPU,还有很多外设,在2440芯片手册有系统 ...

  9. IntentService和HandlerThread的使用以及源码阅读

    使用MyIntentService.java public class MyIntentService extends IntentService { /** * 是否正在运行 */ private ...

  10. python编写webservice接口

    1.pip install suds-jurko 2.pip install client #coding=utf-8 from suds.client import Client class Web ...