Form rolling loading method and device

Abstract

The invention discloses a table rolling loading method and device, and belongs to the technical field of data processing. The method comprises the following steps: determining the optimal data request quantity of each page of a table under the current page resolution; acquiring a scrolling event, wherein the scrolling event comprises a scrolling direction; and in response to the scrolling event, loading the table loading total data volume corresponding to the scrolling event based on the optimal data request volume of each page and the table display data volume of the current page, and executing the scrolling event, so that the corresponding table number after the scrolling event occurs is displayed on the page. According to the method, the table loading total data volume corresponding to the scrolling event can be loaded, the scrolling event can be executed, and the table size under the current page resolution condition can be dynamically obtained through the optimal data request volume of each page, so that the table can automatically and adaptively adjust and display the table data volume according to the page resolution; the complexity of the process of obtaining the whole page of table data is reduced, unnecessary data loading is avoided, and the data loading efficiency is improved.

Description

Technical Field

[0001] The present application belongs to the field of data processing technology, and specifically relates to a table rolling loading method and device. Background Art

[0002] When dealing with the compatibility problem between the table and the page resolution, existing table data often requires manual adjustment of the number of data items displayed per page to adapt to the page resolution. It is difficult to automatically and efficiently adjust the displayed table data according to the page resolution, making the process of obtaining a full page of table data cumbersome. Summary of the invention

[0003] In response to the above problems, the present application provides a table scrolling loading method and device, which enables the table to automatically and adaptively adjust the displayed table data according to the page resolution, thereby reducing the tediousness of the process of obtaining a full page of table data.

[0004] The present application embodiment provides a table scrolling loading method, including:

[0005] Determine the optimal amount of data to request per page for the table at the current page resolution;

[0006] Get scroll events, including scroll direction;

[0007] In response to a scrolling event, based on the optimal data request amount per page and the data amount displayed in the table of the current page, the total data amount of the table corresponding to the scrolling event is loaded, and the scrolling event is executed so that the corresponding table data after the scrolling event occurs is displayed on the page.

[0008] In some embodiments, a method for determining an optimal data request amount per page includes:

[0009] Based on the table header height, data row height, and total height of the table display area at the current page resolution, determine the optimal data request amount per page of the table at the current page resolution.

[0010] In some embodiments, a method for loading a total amount of data loaded in a table corresponding to a scrolling event includes:

[0011] Determine the data loading position of the table based on the index value of the first row of data displayed in the table of the current page, the page number of the data displayed in the table of the current page, the optimal data request amount per page, and the scrolling event;

[0012] Determine the number of times the table loads data based on the table load data position and scroll events;

[0013] Based on the number of times the table has loaded data, the optimal amount of data requested per page, and the amount of data displayed in the table on the current page, the total amount of data loaded in the table corresponding to the scroll event is loaded.

[0014] In some embodiments, the scrolling direction includes scrolling up and scrolling down;

[0015] The table loading data location includes the table header and the table footer of the current page;

[0016] The total amount of data loaded into the table includes the first amount of data that has been loaded and the second amount of data to be loaded;

[0017] Methods for determining the location of table loading data include:

[0018] If the scrolling direction is upward, the index value of the first row of data displayed in the table of the current page is equal to the initial index value, and the page number of the data displayed in the table of the current page is not on the first page of the table, then the table loading data position is the table header of the current page; wherein the initial index value is the index value of the first row of the table;

[0019] Based on the optimal data request amount per page and the index value of the first row of data displayed in the table of the current page, determine the index value of the last row of data displayed in the table of the current page. If the scrolling direction is downward, the index value of the last row of data displayed in the table of the current page is equal to the maximum index value of the first data loaded, and the page number of the data displayed in the table of the current page is not the last page of the table, then the table loading data position is the end of the table on the current page.

[0020] In some embodiments, a method for loading data in a single table includes:

[0021] Determine the starting index value and the ending index value corresponding to the single table loading data, wherein the starting index value is smaller than the ending index value;

[0022] Determine the starting data row number corresponding to the starting index value and the ending data row number corresponding to the ending index value;

[0023] Based on the starting data row number and the ending data row number, the page number of the single table loading data and the data loading amount per page are confirmed, and then the table data corresponding to the single table loading data is obtained.

[0024] In some embodiments, the method for confirming the page number of a single table loading data and the amount of data loaded per page includes:

[0025] If the number of rows of the starting data is less than half of the number of rows of the ending data, the number of rows of the ending data is used as the amount of data to be loaded per page, and the first page of the table is used as the page number for loading data in a single table.

[0026] If the number of starting data rows is greater than or equal to half of the number of ending data rows, the page number and the amount of data loaded per page for a single table load are confirmed by traversing each preset amount of data loaded per page.

[0027] In some embodiments, the method for loading data in a single table further includes:

[0028] Based on the page number of the single table loading data and the data loading amount per page, confirm the simulation start index value and simulation end index value corresponding to the single table loading data;

[0029] Based on the start index value and the end index value corresponding to the single table loading data, the simulation start index value and the simulation end index value corresponding to the single table loading data are clipped to obtain the table data corresponding to the single table loading data.

[0030] In some embodiments, the table scrolling loading method further includes:

[0031] Load and update the data displayed in the table of the current page.

[0032] In some embodiments, the method of loading and updating the amount of data displayed in the current page table includes:

[0033] Right[i d ,i d +p g ] to load and update, where i d Indicates the index value of the first row of data displayed in the table of the current page, p g Indicates the amount of data displayed in the table on the current page.

[0034] Accordingly, the embodiment of the present application further provides a table rolling loading device, comprising:

[0035] The first module is used to determine the optimal amount of data requested per page for the table at the current page resolution;

[0036] The second module is used to obtain scrolling events, which include scrolling directions;

[0037] The third module is used to respond to the scrolling event, load the total data volume of the table corresponding to the scrolling event based on the optimal data request volume per page and the data volume displayed in the table of the current page, and execute the scrolling event to display the corresponding table data after the scrolling event occurs on the page.

[0038] The beneficial effect of the present application is that the present application provides a table scrolling loading method, the method comprising: determining the optimal data request amount per page of the table under the current page resolution; obtaining a scrolling event, the scrolling event including the scrolling direction; in response to the scrolling event, based on the optimal data request amount per page and the current page table display data amount, loading the total data amount of the table corresponding to the scrolling event, and executing the scrolling event, so that the number of tables corresponding to the scrolling event is displayed on the page. Based on the scrolling event, the optimal data request amount per page and the current page table display data amount, the present application can load the total data amount of the table corresponding to the scrolling event and execute the scrolling event, and can dynamically obtain the table size under the current page resolution condition through the optimal data request amount per page, accurately calculate the optimal data request amount per page, so that the table can automatically and adaptively adjust the display table data amount according to the page resolution, reducing the cumbersomeness of the process of obtaining the entire page table data, and avoiding unnecessary data loading, improving data loading efficiency.

