angularjs分页组件
这是我第一次写博客,激动,首先,我也是个菜鸟,分享一下自己写的服务器端分页的代码,自己一步一步写的,其中也有参考别人的代码。技术比较渣,先这样了。
// ====== 2019-1-3 ======//
GitHub地址: https://github.com/wzhGitH/paging
下面开代码

使用方法
<paging></paging>
参数:
参数名 类型 备注
selPage number // 选中的页数(必传)
allCount number // 总页数(必传)
changePage function // 页数,条数发生变化反馈函数
pageSize string // 条数(必传)
selectList list // 下拉框选择的列表
inputPage boolean // 是否开启输入跳转
pageHint string // 加载时的显示文字
isJsPaging string // 是否前端分页
allList list // 总数据
举例:
服务器端分页

<paging all-count="allCount" sel-page="pagingM" page-size="pageSize" change-page="changePage(selPage)" select-list="selectList" input-page="inputPage"></paging>
$scope.allCount = 0; // 总页数 初始化` $scope.pageSize = "10"; // 条数初始化` $scope.pagingM = 1; // 页数初始化` $scope.selectList = [10, 20, 30, 50]; // 下拉选择初始化` $scope.inputPage = true; //是否显示输入框的初始化`
// 页数,页数发生改变的反馈事件
$scope.changePage = function(selPage){ }

在function 里面执行获取下一页列表的方法, 参数对应的是 条数跟页数,要将获取到的 总条数赋值给 allCount
==注意:==
点击搜索时 记得初始化 页数 也就是这里的 $scope.pagingM = 1
前端分页
//比服务器端分页多两个参数 is-js-paging //填写你要循环数组的名字 itemList all-list // 填写跟itemList 一样数据的另一个数组(不可以用itemList, 自己随便取一个) allCount // 等于 itemList.length 其余的不变


======================================== 效果结束 =============================================
这是我的首次写博客,排版比较渣。
记录自己的成长,也认识到自己的渣,这样才有动力,才能开心的写代码。 冏囧(๑•̀ㅂ•́)و✧。
更新于 2018-12-21
angularjs分页组件的更多相关文章
- angularjs使用directive实现分页组件
闲来没事,分享下项目中自己写的分页组件.来不及了,直接上车. 效果: 输入框可任意输入,并会自动提交到该页 html: <ul class="page clearfix"&g ...
- 基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...
- angular-ui分页组件
http://angular-ui.github.io/bootstrap/#/pagination 分页组件只提供生成分页按钮,数据的显示需要使用ng-repeat, 注意设置 items-per- ...
- asp.net mvc4+mysql做一个简单分页组件(部分视图)
在开始做mysql分页功能组件前,便设定的是要有一定可复用性.先在项目里Views文件夹下右键新建名为_PaginationComponent.cshtml,这里html及css我采用的bootstr ...
- ReactJS实现的通用分页组件
大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果 ...
- 基于vue2.0的分页组件开发
今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...
- 基于Vue封装分页组件
使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...
- [js开源组件开发]ajax分页组件
ajax分页组件 我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...
- javascript 分页组件
自己写的一个简单的分页组件,主要功能还有实现都在JS中,html页面中只用增加一个放置生成分页的DIV,并给定容器的id. html结构如下: <ul class="paginatio ...
随机推荐
- Kubernetes初探:原理及实践应用
总体概览 如下图所示是我初步阅读文档和源代码之后整理的总体概览,基本上可以从如下三个维度来认识Kubernetes. 操作对象 Kubernetes以RESTFul形式开放接口,用户可操作的REST对 ...
- 安装 oracle 11g 发行版 出现错误:由于以下错误,Enterprise Manager配置失败,启动Database Control时出错
解决方案如下进入dos(1)查看dbconsole状态:emctl status dbconsole 显示:Environment variable ORACLE_SID not defined. P ...
- Set 接口常用子类及其特点
Set 集合中元素不可重复,是无序的(存入和取出的顺序是不一样的), Set 接口中的方法和 Collection 接口一致. 常用子类: HashSet : 内部数据结构是哈希表, 是不同步的 Li ...
- 数据库字符集(AL32UTF8)和客户端字符集(2%)是不同的
登录oracle数据库时我们会遇到这样的提示信息:“数据库字符集(AL32UTF8)和客户端字符集(2%)是不同的”. 这是由于数据库服务端和客户端的字符集不一致所造成的,服务端字符集和客户端字符集相 ...
- 从es中拉取全部数据/大量数据 使用scroll+scan避免深分页
es一次请求默认返回的数据条数是10条,可以通过设置size参数来控制返回数据的条数: 如果要返回很多数据,可以把size设置的很大,不过elastic search默认size最大不能超过1万. 那 ...
- 在VMW里安装Ghost操作系统遇到的问题及解决的办法
条件:Ghost系列系统镜像文件 遇到的问题:1.导入镜像文件时提示“无法检测此光盘映像中的操作系统”: 2.分区时提示“ezboot kernel not found” 解决办法:1.直接先创建一个 ...
- Log4j:log4j.properties 配置解析
Log4j 三个主要组件 Loggers(记录器):记录日志的工具,程序中就是用它来记录我们想要的日志信息. Appenders (输出源):日志输出到什么地方,可以是控制台.文件.流位置.数据库,等 ...
- 这些Python骚操作,你知道吗?
0x00 世界,你好 程序员第一次接触语言或者框架,基本上都有个 Hello World 的例子,这里 Python 直接将它做成了一个包. 0x01 Python 哲学 Python 执行 i ...
- MySQL数据库(5)- pymysql的使用、索引
一.pymysql模块的使用 1.pymysql的下载和使用 之前我们都是通过MySQL自带的命令行客户端工具mysql来操作数据库,那如何在python程序中操作数据库呢?这就需要用到pymysql ...
- weal woe
He is worth no weal that can bide no woe. 禁不起吃苦的人不配得到幸福 有句谚语叫No weal without woe 福兮祸所伏 ; 祸兮福所倚 weal和 ...