This is the fourth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

preface

These two days I wrote a personal project – message wall: an online convenience note form, but also can be expanded into a wishing wall, tree hole a project. Previous article address link: Message wall

At first, there were few function points, and then some comments were slowly added for general suggestions or optimization. Such as:

  • Add font and title color
  • To increase the paging

That’s what this article is about:

Realized effect:

Online preview address

The first problem is that you can get all the data, how to achieve paging in fact this problem is very simple, all the data to get the case, it is of course to point to which page is to display the content of the page, as long as the corresponding content can be displayed.

Normal simple pagination

Example: a array,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15 [0], the array length is 16, such as to each page 5 data, and then each page page is,1,2,3,4 [0], [5,6,7,8,9],,11,12,13,14 [10], [15]

The implementation is as follows:

function getPageDate(page){
   const arr1 = arr
   return arr1.slice((page-1)*5,page*5)
}
Copy the code

This page is the one that belongs to the total list already with pageSize=5, and then simply find the array data on page n

Paging in regression items

Known parameter arrangement:

  • Pagination: currentPage number, currentPage, and the pageSize of how much data is a page
  • Data: first we have a list allLists of all data, and then the array to be displayed is defined as showLists

From what we know above we can know some additional parameters

  • AllLists. Length is the total number of data
  • Math.ceil(allLists. Length/pageSize) is the total number of pages

Improved pre-pagination

Implement paging:

If (totalPage===1){// If there is only one page, showLists=allLists}else{// If there is more than one page, get the current page data showLists= allLists.slice((currentPage-1)*pageSize,currentPage*pageSize) }Copy the code

Since the data in the project is returned in ascending order of time, the new message can only be seen by clicking on the last page. If I am the person who left the message, I must hope that I can see the message after leaving it, rather than manually looking for it on the last page. Here are two solutions

  • The easiest thing to do is to return in ascending order so I’ll reverse() and make it descending, and that’s not easy
  • The way you slice the data has been reworked

So I’m here, of course, to illustrate the second method

If (totalPage===1){// If there is only one page, showLists=allLists}else{// If there is more than one page, get the current page data showLists= allLists.slice(allLists.length-currentPage*pageSize,allLists.length-(currentPage-1)*pageSize) }Copy the code

If you write it like this, you’re not thinking about everything, because allLists. Length -currentPage*pageSize might be negative for the last page, so you have to do something better, either think about the last page, AllLists. Length -currentPage*pageSize is less than 0

ShowLists = allLists. Slice (allLists. Length -currentPage*pageSize<0? 0:showLists = allLists.slice(allLists.length-currentPage*pageSize,allLists.length-(currentPage-1)*pageSize),allLists.length-(currentPa Ge -1)*pageSize) // or consider totlePage===currentPage(does the currentPage equal the total number of pages?) , true is the last pageCopy the code

Improved paging

To this train of thought to solve the paging, to which I also deployed the first page, but I found a new use with problems, more than 1 page, first page is always full, because when we take the first page of data is the last article pageSize take the number of data, the user experience is not good enough, appear page is random, Continue to improve to satisfy the first page except the first case is full pageSize bar, the rest of the first in the first page

If (totlePage===1){// If there is only one page showLists=allLists} else{// If there is more than one page, obtain the data of the current page showLists= allLists.slice((totlePage-currentPage)*pageSize,(totlePage-currentPage+1)*pageSize }Copy the code

True why not consider the first page of the case, the situation for the first page is actually take (totlePage – 1) * pageSize, totlePage * pageSize between data, such as the total number of article = 16, pageSige = 5, the available totalPage = 4, Slice (15,20) : = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

ShowLists = allLists. Slice ((totlePage-currentPage)*pageSize,allLists. Length)Copy the code

Effects achieved before and after improvement

The first page, more than one page, the same number of data,

  • Before improvement, the first page shows the latest 30 data, and the second page shows the remaining 13 data.
  • After the improvement, the first page shows the latest 13 data, and the second page shows the remaining 30 data.

But I prefer the improved presentation:

Count the number of messages

Careful you must have found that the top of each message is marked the current is the number of messages, a simple implementation, first of all must use the calculation attribute to get, and then according to the current pages and the number of the message in the current page to calculate, parameter V is the number of the message on the current page, I here 30 is pageSize

Get message index before improvement

MsgLength -pageSize*(totlaPage-currentPage)+v msgLength-pageSize*(totlaPage-currentPage)+v PageSize *(totlaPage-currentPage), the total number of items minus it becomes the total number of items greater than the currentPage, which is the starting point of the currentPage number and then add a number, perfect find what you need

GetNumber (v){if (this.totlapage === this.currentPage) {return v}else{return (this.msgLength-30*(this.totlaPage - this.currentPage) + v) } },Copy the code

Improved to get message index

After the improvement is much simpler, the current number plus the number of pages * the number of pages 30

GetNumber (v){return 30*(this.totlapage - this.currentPage) + v},Copy the code

This article summary

The above may be partial theory + their own blind code, not to explain how to use the paging component, partial theory, is also a simple explanation of the wall in front of the paging implementation, if you feel good, move your little finger! Practice makes Perfect! .