发表于: 2017-06-27 22:13:15
1 924
今天完成的事情:
完成公司详情和在招职位的静态页面的渲染,功能也都基本完成。
明天计划的事情:
把剩余的一些页面跳转完成。
做codeReview
遇到的困难:
在做分页功能的过程中遇到了一些麻烦,之前用朱英杰使用的插件,不知道是什么原因,插件里面的一个变量一直显示未定义,花了很长的时间都没有解决。然后就开始寻找别的分页插件。后来我看了ui-bootstrap上面的插件做得很不错,因为之前在轮播图中已经引入了一次ui-bootstrap,所以这次就不需要额外引入新的文件。直接照着demo将html渲染出来了
html代码如下
<div class="paging">
<ul uib-pagination first-text="首页" last-text="末页" next-text="下一页" previous-text="上一页" total-items="vm.bigTotalItems" ng-model="vm.bigCurrentPage" max-size="maxSize" num-pages="numPages" class="pagination-sm" boundary-links="true" force-ellipses="true" ng-change="pageChanged()"></ul>
<div>
跳转至第<input type="number" ng-model="pageNum">页
</div>
<button type="button" class="btn btn-info" ng-click="setPage(pageNum)">确定</button>
</div>
html看起来很多,其实就3行代码,第一行就是翻页,第二行代码是跳转至某页,第三行是个确定按钮。
对于第一行的各种属性,在ui-bootstrap中有详细的介绍,我也就不仔细地说了。
uib分页设置
boundary-links
Ç (缺省:false
) -是否显示第一/最后的按钮。boundary-link-numbers
$ Ç (默认值:false
) -是否始终显示第一页和最后一页的数字。如果max-size
小于页面数,那么在必要时,第一页和最后一页仍然以中间的椭圆显示。注意:max-size
指范围的中心。此选项最多可以在结束值的显示范围的每一侧添加多达两个数字,并且将是省略号,但由数字代替,因为它是顺序的。direction-links
$ Ç (缺省:true
) -是否显示上一个/下一个按钮。first-text
Ç (默认值:First
) -文本的第一个按钮。force-ellipses
$ Ç (默认值:false
) -时,也显示椭圆rotate
的真实,max-size
比页数小。items-per-page
$ C (默认值:10
) -每页的最大项目数目。小于1的值表示一页上的所有项目。last-text
Ç (默认值:Last
) -文本的最后按钮。max-size
$ (默认值:null
) -为分页大小数限制。next-text
Ç (默认值:Next
) -文本为下一步按钮。ng-change
$ - 每当页面更改时,可用于调用函数。ng-disabled
$ (默认值:false
) -用来禁用分页组件。ng-model
$ - 当前页码。第一页是1。num-pages
$ 只读 (缺省:angular.noop
) -分配的页面来显示的总数量的可选表达式。page-label
(默认值:angular.identity
) -一个可选的表达式来覆盖基于传递当前页面的索引页面的标签。$page
在模板中支持页码。previous-text
Ç (默认值:Previous
) -文本为上一个按钮。rotate
$ Ç (默认值:true
) -是否保留当前页面可见的人中间。template-url
(默认值:uib/template/pagination/pagination.html
) -覆盖该组件的模板,自定义模板提供total-items
$ - 所有页面中的项目总数。
然后html渲染出来后,数据获取又出现了问题,后来发现原来是对ui-bootstrap插件了解还不够深入,后来多看了几遍属性介绍还有相关demo,然后就完成了分页功能。
收获:
学会使用ui-bootstrap写出分页功能,下次自己可以试着写一下,然后封装起来
评论