2019.3.11日报 JS任务八使用分页组件tm-pagination

JS任务八中需要使用到分页,自己不会写,到github上搜索了一个tm-pagination组件,组件地址:https://github.com/miaoyaoyao/AngularJs-UI,并尝试在任务中使用。

直接clone下来的demo无法正常显示,后来重新到在线的demo上拷贝了template,并且修改为使用bootstrap4:

template:'<div class="p-2 page-list d-flex align-items-center justify-content-start flex-wrap">' +
'<ul class="pagination flex-wrap" ng-show="conf.totalItems > 0">' +
'<li class="page-item" ng-class="{disabled: conf.currentPage == 1}" ng-click="prevPage()"><span class="page-link">&laquo;上一页</span></li>' +
'<li class="page-item" ng-repeat="item in pageList track by $index" ng-class="{active: item == conf.currentPage, separate: item == \'...\'}" ' +
'ng-click="changeCurrentPage(item)">' +
'<span class="page-link">{{ item }}</span>' +
'</li>' +
'<li class="page-item" ng-class="{disabled: conf.currentPage == conf.numberOfPages}" ng-click="nextPage()"><span class="page-link">下一页&raquo;</span></li>' +
'</ul>' +
'<div class="ml-2 d-flex align-items-center page-total" ng-show="conf.totalItems > 0">' +
'每页<select ng-model="conf.itemsPerPage" ng-options="option for option in conf.perPageOptions " ng-change="changeItemsPerPage()"></select>条' +'/共<strong>{{ conf.totalItems }}</strong>&nbsp;' +
'第<input type="text" ng-model="jumpPageNum" />页 ' +'<button ng-click="jumpToPage()" class="ml-2 page-link">确认</button>'+
'</div>' +
'<div class="no-items" ng-show="conf.totalItems <= 0">暂无数据</div>' +
'</div>',

并且增加了

'<button ng-click="jumpToPage()" class="ml-2 page-link">确认</button>'
点击后执行jumpToPage()跳转函数。

猜你喜欢

转载自www.cnblogs.com/jshaxclcc/p/10513039.html
今日推荐