|
@@ -1,3 +1,22 @@
|
|
|
+<!--<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">-->
|
|
|
+ <!--<div class="btn-group mr-2" role="group" aria-label="First group">-->
|
|
|
+ <!--<button type="button" class="btn btn-light" disabled title="首页"><i class="fa fa-caret-left"></i></button>-->
|
|
|
+ <!--<button type="button" class="btn btn-light" disabled title="上一页"><i class="fa fa-angle-left"></i></button>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--<div class="btn-group mr-2" role="group" aria-label="Second group">-->
|
|
|
+ <!--<button type="button" class="btn btn-light active">1</button>-->
|
|
|
+ <!--<button type="button" class="btn btn-light">2</button>-->
|
|
|
+ <!--<button type="button" class="btn btn-light">3</button>-->
|
|
|
+ <!--<button type="button" class="btn btn-light">4</button>-->
|
|
|
+ <!--<button type="button" class="btn btn-light">5</button>-->
|
|
|
+ <!--<button type="button" class="btn btn-light" title="更多">...</button>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--<div class="btn-group" role="group" aria-label="Third group">-->
|
|
|
+ <!--<button type="button" class="btn btn-light" title="下一页"><i class="fa fa-angle-right"></i></button>-->
|
|
|
+ <!--<button type="button" class="btn btn-light" title="尾页"><i class="fa fa-caret-right"></i></button>-->
|
|
|
+ <!--</div>-->
|
|
|
+<!--</div>-->
|
|
|
+
|
|
|
<nav aria-label="Page navigation example">
|
|
|
<ul class="pagination"></ul>
|
|
|
</nav>
|
|
@@ -7,6 +26,7 @@
|
|
|
bootstrapMajorVersion: 4,
|
|
|
currentPage: "<%= pageInfo.page %>",
|
|
|
totalPages: "<%= pageInfo.total %>",
|
|
|
+ numberOfPages: 5,
|
|
|
size: "normal",
|
|
|
itemContainerClass: function(type, page, current) {
|
|
|
let className = 'page-item';
|
|
@@ -14,12 +34,18 @@
|
|
|
this.totalPages = parseInt(this.totalPages);
|
|
|
|
|
|
switch (type) {
|
|
|
+ case "first":
|
|
|
+ className = this.currentPage === 1 ? className + ' disabled' : className;
|
|
|
+ break;
|
|
|
case "prev":
|
|
|
className = this.currentPage === 1 ? className + ' disabled' : className;
|
|
|
break;
|
|
|
case "next":
|
|
|
className = this.currentPage === this.totalPages ? className + ' disabled' : className;
|
|
|
break;
|
|
|
+ case "last":
|
|
|
+ className = this.currentPage === this.totalPages ? className + ' disabled' : className;
|
|
|
+ break;
|
|
|
case "page":
|
|
|
className = page === this.currentPage ? className + ' active' : className;
|
|
|
break;
|
|
@@ -33,32 +59,34 @@
|
|
|
itemTexts: function(type, page, current) {
|
|
|
switch (type) {
|
|
|
case "first":
|
|
|
- return "«";
|
|
|
+ return '<i class="fa fa-caret-left"></i>';
|
|
|
case "prev":
|
|
|
- return "上一页";
|
|
|
+ return '<i class="fa fa-angle-left"></i>';
|
|
|
case "next":
|
|
|
- return "下一页";
|
|
|
+ return '<i class="fa fa-angle-right"></i>';
|
|
|
case "last":
|
|
|
- return "最后一页";
|
|
|
+ return '<i class="fa fa-caret-right"></i>';
|
|
|
case "page":
|
|
|
return page;
|
|
|
+ case "more":
|
|
|
+ return '...';
|
|
|
}
|
|
|
},
|
|
|
shouldShowPage: function (type, page, current) {
|
|
|
let result = true;
|
|
|
switch (type) {
|
|
|
case "first":
|
|
|
- result = (current !== 1);
|
|
|
break;
|
|
|
case "prev":
|
|
|
break;
|
|
|
case "next":
|
|
|
break;
|
|
|
case "last":
|
|
|
- result = false;
|
|
|
break;
|
|
|
case "page":
|
|
|
- result = true;
|
|
|
+ break;
|
|
|
+ case "more":
|
|
|
+ result = (page !== this.totalPages);
|
|
|
break;
|
|
|
}
|
|
|
return result;
|