[0039] The present application also provides a table rolling loading device, which applies the table rolling loading method in the above embodiment, and thus has all the technical features and technical effects of the above table rolling loading method, which will not be described in detail here. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0041] Figure 1 A flowchart of a table rolling loading method provided in an embodiment of the present application;

[0042] Figure 2 A schematic diagram of a flow chart of another table scrolling loading method provided in an embodiment of the present application;

[0043] Figure 3 A schematic diagram of a flow chart showing the page number of a single table data loading and the amount of data loaded per page provided in an embodiment of the present application;

[0044] Figure 4 A schematic diagram of the structure of a table rolling loading device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0045] 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 those skilled in the art without creative work are within the scope of protection of this application.

[0046] In the description of the present application, it should be understood that the specific embodiments described herein are only used to illustrate and explain the present application and are not used to limit the present application. The terms "first" and "second" are only used for descriptive purposes and should not be understood as indicating or implying relative importance or implicitly indicating the number of indicated technical features. Therefore, the features defined as "first" and "second" may explicitly or implicitly include one or more features.

[0047] The present application provides a table rolling loading method and device, which are described in detail below. It should be noted that the description order of the following embodiments does not limit the preferred order of the embodiments of the present application. In the following embodiments, the description of each embodiment has its own emphasis. For parts that are not described in detail in a certain embodiment, please refer to the relevant description of other embodiments.

[0048] In modern Web application development, data tables are widely used in various systems as common components for displaying large amounts of data. For example, in scenarios such as data monitoring, real-time analysis, and financial transactions, data tables are often needed to display large amounts of data that need to be updated in real time. Usually, such tables need to implement scrolling loading and high-frequency data refresh functions to meet users' needs for real-time and continuity of data. In this context, tables, as the main carrier for data display, face unprecedented challenges, especially under the constraints of scrolling loading, whole-row scrolling, and the widespread use of paging in back-end interfaces. The optimization problem of high-frequency data refresh in tables is particularly prominent.

[0049] At present, in the field of front-end development, there are many open source UI component libraries, such as Naive UI, Element-UI, Ant-Design, etc. Although most UI component libraries on the market have preset data table components, their original design intention is mainly for general needs, such as paging, row filtering, row sorting and other functions of full table data, and controlled paging, row filtering, row sorting and other functions for back-end paging. However, they still have obvious deficiencies in handling high-frequency data refresh, whole-row scrolling accuracy, efficient use of paging interfaces and intelligent loading strategies. These problems limit the real-time, stability and efficiency of data display, and have a negative impact on user experience.

[0050] Specifically, the data table components in the current UI component library on the market have the following problems: First, lack of page adaptability: the existing table data is mainly provided by the back-end paging interface. The request parameters of the back-end interface mainly include two main parameters, namely the requested page number and the number of data items per page. When dealing with the adaptability of the table and the page, it is often necessary to manually adjust the number of data items displayed per page, which makes it difficult to automatically and efficiently adjust the displayed table data according to the page resolution, which affects the user's convenience in obtaining the entire page of table data. Secondly, the scrolling experience is not good: the existing table scrolling mechanism usually scrolls pixel by pixel, which will cause the table content to scroll half a line, which will affect the user's reading experience. Users expect that when browsing data, each scroll can fully display a whole row of data to avoid incomplete content display and inconvenience to users. In addition, the paging mechanism has limitations: in some real-time data application scenarios, such as alarm monitoring, measurement point information display, etc., data often needs to be refreshed frequently; this high-frequency data refresh will place higher requirements on the front-end page performance. Under the existing technology, back-end paging is usually used to request table data of a specific page with a fixed number of data items per page to avoid page jams caused by loading the full amount of data. However, this method is not applicable to tables with scrolling loading functions. Since scrolling loading will change the number of data items per page, this will cause the back-end paging to gradually lose the performance advantage of single-page data loading. At the same time, since the paging interface can only obtain table data of a specific page, it is difficult to accurately obtain table data within the specified index range through a single request.

[0051] In view of this, the present application proposes a table scrolling loading method, aiming to solve at least one of the above technical problems.

[0052] See also Figure 1 As shown, Figure 1 A flowchart of a table scrolling loading method provided in an embodiment of the present application. The present application embodiment provides a table scrolling loading method, the method comprising:

[0053] Determine the optimal amount of data to request per page for the table at the current page resolution;

[0054] Get scroll events, including scroll direction;

[0055] In response to a scrolling event, based on the optimal data request amount per page and the data amount displayed in the table of the current page, the total data amount of the table corresponding to the scrolling event is loaded, and the scrolling event is executed so that the corresponding table data after the scrolling event occurs is displayed on the page.

[0056] It should be understood that when the same table is displayed on devices with different resolutions, the actual height of the table may be different due to the difference in the number of pixels. Devices with higher resolutions usually have more pixels and can therefore display more content, resulting in the table displaying more rows or a longer height on the screen. Devices with lower resolutions may not be able to display the entire table, and it is necessary to scroll or zoom the page to view the complete table content. Furthermore, the optimal data request amount per page at the current page resolution refers to the number of rows of table data that can be displayed in the visible area of ​​the page at the current page resolution. Among them, the scroll event can be triggered based on the movement of the scroll bar to load more data, and then based on the scroll event, the data at other locations of the table can be displayed in the visible area. In this application, the data corresponding to the table can be scrolled into the visible area at different positions based on the scroll bar corresponding to the scroll event. Among them, the total amount of data loaded in the table corresponding to the scrolling event is the total amount of data within the scope of the scrolling event, that is, the total number of data rows within the scroll bar range corresponding to the scrolling event. For example, before the scrolling event occurs, the visible area displays the amount of data on the first page of the table, and the scrolling event corresponds to scrolling to the third page. Then, the total amount of data loaded in the table corresponding to the scrolling event is the sum of the number of data rows on the first, second and third pages of the table, where the amount of data on each page corresponds to the optimal data request amount for each page. Here, it is assumed that the number of data rows on the third page is equal to the optimal data request amount for each page.

