ホームページ > 記事 > ウェブフロントエンド > JavaScript に関する興味深い質問: フロントエンド ページング
フロントエンドでのページングは、サーバー側の負担を軽減し、リクエストの数とサーバーの計算量を減らすことができます。
ただし、どこでも簡単に呼び出せるようにコンポーネント化する必要があります。そうしないと、各ページに 1 つずつ記述することになり、無駄で手間がかかります。
以下に示すように、そのようなヘルパー クラスを実装するのが最善です:
//第一个参数是要分页的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
フロントエンド ページングでもバックエンド ページングでも、考え方は同じで比較的単純ですが、不正な値。
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; }
上記は JavaScript に関する興味深い質問です。フロントエンド ページングの内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。