博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angularjs+Bootstrap实现分页指令
阅读量:4561 次
发布时间:2019-06-08

本文共 1135 字,大约阅读时间需要 3 分钟。

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

 一、使用环境

  1.Angularjs  1.x

  2.Bootstrap 3

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

二、效果图

  

  效果逻辑:

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

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

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

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

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

三、使用步骤

  1.下载文件:   添加到页面里

  2.Angularjs 添加引用

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

  3.html里使用本指令

  参数说明: 

参数 说明 例子
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秒后执行

 

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

 

转载于:https://www.cnblogs.com/etgyd/p/7254039.html

你可能感兴趣的文章
oracle数据批处理
查看>>
Json网络解析
查看>>
[转]Google Chrome/IE/FireFox查看HTTP请求头request header响应头
查看>>
Harris角点检测
查看>>
Struts2的处理流程及为Action的属性注入值
查看>>
设计中最常用的CSS选择器
查看>>
Maven项目打包成可执行Jar文件
查看>>
nginx http proxy 正向代理
查看>>
对BFC的总结
查看>>
第十四周Java学习总结
查看>>
税率等级
查看>>
__alloc_pages
查看>>
web service 使用多态(转载)
查看>>
23醒
查看>>
Google Hack的一些整理
查看>>
[贪心] JZOJ P3757 随机生成器
查看>>
Codeforces Round #370 (Div. 2)(简单逻辑,比较水)
查看>>
ppt转换为html格式 抄的别人的 但是改成了web版 比较简陋
查看>>
操作系统进程调度算法
查看>>
less与sass的区别点
查看>>