[0057] Through the above technical scheme, the present application is based on scrolling events, the optimal data request amount per page and the data amount displayed in the table of the current page, and can load the total data amount of the table corresponding to the scrolling event and execute the scrolling event. The optimal data request amount per page can dynamically obtain the table size under the current page resolution conditions, and accurately calculate the optimal data request amount per page, so that the table can automatically and adaptively adjust the displayed table data amount according to the page resolution, reducing the tediousness of the process of obtaining the entire page table data, avoiding unnecessary data loading, and improving data loading efficiency.

[0058] See also Figure 1 and Figure 2 In some embodiments, the method for determining the optimal data request amount per page includes:

[0059] Based on the table header height, data row height, and total height of the table display area at the current page resolution, determine the optimal data request amount per page of the table at the current page resolution.

[0060] It should be understood that in the process of determining the optimal data request amount per page, the header height, data row height and total height of the display table area under the current page resolution can be dynamically obtained to calculate the optimal data request amount per page of the table at the current page resolution; thereby, the display table data can be automatically and adaptively adjusted according to the page resolution. It should also be noted that for tables without headers, the optimal data request amount per page of the table at the current page resolution can be determined based on the data row height of the table at the current page resolution and the total height of the display table area. In addition, the data row height is the table row height. The total height of the display table area is the overall height of the table.

[0061] Specifically, the optimal amount of data requests per page is expressed as follows:

[0062] P f =floor(t H -t h ) / t r ,

[0063] In the formula, floor() means rounding down, t H Indicates the total height of the table area displayed at the current page resolution. h Indicates the table header height at the current page resolution, t r Indicates the data row height of the table at the current page resolution, P f Indicates the optimal data request amount per page; here, the total height of the table area displayed at the current page resolution minus the table header height at the current page resolution can be obtained, and then the height of the area displaying the table data at the current page resolution can be divided by the data row height of the table at the current page resolution to obtain the number of rows of table data displayed at the current page resolution, that is, the optimal data request amount per page.

[0064] In some other embodiments, the optimal data request amount per page is expressed as follows:

[0065] P f =floor(t H / t r ),

[0066] In the formula, floor() means rounding down, t H Indicates the total height of the table area displayed at the current page resolution. r Indicates the data row height of the table at the current page resolution, P f Indicates the optimal amount of data to request per page.

[0067] Furthermore, this application can use the industry-leading open source UI component library Naive UI as the basic framework in its implementation, with a particular focus on its core component - the data table (NDataTable). On this basis, this application is deeply customized and optimized to meet the high-performance requirements in specific business scenarios. The entire development environment is built on the Vue 3 ecosystem, making full use of its latest features and optimizations, while combining the powerful type system of TypeScript to ensure the robustness and maintainability of the code. Specifically, the process of determining the optimal amount of data requests per page includes:

[0068] First, add a ref attribute to the NDataTable component and name it dataTableRef. The ref attribute is used to directly reference and access the NDataTable in the component instance. Then use the useElementSize hook function in the Composition API to automatically monitor the size changes of the DOM element. The function will eventually return a responsive object containing the element's width and height information. Among them, the DOM element refers to the element of the table, that is, the entire table element including the header and table content. By passing dataTableRef to useElementSize (hook function), the total height of the NDataTable component can be obtained in real time. H In addition, in order to obtain the header height t h , you can get the header element by passing in the CSS selector of the header element through the document.querySelector method. Specifically, you can find the data table element in the page by passing in the fixed style n-data-table-th.n-data-table-th--sortable on the NDataTable element, and then get its child element - the header element. Then, you can use the getPropertyValue method to extract the height value of the header from the calculated style information object with height as the parameter. h Similarly, the height of the table data row can be obtained in the same way as the height value of the table header. r , you can use the document.querySelector method to pass in the CSS selector of the header element to obtain the table content element, and then use the getPropertyValue method to extract the table data row height from the calculated style information object with height as the parameter. r. It should be noted that this application defaults to the function of automatically omitting text that is too long for table data; document.querySelector is a JavaScript method that returns the first element node that matches the specified CSS selector in the current document. If no matching element is found, it returns null; getPropertyValue is a JavaScript method that is used to obtain the calculated value of a CSS property, which is used to obtain the specific style value applied to an element. In this application, the height of the table header and the height of the table data row need to be obtained. The height can be passed in as a parameter to get the header height of the table on the page.

[0069] Through the above technical solution, the present application determines the optimal data request amount for each page of the table at the current page resolution based on the table header height, data row height and the total height of the table display area at the current page resolution; on the one hand, each scroll can fully display an entire row of data, avoiding inconvenience to users due to incomplete content display; on the other hand, it can accurately calculate the optimal data request amount, avoid unnecessary data loading, and improve data loading efficiency.

[0070] In some embodiments, a method for loading a total amount of data loaded in a table corresponding to a scrolling event includes:

[0071] Determine the data loading position of the table based on the index value of the first row of data displayed in the table of the current page, the page number of the data displayed in the table of the current page, the optimal data request amount per page, and the scrolling event;

[0072] Determine the number of times the table loads data based on the table load data position and scroll events;

[0073] Based on the number of times the table has loaded data, the optimal amount of data requested per page, and the amount of data displayed in the table on the current page, the total amount of data loaded in the table corresponding to the scroll event is loaded.

[0074] Further, in some embodiments, the scrolling direction includes scrolling up and scrolling down;

[0075] The table loading data location includes the table header and the table footer of the current page;

[0076] The total amount of data loaded into the table includes the first amount of data that has been loaded and the second amount of data to be loaded;

[0077] Methods for determining the location of table loading data include:

[0078] If the scrolling direction is upward, the index value of the first row of data displayed in the table of the current page is equal to the initial index value, and the page number of the data displayed in the table of the current page is not on the first page of the table, then the table loading data position is the table header of the current page; wherein the initial index value is the index value of the first row of the table;

[0079] Based on the optimal data request amount per page and the index value of the first row of data displayed in the table of the current page, determine the index value of the last row of data displayed in the table of the current page. If the scrolling direction is downward, the index value of the last row of data displayed in the table of the current page is equal to the maximum index value of the first data loaded, and the page number of the data displayed in the table of the current page is not the last page of the table, then the table loading data position is the end of the table on the current page.

