JavaScript fun: front-end Paging

Paging at the front end is a cool task. It can relieve the pressure on the server, reduce the number of requests, and reduce the server computing workload. Paging at the front end is a cool task. It can relieve the pressure on the server, reduce the number of requests, and reduce the server computing workload.

However, you need to make it a component form to facilitate calling everywhere. Otherwise, it would be effort-consuming to write a set for every page?

It is best to implement such a helper class, as shown below:

// The first parameter is the JSON object to be paged. // The second parameter is the maximum number of items on each page. var helper = new PaginationHelper (['A', 'B ', 'C', 'D', 'E', 'F'], 4); // total number of pages => Math. ceil (1, 6/4) helper. pageCount (); // 2 // Total number of items => array. length helper. itemCount (); // 6 // calculate the number of items on the current page. The index of this page is helper starting from 0. pageItemCount (0); // 4 // 6-4 = 2 helper. pageItemCount (1); // 2 // two pages in total. Therefore, the current page is invalid and-1 helper is returned. pageItemCount (2); //-1 // What page does the current index belong? Helper. pageIndex (5); // 1 helper. pageIndex (2); // 0 // there are only 6 records in total, so 20 is invalid helper. pageIndex (20); //-1 // If the index is smaller than 0,-1 helper is returned. pageIndex (-10); //-1

Both front-end and back-end pages have the same idea and are relatively simple. However, you must handle invalid values.

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;  }

The above is the JavaScript interesting question: the content of the front-end page. For more information, see the PHP Chinese website (www.php1.cn )!