Paging list optimization method and device, equipment and medium
By judging the number of data strips and pages on the front end, normal jumps and data refreshes after deleting non-first page data are solved, and the user experience and table pagination display efficiency are improved.
Patent Information
- Application Number
- CN202411758755.8
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-03
- Publication Date
- 2025-03-25
AI Technical Summary
When displaying table data on paging, the prior art cannot jump normally after deleting non-first page data, resulting in the loss of page table data and affecting the user experience.
The front-end judges the number of data strips and pages of the current page. If the number of data strips on the current page is 1 and the number of pages is greater than 1, the number of pages will be reduced; otherwise, the list will be requested directly. Get the current page number and the number of data strips displayed on each page, calculate the starting and ending data index, intercept the page data from the total data and refresh the rendering display.
It solves the problem of staying on the page after deleting data on the non-first page, avoiding data loss, improving user experience, shortening data loading time, and improving the efficiency of table pagination display.
Smart Images

Figure CN119690433A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of front-end research and development technology, and in particular to a paging list optimization method, device, equipment and medium. Background Art
[0002] With the continuous development of network applications, the display of tabular data in the front-end interface has become a common requirement. The traditional way to display tabular data is to load all the data onto the front-end page at once. This method is feasible when the amount of data is small, but when the amount of data is large, the loading speed of the entire page will slow down, affecting the user experience. In order to solve this problem, tabular data is usually displayed in a paging manner.
[0003] However, the existing paging display methods still have some shortcomings. When the amount of table data is large, it is necessary to obtain all the paging data first, and then render and display it. This process needs to be implemented by the backend and takes a long time, which can easily cause the table display on the page to freeze. On the other hand, although some paging display algorithms are simple, when the number of data rows is large, the page file will become very large, and the efficiency of table paging will drop sharply.
[0004] In addition, in the front-end test, it was found that when the page table data is not located on the first page and the page has only one piece of data, it will still remain on the page after deletion, resulting in the loss of data on the page and the inability to display data normally. This problem may affect the normal use of users.
[0005] In the prior art, there are some invention patents for solving the problem of returning to the first page after deleting non-first page data. Patent CN107451227A discloses a paging query method and device. The patent performs asynchronous query on the data paging query process, which not only ensures the timeliness of data loading, but also realizes the data statistics function of the query result. However, in actual application, when the page table data is located on a non-first page and the page has only one data, the patent still has the problem of not being able to stay on the current page after deletion. Patent CN113449226A discloses a table creation method. The method creates an array that maps to the table, and according to the paging order of the web page, the selected data of the table of each page is placed in the array and arranged in sequence, so that batch operations can be performed on all selected data of the tables appearing on different pages at the same time. However, when the patent is applied, there is still the problem of returning to the first page after deleting non-first page data. Therefore, the art urgently needs a technical solution for solving paging optimization at the front end to solve the existing technical problems. Summary of the invention
[0006] In view of this, the purpose of this application is to provide a paging list optimization method, device, equipment and medium, which can accurately determine the average stay time of customers while protecting customer privacy. The specific scheme is as follows:
[0007] In a first aspect, the present application discloses a paging list optimization method, comprising:
[0008] Define the parameters for the number of data items displayed on the current page of the table, and obtain the current page list and list data;
[0009] The front end receives the data deletion instruction, determines whether the number of data items on the current page is 1, and whether the number of pages is greater than 1. If the number of data items on the current page is 1 and the number of pages is greater than 1, the number of pages is reduced by 1, otherwise the list is directly requested;
[0010] Get the current page number and the number of data items displayed per page, and calculate the starting data index and ending data index of the page based on the current page number and the number of data items displayed per page; extract the data of this page from the total data, and refresh and render it on the front end.
[0011] Optionally, use a script method to determine whether the current page has only one piece of data based on the number of items in the list.
[0012] Optionally, a parameter is defined that the current page of the table has only n data items. When the value of the parameter is n, it indicates that the current page of the table has only n data items.
[0013] Optionally, if the current page list contains one item and the current page number is greater than 1, the current page number parameter is reduced by 1.
[0014] Optionally, the current page number and the number of data items displayed on each page are obtained by calling data stored in a backend through an interface.
[0015] In a second aspect, the present application discloses a paging list optimization method, comprising:
[0016] Receive deletion instructions;
[0017] The judgment is made based on the page number and the number of remaining data items on the page;
[0018] Determine whether it is page 1, if so, return to the previous step, if not, jump to the next step;
[0019] After deleting the data, it will automatically jump to the previous page and refresh the page data.
[0020] Optionally, the judgment based on the page number and the number of remaining data items on the page specifically includes: obtaining the current page number and the data displayed on each page, calculating the starting data index and the ending data index of the page according to the current page number and the number of data items displayed on each page, extracting the data of this page from the total data and rendering and displaying it on the front end, and after deleting a piece of data, judging the number of remaining data items on the page; if the number of remaining data items on the page is greater than 1, deleting the data item and refreshing the current page; if the number of remaining data items on the page is equal to 1, executing the next step.
[0021] In a third aspect, the present application discloses a paging list optimization device, comprising:
[0022] Definition module 31, used to define the parameters of the number of data items displayed on the current page of the table, and obtain the current page list and list data;
[0023] The judgment module 32 is used for the front end to receive the data deletion instruction, judge whether the number of data items on the current page is 1, and whether the current page number is greater than 1. If the number of data items on the current page is 1 and the page number is greater than 1, the page number is reduced by 1, otherwise the list is directly requested;
[0024] The calculation module 33 is used to obtain the current page number and the number of data items displayed on each page, calculate the starting data index and the ending data index of the page according to the current page number and the number of data items displayed on each page; extract the page data from the total data, and refresh and render it on the front end.
[0025] In a fourth aspect, the present application discloses an electronic device, including a memory and a processor, wherein:
[0026] The memory is used to store the computer program;
[0027] The processor is used to execute the computer program to implement the paging list optimization method as described in any one of claims 1 to 7.
[0028] In a fifth aspect, the present application discloses a computer-readable storage medium for storing a computer program, wherein the computer program implements the aforementioned paging list optimization method when executed by a processor.
[0029] From the above scheme, it can be seen that the present application provides a paginated list optimization method, which defines the parameters of the number of data items displayed on the current page of the table, obtains the current page list and list data, and the front end receives a data deletion instruction to determine whether the number of data items on the current page is one and whether the current page number is greater than one. If so, the number of pages is reduced by one, otherwise the list is directly requested to obtain the current page number and the number of data items displayed on each page, and the starting data index and ending data index of the page are calculated based on the current page number and the number of data items displayed on each page; the data of this page is intercepted from the total data, and refreshed, rendered and displayed on the front end.
[0030] The beneficial effects of the present application are as follows: it solves the problem that when the table data on a page is not on the first page and the page has only one piece of data, the page still remains on the page after the data is deleted, thereby avoiding the page having no data to display and improving the user experience; secondly, it realizes the normal jump after deleting the data on the non-first page by means of the front-end judgment, without the need to obtain all the paging data first, thus shortening the data loading time, improving the efficiency of the table paging display, and avoiding the jamming of the table display in the page; thirdly, it effectively solves the problem that when the number of data rows is large, the page file is too large, resulting in a sharp drop in the table paging efficiency, which exists in some paging display algorithms; fourthly, compared with the existing paging query technology, the present invention can not only realize the timeliness of data loading in the asynchronous query process, but also realize the function of normal jump after deleting the data on the non-first page; fifthly, compared with the existing table creation method, the present invention can not only realize batch operation on the table data on different pages, but also solve the problem of returning to the first page after deleting the data on the non-first page, thereby improving the user experience.
[0031] Correspondingly, a paging list optimization device, equipment and readable storage medium provided by the present application also have the above-mentioned technical effects. BRIEF DESCRIPTION OF THE DRAWINGS
[0032] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.
[0033] Figure 1 A flow chart of a paging list optimization method provided in an embodiment of the present application;
[0034] Figure 2 A pagination page demonstration diagram provided for an embodiment of the present application;
[0035] Figure 3 Another pagination page demonstration diagram provided in an embodiment of the present application;
[0036] Figure 4 A schematic diagram of the structure of a paging list optimization device provided in an embodiment of the present application;
[0037] Figure 5 A structural diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0038] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.
[0039] The existing technology has the following shortcomings: First, when the table data is located on a page other than the first page and the page has only one piece of data, it will still stay on the page after deleting the data, resulting in no data to display on the page, affecting the user experience. Second, the traditional paging display method needs to obtain all the paging data first, and then render and display it. When the amount of data is large, the process takes a long time and may cause the table display in the page to freeze. Third, although some paging display algorithms are simple, when the number of data rows is large, the page file will become very large, and the table paging efficiency will drop sharply. Fourth, although the existing paging query technology can achieve the timeliness of data loading during the asynchronous query process, it fails to achieve the function of normal jump after deleting non-first page data. Fifth, although the existing table creation method can realize batch operations on table data on different pages, there is still the problem of deleting non-first page data and returning to the first page.
[0040] Based on this, the present application proposes a paging list optimization method, device, equipment and medium to solve the technical problem that when the page table data is not located on the first page and the page has only one piece of data, it still remains on the page after deletion, resulting in loss of data on the page.
[0041] See also Figure 1 As shown, the embodiment of the present application discloses a paging list optimization method, including:
[0042] Step S11, defining the parameters for the number of data items displayed on the current page of the table, and obtaining the current page list and list data;
[0043] In this embodiment, a js method is used to determine whether the current page has only one data according to the number of list items. Specifically, a parameter is defined to indicate that the current page of the table has only one data item and the current page of the table has only zero data items. When the parameter value is 1, it indicates that there is only one data item, and when the parameter value is 0, it indicates that there is only zero data item. It can be considered that when the value of the parameter is n, it indicates that the current page of the table has only n data items. Then, the backend interface is called to obtain data, and the page list and list data are requested and displayed on the frontend page.
[0044]
[0045] Step S12, the front end receives the data deletion instruction, determines whether the number of data items on the current page is 1, and whether the number of pages is greater than 1. If the number of data items on the current page is 1 and the number of pages is greater than 1, the number of pages is reduced by 1, otherwise the list is directly requested;
[0046] Specifically, the current page is displayed, and when the front-end calls a method to delete a piece of data, the following code is executed.
[0047]
[0048] },
[0049] In the above code, if the list contains one data item and the current page number is greater than 1, the page number parameter passed to the backend is reduced by 1. It should be noted that the backend only reduces the page number by 1 and transfers the data, and does not directly process the business.
[0050] In this embodiment, if Figure 2 As shown, at this time, it is on page 5 and there is only 1 data, that is, the number of data on the current page is 1 and the current page number is greater than 1. At this time, the front-end data deletion instruction is obtained, the page number is reduced by 1, and the parameter pageNumber is passed. After the page number is deleted, the page number becomes 4, and the current page is refreshed and displayed, as shown Figure 3 shown.
[0051] Step S13, obtain the current page number and the number of data items displayed on each page, calculate the starting data index and the ending data index of the page according to the current page number and the number of data items displayed on each page; extract the page data from the total data, and refresh and render it on the front end.
[0052] In another optional embodiment, the present invention also proposes a paging list optimization method, specifically comprising:
[0053] Step 21, receiving a deletion instruction;
[0054] Receive an instruction to delete a piece of data on the front end. This step can be achieved by setting a delete button or other forms of delete instruction triggers.
[0055] Step 22, judging based on the page number and the number of remaining data items on the page;
[0056] Specifically, in this embodiment, the judgment is made based on the page number and the number of data items remaining on the page. First, obtain the current page number and the number of data items displayed on each page. For example, the current page number is page 5, and 15 data items are displayed on each page. Then, the starting data index and the ending data index of the page are calculated based on the current page number and the number of data items displayed on each page. For example, the starting data index of page 5 is 61, and the ending data index is 75. Next, the data of this page is intercepted from the total data and rendered and displayed on the front end. After deleting a piece of data, the number of data items remaining on the page is judged. If the number of data items remaining on the page is greater than 1, delete the data item and refresh the current page; if the number of data items remaining on the page is equal to 1, execute step 3.
[0057] Step 23, determine whether it is page 1, if yes, return to step 22, if no, go to step 24;
[0058] Step 24, after deleting the data, automatically jump to the previous page and refresh the page data.
[0059] Specifically, for example, after deleting the last piece of data from page 5, the page automatically jumps to page 4, and the data of page 4 is re-intercepted from the total data for rendering and display.
[0060] Through the above steps, the present invention solves the problem in the prior art that when the page table data is located on a non-first page and the page has only one piece of data, the page still stays on the page after the data is deleted, thereby avoiding the page having no data to display and improving the user experience. At the same time, the normal jump after deleting the non-first page data is realized by the front-end judgment method, without the need to obtain all the paging data first, shortening the data loading time, improving the efficiency of the table paging display, and avoiding the jamming of the table display in the page.
[0061] Compared with the prior art, the present invention provides a method for optimizing a paging list, which has the following beneficial effects: first, it solves the problem that when the table data of a page is located on a non-first page and the page has only one piece of data, the page still stays on the page after the data is deleted, thereby avoiding the page having no data to display and improving the user experience; second, it realizes the normal jump after deleting the data of the non-first page through the front-end judgment method, without the need to obtain all the paging data first, shortening the data loading time, improving the efficiency of the table paging display, and avoiding the jamming of the table display in the page; third, it effectively solves the problem that when the number of data rows is large, the page file is too large, resulting in a sharp drop in the table paging efficiency, which exists in some paging display algorithms; fourth, compared with the existing paging query technology, the present invention can not only realize the timeliness of data loading in the asynchronous query process, but also realize the function of normal jump after deleting the data of the non-first page; fifth, compared with the existing table creation method, the present invention can not only realize batch operation of table data on different pages, but also solve the problem of returning to the first page after deleting the data of the non-first page, thereby improving the user experience.
[0062] See also Figure 4 As shown, the embodiment of the present application discloses a paging list optimization device, including:
[0063] Definition module 31, used to define the parameters of the number of data items displayed on the current page of the table, and obtain the current page list and list data;
[0064] The judgment module 32 is used for the front end to receive the data deletion instruction, judge whether the number of data items on the current page is 1, and whether the current page number is greater than 1. If the number of data items on the current page is 1 and the page number is greater than 1, the page number is reduced by 1, otherwise the list is directly requested;
[0065] The calculation module 33 is used to obtain the current page number and the number of data items displayed on each page, calculate the starting data index and the ending data index of the page according to the current page number and the number of data items displayed on each page; extract the page data from the total data, and refresh and render it on the front end.
[0066] It can be seen that the present application solves the technical problem in the prior art that when a page table or other paging list is located on a non-first page and the page has only one piece of data, it still stays on the page after being deleted, that is, the number of the current page passed to the interface is still deleted, resulting in the loss of data on the page. The normal jump after deleting non-first page data is realized by front-end judgment, without the need to obtain all paging data first, shortening the data loading time, improving the efficiency of table paging display, and avoiding the jamming of table display in the page. Compared with the existing paging query technology, the present invention can not only realize the timeliness of data loading in the asynchronous query process, but also realize the function of normal jump after deleting non-first page data, and solve the problem of returning to the first page after deleting non-first page data, thereby improving the user experience. In addition, the technology of the present invention only needs to implement page paging optimization at the front end, and will not call back-end resources, saving CPU and memory resources.
[0067] See also Figure 5 As shown, an embodiment of the present application discloses an electronic device 40, including a processor 41 and a memory 42; wherein the memory 42 is used to store a computer program; the processor 41 is used to execute the computer program, the paging list optimization method disclosed in the above embodiment.
[0068] For the specific process of the above-mentioned paging list optimization method, reference may be made to the corresponding contents disclosed in the above-mentioned embodiments, which will not be described in detail here.
[0069] Furthermore, the memory 42 as a carrier for storing resources may be a read-only memory, a random access memory, a magnetic disk or an optical disk, etc., and the storage method may be temporary storage or permanent storage.
[0070] In addition, the electronic device 40 also includes a power supply 43, a communication interface 44, an input / output interface 45 and a communication bus 46; wherein the power supply 43 is used to provide working voltage for each hardware device on the electronic device 40; the communication interface 44 can create a data transmission channel between the electronic device 40 and external devices, and the communication protocol it follows is any communication protocol that can be applied to the technical solution of the present application, and is not specifically limited here; the input / output interface 45 is used to obtain external input data or output data to the outside world, and its specific interface type can be selected according to specific application needs, and is not specifically limited here.
[0071] Furthermore, an embodiment of the present application also discloses a computer-readable storage medium for storing a computer program, wherein the computer program, when executed by a processor, implements the paging list optimization method disclosed in the aforementioned embodiment.
[0072] For the specific process of the above-mentioned paging list optimization method, reference may be made to the corresponding contents disclosed in the above-mentioned embodiments, which will not be described in detail here.
[0073] In this specification, each embodiment is described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the embodiments can be referred to each other. For the device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant parts can be referred to the method part.
[0074] The steps of the method or algorithm described in conjunction with the embodiments disclosed herein can be directly implemented using hardware, a software module executed by a processor, or a combination of the two. The software module can be placed in a random access memory (RAM), a memory, a read-only memory (ROM), an electrically programmable ROM, an electrically erasable programmable ROM, a register, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the technical field. The above is a detailed introduction to a paging list optimization method, device, equipment and medium provided by the present application. This article uses specific examples to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea; at the same time, for those of ordinary skill in the art, according to the idea of the present application, there will be changes in the specific implementation method and scope of application. In summary, the content of this specification should not be understood as a limitation on the present application.
Claims
1. A paging list optimization method, characterized in that: include: Define the parameters for the number of data items displayed on the current page of the table, and obtain the current page list and list data; The front end receives the data deletion instruction, determines whether the number of data items on the current page is 1, and whether the number of pages is greater than 1. If the number of data items on the current page is 1 and the number of pages is greater than 1, the number of pages is reduced by 1, otherwise the list is directly requested; Get the current page number and the number of data items displayed per page, calculate the starting data index and ending data index of the page based on the current page number and the number of data items displayed per page; extract the data of this page from the total data, and refresh and render it on the front end.
2. The paging list optimization method according to claim 1, characterized in that: Use the script method to determine whether the current page has only one piece of data based on the number of items in the list.
3. The paging list optimization method according to claim 2, characterized in that: A parameter that defines that the current page of the table has only n data items. When the value of the parameter is n, it means that the current page of the table has only n data items.
4. The paging list optimization method according to claim 3, characterized in that: If the current page list contains one item and the current page number is greater than 1, the current page number parameter is reduced by 1.
5. The paging list optimization method according to claim 1, characterized in that: The current page number and the number of data items displayed on each page are obtained by calling the data stored in the backend through an interface.
6. A paging list optimization method, characterized in that: include: Receive deletion instructions; The judgment is made based on the page number and the number of remaining data items on the page; Determine whether it is page 1, if so, return to the previous step, if not, jump to the next step; After deleting the data, it will automatically jump to the previous page and refresh the page data.
7. The paging list optimization method according to claim 6, characterized in that: The judgment based on the page number and the number of remaining data items on the page specifically includes: obtaining the current page number and the data displayed on each page, calculating the starting data index and the ending data index of the page based on the current page number and the number of data items displayed on each page, extracting the data of the page from the total data and rendering and displaying it on the front end, and after deleting a certain data item, judging the number of remaining data items on the page, if the number of remaining data items on the page is greater than 1, deleting the data item and refreshing the current page; if the number of remaining data items on the page is equal to 1, executing the next step.
8. A paging list optimization device, characterized in that: include: Definition module 31, used to define the parameters of the number of data items displayed on the current page of the table, and obtain the current page list and list data; The judgment module 32 is used for the front end to receive the data deletion instruction, judge whether the number of data items on the current page is 1, and whether the number of current pages is greater than 1. If the number of data items on the current page is 1 and the number of pages is greater than 1, the number of pages is reduced by 1, otherwise the list is directly requested; The calculation module 33 is used to obtain the current page number and the number of data items displayed on each page, calculate the starting data index and the ending data index of the page according to the current page number and the number of data items displayed on each page; extract the page data from the total data, and refresh and render it on the front end.
9. An electronic device, characterized in that: comprising a memory and a processor, wherein: The memory is used to store the computer program; The processor is used to execute the computer program to implement the paging list optimization method as described in any one of claims 1 to 7.
10. A computer-readable storage medium, characterized in that: Used to store a computer program, wherein when the computer program is executed by a processor, the paging list optimization method according to any one of claims 1 to 7 is implemented.
Citation Information
Patent Citations
Paging query method and device
CN107451227A
Table creation method
CN113449226A