[0080] It should be understood that the table loading data location includes the table header and the table tail of the current page, that is, when the scrolling direction is upward and the trigger is to turn to the previous page, the table data of the previous page is loaded at the header of the current page table; when the scrolling direction is downward and the trigger is to turn to the next page, the table data of the next page is loaded at the tail of the current page table; the total data amount loaded in the table includes the first data amount loaded and the second data amount to be loaded, that is, the data amount before the next table loading data is executed is the first data amount loaded, and the table data corresponding to the table loading data to be executed is the second data amount to be loaded; it should be noted that the scrolling event can include multiple scrolling directions, that is, the number of table loading times is multiple times. For example, the scrolling event is scrolling down two pages from the initial page number. After scrolling down two pages from the initial page number page and then scrolling up three pages, the table data is loaded twice, and then scrolling up three pages means that the table data is loaded once after returning to the initial page number page, and a total of the table data is loaded three times. After scrolling down two pages from the initial page number page, before scrolling up three pages again, the two pages scrolled down from the initial page number page are the first amount of data loaded, and the subsequent scrolling up three pages will pass through the two loaded pages, and then the second amount of data to be loaded is the page scrolled on the initial page number page; and, the initial index value in the present application, that is, the first row index value in the initial page number page, the initial page number page can be the first page of the table data, that is, the initial index value can be the first row index value of the first page, that is, the first row index value of the table.

[0081] Specifically, in the process of determining the table loading data position in the present application, that is, whether the data request loading action is triggered during the table scrolling process, the first row of data index value of the data displayed in the table of the current page can be judged, and then the table loading data position can be determined to determine the number of table loading data, and then the total amount of table loading data corresponding to the scrolling event can be loaded. Among them, the method for determining the table loading data position can be expressed by the following formula:

[0082]

[0083] Among them, unshift means that the table loads data at the head of the current page table, push means that the table loads data at the end of the current table, i c Indicates the index value of the first row of data displayed in the table of the current page, p c Indicates the page number of the current page table display data, D C Indicates the amount of first data loaded, that is, the total number of rows of first data loaded, ceil() means rounding up, D indicates the amount of table data, that is, the total number of rows of table data, P f Indicates the optimal data request amount per page. It should be noted that the initial index value in this application is 0, ceil(D / p f ) indicates the maximum page number of the table. Here, it is first determined whether the page number of the data volume displayed in the table of the current page is not the last page of the table. Then, it is determined whether the index value of the last row of data displayed in the table of the current page is equal to the maximum index value of the first data volume loaded. If the page number of the data volume displayed in the table of the current page is the last page of the table, the next step of determination is not performed. Therefore, here, the index value of the last row of data displayed in the table of the current page is determined based on the optimal data request amount per page and the index value of the first row of data displayed in the table of the current page.

[0084] In addition, in some embodiments, the method for determining the amount of data displayed in the current page table includes:

[0085] If the page number of the table data volume displayed on the current page is the last page of the table, and the optimal data request volume per page cannot be divided by the table data volume, then the table data volume displayed on the current page is the remainder of the table data volume divided by the optimal data request volume per page; the table data volume here refers to the number of rows of all data in the table;

[0086] If the page number of the data volume displayed in the table on the current page is not the last page, or the optimal data request amount per page can be divided by the data volume of the table, then the data volume displayed in the table on the current page is the optimal data request amount per page. Furthermore, if the page number of the data volume displayed in the table on the current page is not the last page, the data volume currently displayed in the table on the page is the optimal data request amount per page; if the optimal data request amount per page can be divided by the data volume of the table, the data volume displayed in the table on the current page is the optimal data request amount per page; it should be noted that the data volume displayed in the table on the current page is the number of data rows.

[0087] For example, the amount of data displayed in the table of the current page can be represented as follows:

[0088]

[0089] Among them, p c Indicates the page number of the current page, D indicates the amount of data in the table, P indicates the amount of data in the table f Indicates the optimal amount of data requested per page, ceil() means rounding up, d c Indicates the amount of data displayed in the table on the current page.

[0090] Furthermore, in order to realize the function of automatically requesting table data on the next and next pages according to the change of index value, a variable is introduced to record the cumulative number of times that scrolling up and scrolling down triggers table data loading. The total amount of data loaded in the table corresponding to the scrolling event can be obtained by multiplying the cumulative number of times that scrolling up and scrolling down triggers table data loading and p f The product of and d c The total amount of data loaded in the table corresponding to the loading scroll event can be expressed as follows:

[0091] D d =(t up +t down )*p f +d c ,

[0092] Among them, D d Indicates the total amount of data loaded in the table corresponding to the scroll event, t up Indicates the number of times the table is scrolled up to trigger the table to load data, t down Indicates the number of times the table is scrolled down to trigger the table to load data, p f represents the optimal data request amount per page, d c Indicates the amount of data displayed in the table on the current page.

[0093] Specifically, this application is based on the entire development environment built on the Vue3 ecosystem, making full use of its latest features and optimizations, while combining the powerful type system of TypeScript to ensure the robustness and maintainability of the code. Specifically, the implementation process of determining the total amount of data loaded in the table corresponding to the scroll event is as follows:

[0094] First, register a scroll event listener (the event name is "wheel") for the table component instance through addEventListener, and then instantiate the table scroll bar auxiliary tool class object TableStepper. In the initial state, the table has no vertical scroll bar. Therefore, when instantiating the TableStepper object, use the constructor that only needs to pass in the first parameter (the optimal data request amount per page). Secondly, write the handleScroll function for the wheel scroll event. This function receives a parameter event of type WheelEvent. The attribute deltaY of this parameter can be used to determine the current scrolling direction. It is used as a parameter to call the step function of TableStepper to update the current display index value of the table, so that the corresponding table data after the scroll event occurs is displayed on the page. Then, by calling the scrollTo function on the NDataTable component instance, the minimum unit scrolling distance of the table scroll bar is constrained each time, so as to realize the function of scrolling the entire table row. It should be noted that addEventListener is a method in JavaScript used to register an event listener for a DOM element. Through this method, elements on the page can respond to specific user behaviors (such as clicks, keyboard input, mouse movement, etc.) and execute the corresponding callback function when the event occurs. For example, in this application, it is used to listen to the wheel scrolling event, so the parameter "wheel" and the corresponding callback function after the wheel scrolling are passed in; WheelEvent is a JavaScript event type, which represents the scrolling event of the mouse wheel or touchpad. It is a subclass of MouseEvent and is used to handle the scrolling behavior generated by input devices such as the mouse wheel and touchpad sliding; event is the variable name taken for the WheelEvent type parameter.

[0095] The core goal of the TableStepper tool class design is to provide fine-grained control over the table scrolling state, including the management of the current scrolling position, data range, and scrolling direction. The structure of the tool class is as follows:

