Skip to content

Commit de8a593

Browse files
liuwenchaoliuwenchao
committed
simplify pagination.
1 parent 0fc530a commit de8a593

File tree

3 files changed

+168
-234
lines changed

3 files changed

+168
-234
lines changed

‎dist/aha-table.html‎

Lines changed: 72 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@
5454
<polymer-element name="aha-table" attributes="
5555
selectable searchable copyable removable
5656
pagesize data-sizelist
57-
selecttitle selectalltitle sorttitle columntitle copytitle removetitle edittitle searchtitle pagesizetitle summarytitle
57+
selecttitle selectalltitle sorttitle columntitle copytitle removetitle edittitle searchtitle firsttitle nexttitle previoustitle lasttitle
58+
pagetext pageoftext pagesizetext summarytext itemoftext
5859
hintclass copyclass removeclass filtershownclass filterhiddenclass">
5960
<template>
6061
<style>
@@ -100,44 +101,28 @@
100101
aha-table .searchable select {
101102
width: 80px;
102103
}
103-
aha-table .pagination {
104-
margin: 10px;
105-
text-align: center;
106-
line-height: 20px;
107-
}
108-
aha-table .pagination table {
109-
border-spacing: 0;
110-
border: 0;
111-
}
112-
aha-table .pagination td {
113-
padding: 0;
114-
}
115-
aha-table .pagination .active button {
104+
aha-table .pagination .active {
116105
background-color: #ccc;
117106
}
118-
aha-table .pagination .available button:hover {
107+
aha-table .pagination .available:hover {
119108
background-color: #eee;
120109
}
121-
aha-table .pagination .disabled button {
110+
aha-table .pagination .disabled {
122111
color: #ccc;
123112
}
113+
aha-table .pagination button+button {
114+
margin-left: -10px;
115+
}
124116
aha-table .pagination button {
125117
background-color: #fff;
126118
border: 1px solid #eee;
127-
min-width: 40px;
128-
margin: 0;
129-
line-height: 20px;
130-
padding: 4px 12px;
131-
text-decoration: none;
132119
cursor: pointer;
133120
user-select: none;
134121
}
135122
aha-table .pagination input {
136123
background-color: #fff;
137124
border: 1px solid #eee;
138-
width: 40px;
139-
line-height: 20px;
140-
padding: 4px 12px;
125+
width: 20px;
141126
}
142127
aha-table table .hide {
143128
display: none !important;
@@ -286,37 +271,42 @@
286271
</tbody>
287272
<tfoot>
288273
<tr>
289-
<td colspan="{{meta.length+1}}" class="pagination">
290-
<table>
291-
<tr>
292-
<td class='{{currentpage === 0 ? "disabled" : "available"}} '>
293-
<button on-click="{{firstPage}}">{{first}}</button>
294-
</td>
295-
<td class='{{currentpage === 0 ? "disabled" : "available"}}'>
296-
<button on-click="{{prevPage}}">{{previous}}</button>
297-
</td>
298-
<td template
299-
repeat="{{ n in currentRange }}"
300-
class="{{n == currentpage ? 'active' : 'available'}}" >
301-
<button data-item="{{n}}" on-click="{{setPage}}">{{n+1}}</button>
302-
</td>
303-
<td class='{{pageCount <= 0 || currentpage === pageCount? "disabled" : "available"}}'>
304-
<button on-click="{{nextPage}}">{{next}}</button>
305-
</td>
306-
<td class='{{pageCount <= 0 || currentpage === pageCount? "disabled" : "available"}}'>
307-
<button on-click="{{lastPage}}">{{last}}</button>
308-
</td>
309-
<td>
310-
{{ pagesizetitle }}
311-
<select value="{{pagesize}}">
312-
<option template repeat="{{n in sizelist}}" selected?="{{ n == pagesize }}">{{n}}</option>
313-
</select>
314-
</td>
315-
<td>
316-
{{ summarytitle }} {{ firstItemIndex }} - {{ lastItemIndex }} of {{ itemCount }}
317-
</td>
318-
</tr>
319-
</table>
274+
<td colspan="{{meta.length+1}}">
275+
<div class="pagination">
276+
<span class="paging">
277+
<button
278+
title="{{firsttitle}}"
279+
class='first {{currentpage === 1 ? "disabled" : "available"}} '
280+
on-click="{{firstPage}}">{{first}}</button>
281+
<button
282+
title="{{previoustitle}}"
283+
class='previous {{currentpage === 1 ? "disabled" : "available"}}'
284+
on-click="{{prevPage}}">{{previous}}</button>
285+
<span class="pager">
286+
{{pagetext || ''}}
287+
<input type="text" value="{{currentpage}}"/>
288+
{{pageoftext || '/'}}
289+
{{pageCount}}
290+
</span>
291+
<button
292+
title="{{nexttitle}}"
293+
class='next {{pageCount <= 0 || currentpage === pageCount? "disabled" : "available"}}'
294+
on-click="{{nextPage}}">{{next}}</button>
295+
<button
296+
title="{{lasttitle}}"
297+
class='last {{pageCount <= 0 || currentpage === pageCount? "disabled" : "available"}}'
298+
on-click="{{lastPage}}">{{last}}</button>
299+
</span>
300+
<span class="pagesize">
301+
{{ pagesizetext || '' }}
302+
<select value="{{pagesize}}">
303+
<option template repeat="{{n in sizelist}}" selected?="{{ n == pagesize }}">{{n}}</option>
304+
</select>
305+
</span>
306+
<span class="summary">
307+
{{ summarytext || ''}} {{ firstItemIndex }} - {{ lastItemIndex }} {{ itemoftext || '/'}} {{ itemCount }}
308+
</span>
309+
</div>
320310
</td>
321311
</tr>
322312
</tfoot>
@@ -376,19 +366,15 @@
376366
//pagesize: the number of items to show per page
377367
pagesize: 10,
378368
//currentpage: the current active page in view
379-
currentpage: 0,
380-
//currentRange: the range of pages (e.g 1, 2, 3, 4, 5) to display
381-
currentRange: [],
369+
currentpage: 1,
382370
//pageCount: the number of paginated pages
383371
pageCount: 0,
384372
//itemCount: the number of visible items
385373
itemCount: 0,
386374
//firstItemIndex: the index number of first item in the page, start from 1
387-
firstItemIndex: 0,
375+
firstItemIndex: 1,
388376
//lastItemIndex: the index number of last item in the page, start from 1
389-
lastItemIndex: 0,
390-
//rangeSize: the total size of the paginated range of items
391-
rangeSize: 5,
377+
lastItemIndex: 1,
392378
//sizelist: range list to adjust page size.
393379
sizelist: [5, 10, 20, 50, 100],
394380
//previous: label for the Previous button
@@ -467,7 +453,6 @@
467453
this.editingRow._editing = false;
468454
}
469455
this.editingRow = row;
470-
e.target.focus();
471456
},
472457
save: function(e) {
473458
var row = e.target.templateInstance.model.row;
@@ -536,7 +521,7 @@
536521

537522
};
538523

539-
this.currentpage = 0;
524+
this.currentpage = 1;
540525
this.refreshPagination();
541526
}
542527
},
@@ -570,68 +555,41 @@
570555
//==================
571556
//pagination
572557
firstPage: function() {
573-
this.currentpage = 0;
558+
this.currentpage = 1;
574559
},
575560
prevPage: function() {
576-
if ( this.currentpage > 0 ) {
561+
if ( this.currentpage > 1 ) {
577562
this.currentpage--;
578563
}
579564
},
580565
nextPage: function() {
581-
if ( this.currentpage < this.getPageCount() ) {
566+
if ( this.currentpage < this.pageCount ) {
582567
this.currentpage++;
583568
}
584569
},
585570
lastPage: function() {
586-
this.currentpage = this.getPageCount();
587-
},
588-
getItemCount: function() {
589-
var count = 0;
590-
for (var i = this.data.length - 1; i >= 0; i--) {
591-
if (!this.data[i]._filtered) {
592-
count++;
593-
}
594-
};
595-
return count;
596-
},
597-
getPageCount: function() {
598-
return Math.ceil( this.getItemCount() / this.pagesize ) - 1;
599-
},
600-
setPage: function(e,d,t) {
601-
this.currentpage = parseInt( t.dataset.item, 10 );
571+
this.currentpage = this.pageCount;
602572
},
603573
currentpageChanged: function(){
574+
this.currentpage = this.currentpage ? parseInt(this.currentpage) : 0;
575+
this.currentpage = this.currentpage < 1 ? 1 : this.currentpage;
576+
this.currentpage = this.pageCount > 0 && this.currentpage > this.pageCount ? this.pageCount : this.currentpage;
604577
this.filterPage();
605-
this.currentRange = this.range();
606-
this.firstItemIndex = this.currentpage * this.pagesize + 1;
578+
this.firstItemIndex = (this.currentpage-1) * this.pagesize+1;
607579
if (this.currentpage === this.pageCount) {
608580
this.lastItemIndex = this.itemCount;
609581
} else {
610-
this.lastItemIndex = (this.currentpage + 1)* this.pagesize;
582+
this.lastItemIndex = (this.currentpage)* this.pagesize;
611583
}
612584
},
613585
pagesizeChanged: function(){
614586
this.pagesize = parseInt(this.pagesize);
615-
this.currentpage = 0;
587+
this.currentpage = 1;
616588
this.refreshPagination();
617589
},
618-
range: function() {
619-
var paginations = [];
620-
var start = this.currentpage;
621-
622-
if ( start > this.getPageCount() - this.rangeSize ) {
623-
start = this.getPageCount() - this.rangeSize + 1;
624-
}
625-
626-
for ( var i = start; i < start + this.rangeSize; i++ ) {
627-
if (i >= 0) {
628-
paginations.push(i);
629-
}
630-
}
631-
return paginations;
632-
},
590+
// call this when total count is no changed.
633591
filterPage: function() {
634-
var from = this.currentpage * this.pagesize;
592+
var from = (this.currentpage-1) * this.pagesize;
635593
var to = from + this.pagesize;
636594
var count = 0;
637595
for (var i = 0; i < this.data.length; i++) {
@@ -646,19 +604,17 @@
646604
}
647605
};
648606
},
607+
// call this when total count is change.
649608
refreshPagination: function() {
650-
// Update current range to account for items per page, range.
651-
this.currentRange = this.range();
652-
653609
// Cache the total page count and item count
654-
this.itemCount = this.getItemCount();
655-
this.pageCount = this.getPageCount();
656-
this.firstItemIndex = this.currentpage * this.pagesize + 1;
657-
if (this.currentpage === this.pageCount) {
658-
this.lastItemIndex = this.itemCount;
659-
} else {
660-
this.lastItemIndex = (this.currentpage + 1)* this.pagesize;
661-
}
610+
var count = 0;
611+
for (var i = this.data.length - 1; i >= 0; i--) {
612+
if (!this.data[i]._filtered) {
613+
count++;
614+
}
615+
};
616+
this.itemCount = count;
617+
this.pageCount = Math.ceil( count / this.pagesize );
662618

663619
// Update model bound to UI with filtered range
664620
this.filterPage();
@@ -821,10 +777,10 @@
821777
searchplaceholder: undefined,
822778
ready: function() {
823779
if (this.dataset.choices) {
824-
options = [];
780+
this.options = [];
825781
var choices = JSON.parse(this.dataset.choices);
826782
for (var option in choices) {
827-
options.push({'value': option, 'label': choices[option]});
783+
this.options.push({'value': option, 'label': choices[option]});
828784
}
829785
}
830786
}

‎index.html‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,21 @@
5656
#console {
5757
color: red;
5858
}
59+
#themed .paging {
60+
display: block;
61+
float: left;
62+
}
63+
#themed .pagesize {
64+
display: block;
65+
float: left;
66+
}
67+
#themed .summary {
68+
display: block;
69+
float: right;
70+
}
71+
#themed tfoot td {
72+
background-color: #eee;
73+
}
5974
</style>
6075
</head>
6176
<body>
@@ -71,16 +86,23 @@ <h2>Advanced usage: themed, customized columns, customized attributes, customize
7186
searchable="false"
7287
pagesize="5"
7388
data-sizelist="[2,5,10]"
89+
pagesizetext="Page Size: "
90+
summarytext="Viewing: "
91+
pagetext="Page:"
92+
pageoftext="of"
93+
itemoftext="of"
7494
searchtitle="Show/Hide Filters"
75-
pagesizetitle="Page Size: "
76-
summarytitle="Viewing: "
7795
sorttitle="click to sort"
7896
selecttitle="click to select"
7997
selectalltitle="click to select/deselect all"
8098
edittitle="click to edit"
8199
copytitle="click to copy"
82100
removetitle="click to remove"
83101
searchtitle="click to show/hide search filters bar"
102+
firsttitle="First"
103+
previoustitle="Previous"
104+
nexttitle="Next"
105+
lasttitle="Last"
84106
copyclass="fa fa-copy"
85107
hintclass="fa fa-info-circle"
86108
removeclass="fa fa-trash-o"

0 commit comments

Comments
 (0)