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">«上一页</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">下一页»</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>条 ' + '第<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()跳转函数。