[0096] Private member variables: currentRowIndex and currentDataNum are used to store the data row index i where the current scroll bar is located. c The amount of data D within the current scroll bar range c , which constitutes the core information of the scroll bar status; among them, the data row index i where the current scroll bar is located c That is, the index value of the first row of data displayed in the table of the current page, and the amount of data within the current scroll bar range D cThat is, the first amount of data loaded; currentRowIndex and currentDataNum are private member variables of TableStepper and will not be exposed externally. The code can be as follows:

[0097] private_currentRowIndex:number, / / The current position of the scroll bar;

[0098] private_currentDataNum:number, / / scrolling range of the scroll bar;

[0099] Therefore, there is usually a corresponding function to obtain this private member variable, for example:

[0100]

[0101]

[0102] Constructor: accept the current amount of data D c With the initial index currentIndex as an optional parameter (the default value of the initial index is 0), initialize the scroll state;

[0103] Member method: The step method is the core of the TableStepper class and is responsible for performing the scrolling operation. It accepts a parameter d indicating the scrolling direction and updates i according to the parameter. c d can be an enumeration value (up and down) or a number, providing a positive or negative number to indicate the scroll direction. In addition, the method of this application has built-in bounds checking logic to ensure that i c Always within the range of [0, D] to avoid invalid or out-of-bounds scrolling operations. The specific logic includes: when d is "down", the current row index i c Incremental, but the maximum value is not greater than the amount of data D; when d is "up", the current row index i c Decrease, but the minimum value is not less than 0; if the input d is a number, it will scroll up or down by recursively calling itself; it should be noted that the enumeration values ​​in this application are used for example in the embodiment of the present application;

[0104] Property accessors: The current scroll row index i can be easily read externally through the currentIndex and totalNum accessors c With the current data volume D c, without directly accessing the private variable; among them, totalNum is an accessor function used to expose the private member variable currentDataNum, so that the value of the private member variable currentDataNum can be obtained from the outside, that is, totalNum is used to return the value of currentDataNum.

[0105] In this application, parameter variables and member functions are defined through the TableStepper tool class to describe the current state of the table scroll bar and implement logical control of the scrolling operation.

[0106] Through the above technical scheme, by creating a special scroll bar auxiliary tool class TableStepper during the implementation process, the present invention can refine the scroll bar control and realize the scrolling of the entire row of table data. By monitoring the scroll event and combining the state of the TableStepper object, the current index range can be accurately determined, thereby intelligently requesting the upper and lower pages of data to realize instant loading of data.

[0107] See also Figure 3 As shown, Figure 3 A flow chart of the page number and the amount of data loaded per page for a single table loading of data provided in an embodiment of the present application.

[0108] In some embodiments, a method for loading data in a single table includes:

[0109] Determine the starting index value and the ending index value corresponding to the single table loading data, wherein the starting index value is smaller than the ending index value;

[0110] Determine the starting data row number corresponding to the starting index value and the ending data row number corresponding to the ending index value;

[0111] Based on the starting data row number and the ending data row number, the page number of the single table loading data and the data loading amount per page are confirmed, and then the table data corresponding to the single table loading data is obtained.

[0112] It should be understood that the starting data row number corresponding to the starting index value is the number of table data rows referred to by the starting index value, and the ending data row number corresponding to the ending index value is the number of table data rows referred to by the ending index value, that is, the starting data row number is the number of rows in the table data of the first row displayed in the visible area of ​​the page, and the ending data row number is the number of rows in the table data of the last row displayed in the visible area of ​​the page; under the prior art, the back-end paging method is usually used to request a specific page of table data with a fixed number of data items per page to avoid page freezes caused by loading the full amount of data. However, this method cannot be applied to tables with scrolling loading function, because scrolling loading will change the number of data items per page, which will This causes the back-end paging to gradually lose the performance advantage of single-page data loading. At the same time, since the paging interface can only obtain the table data of a specific page, it is difficult to accurately obtain the table data within the specified index range through a single request. Therefore, in the present application, the back-end paging interface is encapsulated twice, and the original back-end interface with page number and data volume as parameters is converted into a general request interface with the data row number range corresponding to the data index value range as a parameter, that is, the starting data row number and the ending data row number of the corresponding data for a single loading of the table data are used as parameter requests, thereby enhancing the flexibility and practicality of the interface. In addition, the data row number range is used as an input parameter, making the interface more flexible, easy to integrate and expand, and reducing the difficulty of front-end development.

[0113] In addition, in the present application, during the scrolling loading process, the minimum unit scrolling distance for each scroll is one line, that is, the scrolling distance between two adjacent positions; and the present application constrains the minimum unit scrolling distance for each scroll of the table scroll bar by calling the scrollTo function on the NDataTable component instance. As a result, during the table scrolling process, there will be a display area that will display part of the data from two adjacent pages of data. For example, the first half of the data in the display area of ​​the current page is the data in the second page of the table, and the second half is the data in the third page of the table.

[0114] Furthermore, in some embodiments, the method for confirming the page number of a single table loading data and the amount of data loaded per page includes:

[0115] If the number of rows of the starting data is less than half of the number of rows of the ending data, the number of rows of the ending data is used as the amount of data to be loaded per page, and the first page of the table is used as the page number for loading data in a single table.

[0116] If the number of starting data rows is greater than or equal to half of the number of ending data rows, the page number and the amount of data loaded per page for a single table load are confirmed by traversing each preset amount of data loaded per page.

[0117] It should be understood that if the number of starting data rows is less than half of the number of ending data rows, then it is equivalent to that the data volume range covered by the starting data rows and the ending data rows of the corresponding data of the single loading of the table data may include data of two adjacent pages. For example, the data volume range of the corresponding data rows of the single loading of the table data is [3, 10]. If 5 is used as the data loading volume per page, then [3, 5] will be on the first page, and [6, 10] will be on the second page. At this time, it violates the original intention of obtaining the complete table data single loading data under the premise of one data request. Therefore, this application uses the case where the starting data rows of the corresponding data of the single loading of the table data are less than the ending data rows, and uses the ending data rows as the data loading volume per page, and uses the first page of the table as the page number of the single loading of the table data; it should be noted that the currently displayed page number in this application is represented as p c =p i +ceil(i c / p f )-c up +c down , p i Indicates the initial page number, c up Indicates the number of pages to scroll up; c down Indicates the number of pages to be scrolled down, that is, if the page displayed in the display area includes data of two adjacent pages, the page number is the smaller page number of the two adjacent pages; for example, if the page displayed in the display area includes data of the second and third pages, the page number of the data displayed in the display area is the second page.

