Experience in using ivx implement paging of data acquisition

In the actual case, we often need to show some data, and these data are stored in the back-end database and may be a huge number, all of a sudden show up at the front desk of the interface is certainly not realistic, so that another one-time background so much data transmission to the front desk will be a great delay, so that the user experience is poor. Therefore, we need to adopt a paging way to get a small number of data, so that each time a user can quickly get feedback after the operation, while the front desk they do not hold a lot of data caused cases Caton, how to say it today paging achieve this effect.

1. component architecture
structure Demo is relatively simple, place the next page a column as a case body, add a paging component in the column, there is a cycle to create images for display on each page for the container, while the loop to create a data source An array of objects is paged data.

2. paging component
paging component is a component ivx expand in the main scenario is paged data show it, of course, we can also use various basic functions to do a custom style paging module. But today only tell us about the properties and use of paging components.

The total number of data and the number of page data can be calculated paging component has a number of pages, demo in here has been set up and a total of 10 data per page three pictures. Display number button corresponding to the middle page number has several buttons.

When the first page is displayed when the Home and Back buttons are hidden, the same token, when the last page is displayed next, and last page will be hidden.
If you turn on compact mode home page, last page, previous and next button will be hidden away.

3 implement paging logical access to data
first, foreground initialization when the first call to the output paged data services, page parameters and call to the service time is equal to 1. Number of lines so that the service database from the output (page-1) * 3 + 1 to page * 3, substituting page = 1, i.e., after the calculated line 1-3.


Therefore, the direct rendering open the case as shown below.

There is also talk about the two movements of it, their role is to return the database output in the service of such a display box in front of the load, the current station to a service return results let load box hidden. If you want a more perfect case of such small details is essential.


Then the case is running, we chose a particular page, it's still calling the output paged data services, paging and set the page parameter is equal to the component of "current page number", this variable is thrown in the "current page change" event tab assembly of. . For example, we click on the page No. 2, the "current page" is equal to 2, i.e. the service page = 2, the database is still according to the formula output (page-1) * 3 + 1 to page * 3 rows, substituting the calculated available are 4 to line 6, in accordance with the division we count on a database which is exactly three lines of data of the second page. Array of data objects tab we put three lines of data to the front desk, for recycling containers to create three lines of data in accordance with these three components of the picture is displayed.


4. Dynamic page number
in this demo the paging component has set up a total of 10 data, then the number of data per page 3, then there will be a total of four pages, but the actual data in case the database may be as case is running increase or decrease, it is difficult to know in advance the total number of actual data is. In addition, although the number of statistical database functionality in service, but the huge amount of data, then we can not go every time the amount of data statistical database, which is very time consuming and equipment resources. So the following is said on how to achieve dynamic page number.

Currently, the list of data in the database has 16 data, do not look at this data ID of the last piece of data is 16 it is determined that there are 16 pieces of data, each data ID is unique, you put the data ID data 1 is deleted and then add a new data, ID & would new data is 2, so the actual number of the last line of data is in fact less than or equal's ID.

Add a database in the background, and add to it a total amount of data fields, at 16 and enter the data field of the first row, click Save.

Adding an array of objects in the background values and variables, array of objects stored in the first output page data, and then obtains the amount of data stored in the database, and finally together as a return parameter and services.

Find a place to call two outputs page data reception, the callback result in the value of the total amount of data attributes paging component is returned by the service.


Finally, to ensure that value is the amount of data stored in the database has been equal to the total list of data stripe number. If the data list the number of data in the database is changed, then it would have to submit two service data, and deleting data. In the submission service, after we have submitted the data of the total amount of data in the database plus one, delete the service, we will delete the data after its minus 1, that is, plus (-1). (In short, is the amount of data to be notified database heard it all when there are children additions and deletions to the list of data)


summary
pages difficulty obtaining data that achieve a dynamic, design and calculation formulas depending on the part of the logic of each case, that of a deal with the border, we must take into account a variety of situations. This requires that we must be careful when making a logical case, consider the full, only the status of all developers to use the case to consider carefully to ensure that all users in the use of various "unexpected situation" does not appear, it has been (also forever?) direction are the developers are trying it.