updates paginator with following the restriction mode

This commit is contained in:
kunw 2016-08-06 16:12:48 +08:00
parent d4035e0ec3
commit 066d108012
3 changed files with 113 additions and 110 deletions

View File

@ -48,7 +48,7 @@
</tbody>
</table>
</div>
<paginator class="pull-right" total-count="//vm.totalCount//" page-size="//vm.pageSize//" page="vm.page" display-count="3"></paginator>
<paginator class="pull-right" total-count="//vm.totalCount//" page-size="//vm.pageSize//" page="vm.page" display-count="2"></paginator>
</div>
</div>
</div>

View File

@ -53,7 +53,7 @@
};
vm.page = 1;
vm.pageSize = 2;
vm.pageSize = 1;
$scope.$watch('vm.totalCount', function(current) {
if(current) {

View File

@ -32,7 +32,7 @@
return directive;
function link(scope, element, attrs, ctrl) {
scope.$watch('vm.totalCount', function(current) {
if(current) {
var totalCount = current;
@ -40,54 +40,10 @@
var displayCount = parseInt(ctrl.displayCount);
console.log('Total Count:' + totalCount + ', Page Size:' + pageSize + ', Display Count:' + displayCount);
var TimeCounter = function() {
this.time = 0;
this.minimum = 0;
this.maximum = 0;
}
TimeCounter.prototype.setMaximum = function(maximum) {
this.maximum = maximum;
}
TimeCounter.prototype.increment = function() {
if(this.time < this.maximum) {
++this.time;
++ctrl.page;
}
scope.$apply();
}
TimeCounter.prototype.canIncrement = function() {
if(this.time < this.maximum) {
return true;
}
return false;
}
TimeCounter.prototype.decrement = function() {
if(this.time > this.minimum) {
--this.time;
--ctrl.page;
}
scope.$apply();
}
TimeCounter.prototype.canDecrement = function() {
if(this.time > this.minimum) {
return true;
}
return false;
}
TimeCounter.prototype.getTime = function() {
return this.time;
}
var buttonCount = Math.ceil(totalCount / pageSize);
var tc = new TimeCounter();
ctrl.buttonCount = buttonCount;
if(buttonCount <= displayCount) {
tc.setMaximum(0);
}else{
@ -97,20 +53,6 @@
element.find('ul li:first a').on('click', previous);
element.find('ul li:last a').on('click', next);
var drawButtons = function(time) {
element.find('li[tag="pagination-button"]').remove();
var buttons = [];
for(var i = 1; i <= displayCount; i++) {
var displayNumber = displayCount * time + i;
if(displayNumber <= buttonCount) {
buttons.push('<li tag="pagination-button"><a href="javascript:void(0)" page="' + displayNumber + '">' + displayNumber + '</a></li>');
}
}
$(buttons.join(''))
.insertAfter(element.find('ul li:eq(0)')).end()
.on('click', buttonClickHandler);
}
drawButtons(tc.getTime());
togglePrevious(tc.canDecrement());
@ -118,54 +60,115 @@
togglePageButton();
function togglePrevious(status) {
if(status){
element.find('ul li:first').removeClass('disabled');
}else{
element.find('ul li:first').addClass('disabled');
}
}
function toggleNext(status) {
if(status) {
element.find('ul li:last').removeClass('disabled');
}else{
element.find('ul li:last').addClass('disabled');
}
}
function buttonClickHandler(e) {
ctrl.page = $(e.target).attr('page');
togglePageButton();
togglePrevious(tc.canDecrement());
toggleNext(tc.canIncrement());
scope.$apply();
}
function togglePageButton() {
element.find('li[tag="pagination-button"]').removeClass('active');
element.find('li[tag="pagination-button"] a[page="' + ctrl.page + '"]').parent().addClass('active');
}
function previous() {
if(tc.canDecrement()) {
tc.decrement();
drawButtons(tc.getTime());
element.find('li[tag="pagination-button"] a[page="' + ctrl.page + '"]').trigger('click');
}
scope.$apply();
}
function next() {
if(tc.canIncrement()) {
tc.increment();
drawButtons(tc.getTime());
element.find('li[tag="pagination-button"] a[page="' + ctrl.page + '"]').trigger('click');
}
scope.$apply();
}
}
});
var TimeCounter = function() {
this.time = 0;
this.minimum = 0;
this.maximum = 0;
}
TimeCounter.prototype.setMaximum = function(maximum) {
this.maximum = maximum;
}
TimeCounter.prototype.increment = function() {
if(this.time < this.maximum) {
++this.time;
++ctrl.page;
}
scope.$apply();
}
TimeCounter.prototype.canIncrement = function() {
if(this.time < this.maximum) {
return true;
}
return false;
}
TimeCounter.prototype.decrement = function() {
if(this.time > this.minimum) {
--this.time;
--ctrl.page;
}
scope.$apply();
}
TimeCounter.prototype.canDecrement = function() {
if(this.time > this.minimum) {
return true;
}
return false;
}
TimeCounter.prototype.getTime = function() {
return this.time;
}
var tc = new TimeCounter();
function drawButtons(time, displayCount, buttonCount) {
element.find('li[tag="pagination-button"]').remove();
var buttons = [];
for(var i = 1; i <= ctrl.displayCount; i++) {
var displayNumber = ctrl.displayCount * time + i;
if(displayNumber <= ctrl.buttonCount) {
buttons.push('<li tag="pagination-button"><a href="javascript:void(0)" page="' + displayNumber + '">' + displayNumber + '<span class="sr-only"></span></a></li>');
}
}
$(buttons.join(''))
.insertAfter(element.find('ul li:eq(0)')).end()
.on('click', buttonClickHandler);
}
function togglePrevious(status) {
if(status){
element.find('ul li:first').removeClass('disabled');
}else{
element.find('ul li:first').addClass('disabled');
}
}
function toggleNext(status) {
if(status) {
element.find('ul li:last').removeClass('disabled');
}else{
element.find('ul li:last').addClass('disabled');
}
}
function buttonClickHandler(e) {
ctrl.page = $(e.target).attr('page');
togglePageButton();
togglePrevious(tc.canDecrement());
toggleNext(tc.canIncrement());
scope.$apply();
}
function togglePageButton() {
element.find('li[tag="pagination-button"]').removeClass('active');
element.find('li[tag="pagination-button"] a[page="' + ctrl.page + '"]').parent().addClass('active');
}
function previous() {
if(tc.canDecrement()) {
tc.decrement();
drawButtons(tc.getTime());
element.find('li[tag="pagination-button"] a[page="' + ctrl.page + '"]').trigger('click');
}
scope.$apply();
}
function next() {
if(tc.canIncrement()) {
tc.increment();
drawButtons(tc.getTime());
element.find('li[tag="pagination-button"] a[page="' + ctrl.page + '"]').trigger('click');
}
scope.$apply();
}
}
}