[0118] See also Figure 3 As shown, the process of confirming the page number of a single table load and the amount of data loaded per page includes the following:

[0119] S1, determine whether the number of rows of the starting data is less than half of the number of rows of the ending data. If the number of rows of the starting data is less than half of the number of rows of the ending data, execute S2; if the number of rows of the starting data is not less than half of the number of rows of the ending data, execute S3;

[0120] S2, taking the number of ending data rows as the amount of data to be loaded per page, and taking the first page of the table as the page number for loading data in a single table;

[0121] S3. Based on the number of starting data rows and the number of ending data rows, obtain the initial data loading amount per page;

[0122] S4, determine whether the current data loading amount per page is greater than the number of ending data rows. If the data loading amount per page is greater than the number of ending data rows, execute S5; if the data loading amount per page is not greater than the number of ending data rows, execute S6;

[0123] S5, indicating a loading request error, that is, indicating the input start data row number and end data row number, and returning a default error code, that is, page = 0, pageSize = 0;

[0124] S6, determine whether the current data loading amount per page is 1, if the current data loading amount per page is 1, execute S7; if the current data loading amount per page is not 1, execute S8;

[0125] S7, taking the current starting data row number as the current simulation starting data row number, based on the current simulation starting data row number and the current data loading amount per page, obtaining the current simulation ending data row number, and executing S9;

[0126] S8. Based on the number of rows of simulation start data of the last traversal and the current amount of data loaded per page, obtain the number of rows of data starting from the current simulation; based on the number of rows of data starting from the current simulation and the current amount of data loaded per page, obtain the number of rows of data ending from the current simulation; execute S9;

[0127] S9, determine whether the range between the current simulation start data row number and the current simulation end data row number covers the range between the start data row number and the end data row number. If the range between the current simulation start data row number and the current simulation end data row number covers the range between the start data row number and the end data row number, execute S10; if the range between the current simulation start data row number and the current simulation end data row number does not cover the range between the start data row number and the end data row number, update the current data load per page, that is, add one to the current data load per page, and return to S4 to execute the next loop;

[0128] S10, confirming the page number of the single table loading data based on the current simulation start data row number and the current simulation end data row number, and determining the data loading amount per page of the single table loading data based on the current data loading amount per page.

[0129] Specifically, if the number of starting data rows is less than half of the number of ending data rows, the number of ending data rows is used as the amount of data to be loaded per page, and the first page of the table is used as the page number for loading data in a single table.

[0130] If the number of starting data rows is greater than or equal to half of the number of ending data rows, the page number and the amount of data loaded per page for a single table load are confirmed by traversing each preset amount of data loaded per page; the details are as follows:

[0131] Based on the starting data row number and the ending data row number, the initial data loading amount per page is obtained, that is, minSize = end-start+1, where minSize represents the initial data loading amount per page, end represents the ending data row number, and start represents the starting data row number; it should be noted that when the initial index value of the table is 0, the starting data row number is the starting index value plus one, and the ending data row number is the ending index value plus one;

[0132] If the current amount of data loaded per page is greater than the end number of data rows, it means that the loading request is wrong, that is, the input start number of data rows and the end number of data rows are incorrect, and the default error code is returned;

[0133] If the current data loading amount per page is not greater than the ending data row number, and the current data loading amount per page is 1, then the current starting data row number is taken as the current simulation starting data row number, and based on the current simulation starting data row number and the current data loading amount per page, the current simulation ending data row number is obtained, that is, pageEnd=pageStart+size-1, where pageEnd represents the current simulation ending data row number; if the range between the current simulation starting data row number and the current simulation ending data row number covers the range between the starting data row number and the ending data row number, that is, pageStart≤start&&pageEnd≥end, then the page number and the data loading amount per page of a single table loading are confirmed based on the current simulation starting data row number, the current simulation ending data row number and the current data loading amount per page, that is, page=(pageStart-1) / size+1, pageSize=size, where page represents the page number of a single table loading, pageSize represents the data loading amount per page of a single table loading, and pagesStart represents the current The number of rows of data starting from the previous simulation, size represents the current amount of data loaded per page; if the range between the number of rows of data starting from the current simulation and the number of rows of data ending from the current simulation does not cover the range between the number of rows of data starting from the current simulation and the number of rows of data ending from the current simulation, then after changing the amount of data loaded per page, continue the next loop traversal, that is, in the next loop, determine the numerical relationship between the changed amount of data loaded per page and the number of rows of data ending from the current simulation, if the amount of data loaded per page is not greater than the number of rows of data ending from the current simulation, then further determine whether the amount of data loaded per page is 1, and then based on whether the amount of data loaded per page is 1, perform the corresponding calculation to obtain the number of rows of data starting from the current simulation and the number of rows of data ending from the current simulation, so as to finally determine whether the range between the number of rows of data starting from the current simulation and the number of rows of data ending from the current simulation covers the range between the number of rows of data starting from the current simulation and the number of rows of data ending from the current simulation, and loop traverse until the range between the number of rows of data starting from the current simulation and the number of rows of data ending from the current simulation covers the range between the number of rows of data starting from the current simulation and the number of rows of data ending from the current simulation; it should be noted that the current amount of data loaded per page can be changed by adding one, that is, size+=1;

[0134] Among them, if the current data loading amount per page is not greater than the ending data row number, and the data loading amount per page is not 1, then based on the simulation starting data row number of the last traversal and the current data loading amount per page, the current simulation starting data row number is obtained, that is, pageStart=start-(start%size)+1, wherein start represents the simulation starting data row number of the last traversal, and the initial value is the starting data row number; based on the current simulation starting data row number and the current data loading amount per page, the current simulation ending data row number is obtained, that is, pageEnd=pageStart+size-1; if the range between the current simulation starting data row number and the current simulation ending data row number covers the range between the starting data row number and the ending data row number, then based on the current simulation starting data row number, the current simulation ending data row number and the current data loading amount per page, the page number and the data loading amount per page of the single table loading data are confirmed, that is, page=(pagesStart-1) / size+1, pageSize=size e; if the range between the current simulation starting data row number and the current simulation ending data row number does not cover the range between the starting data row number and the ending data row number, then after changing the current data load per page, that is, changing the current data load per page can be changed by adding one, that is, size + = 1, and continue the next loop traversal; similarly, in the next loop, the numerical relationship between the changed current data load per page and the ending data row number is judged. If the current data load per page is not greater than the ending data row number, then it is further judged whether the current data load per page is 1, and then based on whether the current data load per page is 1, the corresponding calculation is performed to obtain the current simulation starting data row number and the current simulation ending data row number, so as to finally judge whether the range between the current simulation starting data row number and the current simulation ending data row number in the next loop covers the range between the starting data row number and the ending data row number, and the loop is traversed until the range between the current simulation starting data row number and the current simulation ending data row number covers the range between the starting data row number and the ending data row number.

