这是我第一次写博客,激动,首先,我也是个菜鸟,分享一下自己写的服务器端分页的代码,自己一步一步写的,其中也有参考别人的代码。技术比较渣,先这样了。

// ====== 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分页组件的更多相关文章

  1. angularjs使用directive实现分页组件

    闲来没事,分享下项目中自己写的分页组件.来不及了,直接上车. 效果: 输入框可任意输入,并会自动提交到该页 html: <ul class="page clearfix"&g ...

  2. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  3. angular-ui分页组件

    http://angular-ui.github.io/bootstrap/#/pagination 分页组件只提供生成分页按钮,数据的显示需要使用ng-repeat, 注意设置 items-per- ...

  4. asp.net mvc4+mysql做一个简单分页组件(部分视图)

    在开始做mysql分页功能组件前,便设定的是要有一定可复用性.先在项目里Views文件夹下右键新建名为_PaginationComponent.cshtml,这里html及css我采用的bootstr ...

  5. ReactJS实现的通用分页组件

    大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果 ...

  6. 基于vue2.0的分页组件开发

    今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...

  7. 基于Vue封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...

  8. [js开源组件开发]ajax分页组件

    ajax分页组件 我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...

  9. javascript 分页组件

    自己写的一个简单的分页组件,主要功能还有实现都在JS中,html页面中只用增加一个放置生成分页的DIV,并给定容器的id. html结构如下: <ul class="paginatio ...

随机推荐

  1. Python菜鸟之路:Django 分页

    Django的分页没有多少需要说的,有一点需要关注,在自定制分页功能的时候,需要通过python代码来生成每一页的a标签链接,这个时候需要关注一点:默认情况下,为了安全考虑,防范XSS攻击,Djang ...

  2. C#中Windows通用的回车转Tab方法

    标签: windowsc#textboxbuttondropdownobject 2007-03-28 09:37 2773人阅读 评论(0) 收藏 举报  分类: C#(5)  版权声明:本文为博主 ...

  3. java 统计文件注释个数

    参考:https://segmentfault.com/q/1010000012636380/a-1020000012640905 题目:统计文件中//和/* */注释的个数,双引号中的不算 impo ...

  4. Linux(1)- 服务器核心知识、Linux入门、VMware与centeos安装、远程连接linux、linux基本命令使用

    一.服务器核心知识 1.电脑和电脑的硬件组成 现在的人们几乎无时无刻不在使用着电脑!不管是桌上型电脑(桌机).笔记型电脑(笔电).平板电脑,还是智慧型手机等等,这些东西都算是电脑.虽然接触这么多,但是 ...

  5. Android ViewGroup onInterceptTouchEvent

    public boolean onInterceptTouchEvent (MotionEvent ev) Implement this method to intercept all touch s ...

  6. springcloud 开发时快速剔除无用服务

    注册中心配置: # 关闭保护机制 eureka.server.enable-self-preservation=false #剔除失效服务间隔 eureka.server.eviction-inter ...

  7. SQL基础二

    一.SQL SELECT 语句 SELECT 语句用于从表中选取数据.结果被存储在一个结果表中(称为结果集). SQL SELECT 语法: SELECT 列名称 FROM 表名称 以及: SELEC ...

  8. appium API java

    原创内容,未经允许,禁止转载! driver.close();//关闭 driver.closeApp();//关闭应用,其实就是按home键把应用置于后台 driver.currentActivit ...

  9. python16_day16【Django_ORM、模板】

    一.ORM 1.MySQL配置 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'books', #你 ...

  10. Poj 1755Triathlon 未Ac,先mark

    地址:http://poj.org/problem?id=1755 题目: Triathlon Time Limit: 1000MS   Memory Limit: 10000K Total Subm ...