Interessante JavaScript-Fragen: Front-End-Paging

Paging im Frontend ist eine coole Sache. Es kann den Druck auf der Serverseite verringern, die Anzahl der Anfragen und den Umfang der Serverberechnungen reduzieren.

Sie müssen es jedoch in eine Komponente umwandeln, damit es überall problemlos aufgerufen werden kann. Andernfalls wäre es undankbar, für jede Seite einen Satz zu schreiben.

Es ist am besten, eine solche Hilfsklasse wie unten gezeigt zu implementieren:

//第一个参数是要分页的JSON对象  
//第二个参数是每一页的最大项数  
var helper = new PaginationHelper(['a','b','c','d','e','f'], 4);  
//总共多少页 => Math.ceil(6 / 4)  
helper.pageCount(); // 2  
//总共多少项 => array.length  
helper.itemCount(); // 6  
//求当前页的项数，这个页的索引是从0开始的  
helper.pageItemCount(0); // 4  
//6 - 4 = 2  
helper.pageItemCount(1); // 2  
//总共才2页，所以当前页无效，返回-1  
helper.pageItemCount(2); // -1  
  
//当前索引是属于第几页？  
helper.pageIndex(5); // 1  
helper.pageIndex(2); // 0  
//总共都才6条记录，所以20无效  
helper.pageIndex(20); // -1  
//索引小于0，无效返回-1  
helper.pageIndex(-10); // -1

Ob es sich um Front-End-Paging oder Back-End-Paging handelt, die Idee ist die gleiche, beide sind es relativ einfach, allerdings muss man auf den Umgang mit illegalen Werten achten.

function PaginationHelper(collection, itemsPerPage){  
    this.collection = collection;  
    this.itemsPerPage = itemsPerPage;  
}  
  
PaginationHelper.prototype.itemCount = function() {  
    return this.collection.length;  
}  
  
PaginationHelper.prototype.pageCount = function() {  
    return Math.ceil(this.itemCount() / this.itemsPerPage);  
}  
  
PaginationHelper.prototype.pageItemCount = function(pageIndex) {  
    if(pageIndex < this.pageCount() - 1){  
        return this.itemsPerPage;  
    }  
    else if(pageIndex == this.pageCount() - 1){  
        return this.itemCount() - pageIndex * this.itemsPerPage;  
    }  
    else{  
        return -1;  
    }  
}  
  
PaginationHelper.prototype.pageIndex = function(itemIndex) {  
    if(itemIndex >=0 && itemIndex < this.itemCount()){  
        return Math.floor(itemIndex / this.itemsPerPage);  
    }  
    return -1;  
}

Das Obige ist die interessante JavaScript-Frage: Der Inhalt des Front-End-Paging. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!