[0135] It should be noted that during a single table data loading process, the current data loading amount per page is the corresponding data loading amount per page in each traversal, and the initial data loading amount per page in the initial traversal.

[0136] In some embodiments, the method for loading data in a single table further includes:

[0137] Based on the page number of the single table loading data and the data loading amount per page, confirm the simulation start index value and simulation end index value corresponding to the single table loading data;

[0138] Based on the start index value and the end index value corresponding to the single table loading data, the simulation start index value and the simulation end index value corresponding to the single table loading data are clipped to obtain the table data corresponding to the single table loading data.

[0139] It should be noted that according to the page number and the amount of data loaded per page of the table data loaded in a single time, the corresponding amount of data is requested to be loaded, and the complete set of table data D that completely covers the target start and end index range will be obtained. f , the target start and end index range is the range between the start index value and the end index value; due to D f The table data D does not necessarily have to be exactly the range of the starting index value and the ending index value. t , there may be Therefore, it is necessary to f to crop.

[0140] Specifically, if the target start and end index values ​​are i s and i e where i s is the starting index value, i e To terminate the index value, according to the paging parameter target p and the amount of data requested per page p obtained by traversing the loop g Redundant table loading data can be obtained, where p is the page number of a single table loading data, p g is the amount of data loaded per page, and then the paging parameters p and p are obtained by traversing the loop g The simulated starting index value i′ of the final table loading data can be obtained s and simulation termination index i′ e They are:

[0141] i′ s =p g *(p-1)+1;

[0142] i′ e =i′ s +p g -1;

[0143] Furthermore, for D f The cutting process is as follows: s -i′ s ≤i≤i e ; then it means the i-th in the simulation start and end index range data s -i′ s The row data starts as the start of cropping until i is satisfied e So far, where i represents the f The table data after trimming.

[0144] Furthermore, in some embodiments, the table scrolling loading method further includes:

[0145] Load and update the data displayed in the table of the current page. That is, the table periodic polling mechanism is optimized.

[0146] In some embodiments, the method of loading and updating the amount of data displayed in the current page table includes:

[0147] Right[i d ,i d +p g ] to load and update, where i d Indicates the index value of the first row of data displayed in the table of the current page, p g Indicates the amount of data displayed in the table on the current page.

[0148] It should be understood that there are two situations in which the amount of data displayed in the table of the current page is exactly the amount of data for one page; the other is that the amount of data displayed in the table of the current page includes part of the amount of data for two adjacent pages; furthermore, in the process of loading and updating the amount of data displayed in the table of the current page, first, the table data in the current visible range is obtained, that is, the amount of data displayed in the table of the current page, and then the data is updated according to the defined global variable t up and t down Determine whether it is necessary to partially update the current table data. If t up +t down = 0, it means that the current table has not been rolled up or rolled down, and the table data can be directly updated in an overwritten manner. up +t down ≠0, the table data needs to be partially updated. The current table data can be filtered according to the index value in the current TableStepper object and the amount of data displayed in the table on the current page, that is, [i d ,i d +p g ] to load updates.

[0149] It should be noted that loading and updating the amount of data displayed in the table of the current page is a process of requesting the backend to load data; through the above technical solution, the present application can determine the data refresh area in real time according to the scrolling status, and only refresh the data within the visible range in real time, greatly reducing unnecessary data refreshes, reducing system resource consumption, and improving system performance.

[0150] The present invention proposes a table rolling loading optimization method for real-time calculation of the current table index and adaptive determination of optimal paging request parameters, comprising:

[0151] Determine the optimal amount of data requested per page of the table: Dynamically obtain the overall height of the table and the height of the header and table data rows under the current page resolution, and calculate the optimal amount of data requested for the current table without generating a vertical scroll bar.

[0152] Create a table scroll bar auxiliary tool class TableStepper: design parameter variables that describe the current scroll state of the table scroll bar, member functions that perform scrolling logic operations on the scroll bar, and the constructor of the auxiliary tool class.

[0153] Optimize the table scrolling operation logic: add a scroll listening event to the page, instantiate the table scroll bar auxiliary tool class object TableStepper, obtain the table component instance, call the scrollTo function of the table component instance to constrain the minimum unit scrolling distance of the table, and determine the current table index range based on the private property currentIndex of the TableStepper object, and intelligently judge and automatically request the previous and next page data based on the current index value to achieve instant data loading.

[0154] Secondary encapsulation of the backend paging interface: The original backend interface with page number and data volume as parameters is converted into a general request interface with data index value range as parameter, enhancing the flexibility and practicality of the interface.

[0155] Optimization of the table data periodic polling mechanism: Adopting the secondary encapsulated interface and determining the area range of table data refresh in real time according to the current table scrolling status, the real-time refresh of data within the table visualization range is realized, which greatly reduces the system resource consumption and improves the overall performance.

[0156] In summary, the present application proposes a table scrolling loading optimization method for high-frequency data refresh suitable for back-end paging, and provides an efficient, intelligent, and low-resource consumption table scrolling loading optimization solution. First, the present application can dynamically obtain the table size under the current page resolution condition, accurately calculate the optimal data request amount, avoid unnecessary data loading, and improve data loading efficiency; secondly, by creating a special scroll bar auxiliary tool class TableStepper, the present invention can refine the scroll bar control, realize the whole row scrolling of the table data row, and by monitoring the scroll event and combining the state of the TableStepper object, it can accurately judge the current index range, so as to intelligently request the upper and lower page data and realize the instant loading of data; thirdly, the present invention designs a general method for secondary encapsulation of the back-end paging interface, using the data index value range as an input parameter, so that the interface is more flexible, easy to integrate and expand, and reduces the difficulty of front-end development; finally, the present invention can determine the data refresh area in real time according to the scrolling state, and only refresh the data within the visible range in real time, greatly reducing unnecessary data refresh, reducing system resource consumption, and improving system performance. Compared with the existing method, the present invention solves the problems of low data loading efficiency, poor user experience, and large resource consumption in the prior art, and has certain practical value and application prospects.

[0157] See also Figure 4 As shown, Figure 4 The following is a schematic diagram of a table scrolling loading device provided in an embodiment of the present application. Accordingly, the present application also provides a table scrolling loading device, including:

[0158] The first module is used to determine the optimal amount of data requested per page for the table at the current page resolution;

[0159] The second module is used to obtain scrolling events, which include scrolling directions;

[0160] The third module is used to respond to the scrolling event, load the total data volume of the table corresponding to the scrolling event based on the optimal data request volume per page and the data volume displayed in the table of the current page, and execute the scrolling event to display the corresponding table data after the scrolling event occurs on the page.

[0161] It should be understood that the present application provides a table rolling loading device, which applies the table rolling loading method in the above embodiment, and thus can have all the technical features and technical effects of the above table rolling loading method, which will not be described in detail here.

[0162] Accordingly, the present application also provides a table rolling loading device, including:

[0163] at least one processor;

[0164] at least one memory for storing at least one program;

[0165] When at least one program is executed by at least one processor, the at least one processor implements the image distance acquisition method in the above embodiment.

[0166] It should be understood that the present application provides a table rolling loading device to implement the table rolling loading method in the above embodiment. Therefore, it can have all the technical features and technical effects of the above table rolling loading method, which will not be repeated here.

[0167] Correspondingly, the present application also provides a computer-readable storage medium, in which a program executable by a processor is stored. When the program executable by the processor is executed by the processor, it is used to execute the table scrolling loading method in the above embodiment.

[0168] It should be understood that the present application also provides a computer-readable storage medium for executing the table rolling loading method in the above embodiment. Therefore, it can have all the technical features and technical effects of the above table rolling loading method, which will not be repeated here.

[0169] The above is a detailed introduction to a table scrolling loading method and device provided in an embodiment of the present application. Specific examples are used in this article 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 technical personnel in this field, based on the idea of ​​the present application, there will be changes in the specific implementation method and application scope. In summary, the content of this specification should not be understood as a limitation on the present application.

Claims

1. A table rolling loading method, characterized in that: include: Determine the optimal amount of data to request per page for the table at the current page resolution; Get a scroll event, where the scroll event includes a scroll direction; In response to the scrolling event, based on the optimal data request amount per page and the data amount displayed in the table of the current page, the total data amount of the table corresponding to the scrolling event is loaded, and the scrolling event is executed so that the corresponding table data after the scrolling event occurs is displayed on the page.

2. The table rolling loading method according to claim 1, characterized in that: The method for determining the optimal data request amount per page includes: Based on the table header height, the data row height and the total height of the table display area at the current page resolution, the optimal data request amount per page of the table at the current page resolution is determined.

3. The table rolling loading method according to claim 1, characterized in that: The method for loading the total amount of data loaded in the table corresponding to the scrolling event includes: Determine a table loading data position based on the first row data index value of the current page table display data volume, the page number of the current page table display data volume, the optimal data request volume per page and the scrolling event; Determine the number of times the table is loaded with data based on the table loading data position and the scrolling event; Based on the number of times the table is loaded with data, the optimal data request amount per page and the amount of data displayed in the table of the current page, the total amount of data loaded in the table corresponding to the scrolling event is loaded.

4. The table rolling loading method according to claim 3, characterized in that: The scrolling direction includes scrolling up and scrolling down; The table loading data position includes the current page table header and the current page table footer; The total amount of data loaded into the table includes the first amount of data that has been loaded and the second amount of data to be loaded; The method for determining the position of the table loading data includes: If the scrolling direction is upward scrolling, the index value of the first row of data displayed in the table of the current page is equal to the initial index value, and the page number of the data displayed in the table of the current page is not on the first page of the table, then the table loading data position is the table header of the current page; wherein the initial index value is the index value of the first row of the table; Based on the optimal data request amount per page and the first row data index value of the data amount displayed in the current page table, determine the last row data index value of the data amount displayed in the current page table; if the scrolling direction is downward, the last row data index value of the data amount displayed in the current page table is equal to the maximum index value of the loaded first data amount, and the page number of the data amount displayed in the current page table is not on the last page of the table, then the table loading data position is the end of the current page table.

5. The table rolling loading method according to claim 3, characterized in that: The method for loading data into the table once comprises: determining a starting index value and an ending index value corresponding to the data loaded into the table once, wherein the starting index value is smaller than the ending index value; Determine the starting data row number corresponding to the starting index value and the ending data row number corresponding to the ending index value; Based on the starting data row number and the ending data row number, the page number of the single table loading data and the data loading amount per page are confirmed, and then the table data corresponding to the single table loading data is obtained.

6. The table rolling loading method according to claim 5, characterized in that: The method for confirming the page number of the table loaded data at a time and the amount of data loaded per page includes: If the number of the starting data rows is less than half of the number of the ending data rows, the ending data rows are used as the amount of data to be loaded per page, and the first page of the table is used as the page number for loading data in a single table; If the starting number of data rows is greater than or equal to half of the ending number of data rows, the page number and the data loading amount per page of the table data loaded at a time are confirmed by traversing each preset data loading amount per page.

7. The table rolling loading method according to claim 5, characterized in that: The method for loading data into the table once also includes: Based on the page number of the single table loading data and the data loading amount per page, confirm the simulation start index value and the simulation end index value corresponding to the single table loading data; Based on the starting index value and the ending index value corresponding to the single table loading data, the simulation starting index value and the simulation ending index value corresponding to the single table loading data are clipped to obtain the table data corresponding to the single table loading data.

8. The table rolling loading method according to claim 1, characterized in that: The method further comprises: Load and update the data amount displayed in the table of the current page.

9. The table rolling loading method according to claim 8, characterized in that: The method for loading and updating the amount of data displayed in the table of the current page includes: Right[i d ,i d +p g ] to load and update, where i d Indicates the index value of the first row of data displayed in the table of the current page, p g Indicates the amount of data displayed in the table of the current page.

10. A table rolling loading device, characterized in that: include: The first module is used to determine the optimal amount of data requested per page for the table at the current page resolution; The second module is used to obtain a scrolling event, wherein the scrolling event includes a scrolling direction; The third module is used to respond to the scrolling event, load the total data volume of the table corresponding to the scrolling event based on the optimal data request volume per page and the data volume displayed in the table of the current page, and execute the scrolling event to display the corresponding table data after the scrolling event occurs on the page.

Images