Bidirectional binding paging control system and method

Abstract

The invention relates to the technical field of paging control, and discloses a bidirectional binding paging control system which comprises a system module assembly, and the system module assembly comprises a page number changing module, a page size adjusting module, a data synchronization module and a core element module. The invention further provides a two-way binding paging control method which comprises the following steps: S1, performing two-way binding on the paging state, and establishing a bridge for two-way data binding between the father component and the child component through a fine response type programming mechanism by using the calculation attribute of the paging function in the Vue component. According to the method, the principle of one-way data flow is kept, meanwhile, convenience similar to two-way binding is achieved, a child component becomes a pure presentation layer component, state management is concentrated on a parent component, the best practice of Vue component communication is met, the implementation mode is suitable for a complex UI component needing to be kept in state synchronization with the parent component, and the implementation efficiency is improved. The method not only solves the problem of data consistency, but also provides good expansibility.

Description

Technical Field

[0001] The present invention relates to the technical field of paging control, and in particular to a bidirectional binding paging control system and method. Background Art

[0002] WEB application systems are increasingly used in enterprises. Compared with common graphical user interface applications that require the installation of client-side programs, WEB applications have many advantages.

[0003] In a WEB application, the client sends a request message carrying a uniform resource locator to the WEB server, requesting the WEB server to provide a specified WEB page; the WEB server finds the file with the corresponding URL based on the client's request, and this file records the interface element data of the specified WEB page; the WEB server records the current business data of the WEB page in the file; the WEB server sends the file to the client; the client displays the WEB page on the client used by the user based on the file.

[0004] In web application development, paging control is the core function of data display. Traditional paging control has the following problems:

[0005] 1. Paging state management is chaotic, and parent-child component data is out of sync

[0006] 2. Page number and page size changes are complex to handle

[0007] 3. Paging parameters are not updated in time

[0008] 4. Poor component reusability and code redundancy

[0009] Therefore, we need a paging control solution that can keep the paging state synchronized and easy to reuse. Summary of the Invention

[0010] (1) Technical problems solved

[0011] In response to the shortcomings of the existing technology, the present invention provides a two-way binding paging control system and method, which adopts a two-way binding paging control mechanism to facilitate parent-child component data synchronization, simplify the processing of page number and page size changes, and update paging parameters more timely.

[0012] (2) Technical solution

[0013] To achieve the above object, the present invention provides the following technical solutions:

[0014] A bidirectionally bound paging control system includes a system module assembly, wherein the system module assembly includes a page number change module, a page size adjustment module, a data synchronization module, and a core element module. The data synchronization module is connected to an event trigger sequence module and a status update module. The core element module includes a total number display module and a page number selector.

[0015] Furthermore, the core element module also includes a page number navigation button and a page number input box.

[0016] On the basis of the above solution, the system module assembly includes a computer attribute design module, which includes a current page number attribute module and a display quantity per page module.

[0017] As a further solution of the present invention, the system module assembly includes a paging event processing module, and the paging event processing module includes a display quantity changing module and a page number switching operation module.

[0018] Furthermore, the paging event processing module includes a paging component configuration module, and the paging component configuration module includes a parameter configuration module and an event monitoring module.

[0019] The present invention also proposes a bidirectional binding paging control method, comprising the following steps:

[0020] S1: Two-way binding of paging status. Use the calculated properties of the paging function in the Vue component. Through the precise responsive programming mechanism, a bridge for two-way data binding is established between the parent and child components. The computer properties include: the current page number and the number of items displayed per page. Both computer properties use the getter and setter mode to achieve two-way data flow.

[0021] S2: Computer property design. When reading computer properties, the current value is obtained from the value and size properties received by the parent component through props. When writing, the modified value is passed back to the parent component through Vue's custom event system. CurrentPage uses the input event, and pageSize adopts the update:size syntax sugar.

[0022] S3: Paging event processing mechanism. When processing paging events, the component will execute the following processing flow for changes in the number of pages displayed:

[0023] 1) First, update the internal page size state to ensure that the component responds immediately to user operations;

[0024] 2) Trigger a unified paging change event, carrying the latest page number and page size information;

[0025] 3) Use structured event parameters, including the current page number and the newly set page size value;

[0026] For page switching operations, the component performs the following processing flow:

[0027] 1) Update the current page status immediately to ensure instant feedback of the UI;

[0028] 2) Notify the parent component of changes through the same event interface;

[0029] 3) Pass the complete paging state consisting of the new page number value and the current page size;

[0030] S4: Pagination component configuration. The component intelligently controls the display state of the paginator through the conditional rendering mechanism. The component supports complete custom settings when configuring parameters:

[0031] 1) Current page number binding: Display the page number position of the user in real time;

[0032] 2) Display quantity per page: The number of data items displayed per page can be adjusted dynamically;

[0033] 3) Total data statistics: displays the complete data size;

[0034] 4) Optional paging size: provides multiple options for the number of items displayed per page;

[0035] 5) Layout customization: supports flexible definition of pager layout style.

[0036] As a further solution of the present invention, in said S4, events are monitored when the paging component is configured, and the event of changing the number of items displayed per page is triggered when the user adjusts the number of items displayed per page.

[0037] Furthermore, the page switching event is monitored in S4: it is triggered when the user clicks to turn the page or directly jumps to the page.

[0038] (3) Beneficial effects

[0039] Compared with the prior art, the present invention provides a bidirectional binding paging control system and method, which has the following beneficial effects:

[0040] 1. The design of this computer property of the present invention maintains the principle of one-way data flow while achieving convenience similar to two-way binding, making the child component a pure presentation layer component. State management is centralized in the parent component, in line with Vue's component communication best practices. The implementation of currentPage is compatible with the v-model directive, and the implementation of pageSize supports the .sync modifier, providing a clear data flow path for easy debugging and maintenance. This implementation is suitable for complex UI components that need to keep their state synchronized with the parent component. It not only solves the data consistency problem, but also provides good scalability and can easily add additional state properties.

[0041] 2. The present invention simplifies the processing logic of the parent component through a unified event interface. It only needs to listen to a single event to capture all paging changes. The complete state object transmission avoids information fragmentation and ensures that the parent component obtains the complete paging context. The order of updating the internal state first and then triggering the event ensures the UI response speed and good scalability. Other paging-related parameters can be easily added to the event object. The entire implementation provides powerful functions and good maintainability while keeping the code concise. This implementation is particularly suitable for scenarios that require complex state synchronization and provides a reliable infrastructure for the paging function.

[0042] 3. The design of the paging component of the present invention fully considers actual business needs. It not only maintains the elegant appearance of the Element UI component library, but also provides complete business functions. It can maintain real-time data synchronization with the parent component to ensure the accuracy and consistency of the paging status. It is an ideal solution for processing large data display scenarios. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] Figure 1 This is a schematic diagram of the module structure of a bidirectional binding paging control system proposed by the present invention.

[0044] Figure 2 This is a schematic diagram of the process structure of a two-way binding paging control method proposed by the present invention. DETAILED DESCRIPTION

[0045] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of the present invention.

[0046] Example 1

[0047] Reference Figure 1-2A two-way binding paging control system includes a system module assembly, which includes a page number change module, a page size adjustment module, a data synchronization module, and a core element module. The data synchronization module is connected to an event trigger sequence module and a status update module. The core element module includes a total number display module and a page number selector.

[0048] The core element module also includes a page number navigation button and a page number input box. The system module assembly includes a computer attribute design module. The computer attribute design module includes a current page number attribute module and a display quantity per page module.

[0049] A two-way binding paging control method includes the following steps:

[0050] S1: Two-way binding of paging status. Use the calculated properties of the paging function in the Vue component. Through the precise responsive programming mechanism, a bridge for two-way data binding is established between the parent and child components. The computer properties include: current page number (currentPage) and the number of pages displayed per page (pageSize). Both computer properties use the getter / setter mode to achieve two-way data flow.

[0051] S2: Computer property design. When reading (getter), computer properties obtain the current value from the value and size properties received by the parent component through props, ensuring that the state displayed by the child component is synchronized with the parent component. When writing (setter), the modified value is passed back to the parent component through Vue's custom event system ($emit). CurrentPage uses the input event, while pageSize adopts the update:size syntax sugar. This computer property design maintains the principle of one-way data flow while achieving the convenience similar to two-way binding, making the child component a pure presentation layer component. State management is centralized in the parent component, in line with Vue's component communication best practices. The implementation of currentPage is compatible with the v-model directive, and the implementation of pageSize supports the .sync modifier, providing a clear data flow path for easy debugging and maintenance. This implementation is suitable for complex UI components that need to keep their state synchronized with the parent component. It not only solves the data consistency problem, but also provides good scalability and can easily add additional state properties.

[0052] S3: Paging event handling mechanism. When handling paging events, for changes in the number of items displayed per page (handleSizeChange), the component will execute the following processing flow:

[0053] 1) First, update the internal page size state to ensure that the component responds immediately to user operations;

[0054] 2) Trigger a unified paging change event, carrying the latest page number and page size information;

[0055] 3) Use structured event parameters, including the current page number and the newly set page size value;

[0056] For the page switching operation (handleCurrentChange), the component performs the following processing flow:

[0057] 1) Update the current page status immediately to ensure instant feedback of the UI;

[0058] 2) Notify the parent component of changes through the same event interface;

[0059] 3) The complete paging state consisting of the new page number and the current page size is passed. The unified event interface simplifies the processing logic of the parent component, allowing it to capture all paging changes by simply listening to a single event. The complete state object transmission avoids information fragmentation and ensures that the parent component obtains the complete paging context. The order of updating the internal state before triggering the event ensures UI responsiveness and good scalability, allowing for the easy addition of other paging-related parameters to the event object. The entire implementation provides powerful functionality and good maintainability while keeping the code concise. This implementation is particularly suitable for scenarios requiring complex state synchronization and provides a reliable infrastructure for paging functionality.

[0060] S4: Pagination component configuration. The component intelligently controls the display state of the paginator through the conditional rendering mechanism (v-if), ensuring that pagination is rendered only when it is really needed. This improves page performance and user experience. The component supports complete customization when configuring parameters:

[0061] 1) Current page number binding: Display the page number position of the user in real time;

[0062] 2) Display quantity per page: The number of data items displayed per page can be adjusted dynamically;

[0063] 3) Total data statistics: displays the complete data size;

[0064] 4) Optional paging size: provides multiple options for the number of items displayed per page;

[0065] 5) Layout customization: supports flexible definition of pager layout style;

[0066] The design of this paging component fully considers actual business needs. It not only maintains the elegant appearance of the Element UI component library, but also provides complete business functions. It can maintain real-time data synchronization with the parent component to ensure the accuracy and consistency of the paging status. It is an ideal solution for handling large data display scenarios.

[0067] Example 2

[0068] Reference Figure 1-2 A two-way binding paging control system includes a system module assembly, which includes a page number change module, a page size adjustment module, a data synchronization module, and a core element module. The data synchronization module is connected to an event trigger sequence module and a status update module. The core element module includes a total number display module and a page number selector.

[0069] The core element module also includes page number navigation buttons and page number input boxes. The system module assembly includes a computer property design module. The computer property design module includes a current page number property module and a display quantity per page module. The system module assembly includes a paging event processing module. The paging event processing module includes a display quantity change module and a page number switching operation module. The paging event processing module includes a paging component configuration module, and the paging component configuration module includes a parameter configuration module and an event monitoring module.

[0070] A two-way binding paging control method includes the following steps:

[0071] S1: Two-way binding of paging status. Use the calculated properties of the paging function in the Vue component. Through the precise responsive programming mechanism, a bridge for two-way data binding is established between the parent and child components. The computer properties include: current page number (currentPage) and the number of pages displayed per page (pageSize). Both computer properties use the getter / setter mode to achieve two-way data flow.

[0072] S2: Computer property design. When reading (getter), computer properties obtain the current value from the value and size properties received by the parent component through props, ensuring that the state displayed by the child component is synchronized with the parent component. When writing (setter), the modified value is passed back to the parent component through Vue's custom event system ($emit). CurrentPage uses the input event, while pageSize adopts the update:size syntax sugar. This computer property design maintains the principle of one-way data flow while achieving the convenience similar to two-way binding, making the child component a pure presentation layer component. State management is centralized in the parent component, in line with Vue's component communication best practices. The implementation of currentPage is compatible with the v-model directive, and the implementation of pageSize supports the .sync modifier, providing a clear data flow path for easy debugging and maintenance. This implementation is suitable for complex UI components that need to keep their state synchronized with the parent component. It not only solves the data consistency problem, but also provides good scalability and can easily add additional state properties.

[0073] S3: Paging event handling mechanism. When handling paging events, for changes in the number of items displayed per page (handleSizeChange), the component will execute the following processing flow:

[0074] 1) First, update the internal page size state to ensure that the component responds immediately to user operations;

[0075] 2) Trigger a unified paging change event, carrying the latest page number and page size information;

[0076] 3) Use structured event parameters, including the current page number and the newly set page size value;

[0077] For the page switching operation (handleCurrentChange), the component performs the following processing flow:

[0078] 1) Update the current page status immediately to ensure instant feedback of the UI;

[0079] 2) Notify the parent component of changes through the same event interface;

[0080] 3) The complete paging state consisting of the new page number and the current page size is passed. The unified event interface simplifies the processing logic of the parent component, allowing it to capture all paging changes by simply listening to a single event. The complete state object transmission avoids information fragmentation and ensures that the parent component obtains the complete paging context. The order of updating the internal state before triggering the event ensures UI responsiveness and good scalability, allowing for the easy addition of other paging-related parameters to the event object. The entire implementation provides powerful functionality and good maintainability while keeping the code concise. This implementation is particularly suitable for scenarios requiring complex state synchronization and provides a reliable infrastructure for paging functionality.

[0081] S4: Pagination component configuration. The component intelligently controls the display state of the paginator through the conditional rendering mechanism (v-if), ensuring that pagination is rendered only when it is really needed. This improves page performance and user experience. The component supports complete customization when configuring parameters:

[0082] 1) Current page number binding: Display the page number position of the user in real time;

[0083] 2) Display quantity per page: The number of data items displayed per page can be adjusted dynamically;

[0084] 3) Total data statistics: displays the complete data size;

[0085] 4) Optional paging size: provides multiple options for the number of items displayed per page;

[0086] 5) Layout customization: supports flexible definition of pager layout style;

[0087] This paging component was designed with practical business needs in mind, maintaining the elegant appearance of the Element UI component library while providing comprehensive business functionality. It synchronizes real-time data with its parent component, ensuring the accuracy and consistency of paging status, making it an ideal solution for large data display scenarios. In S4, events are monitored during paging component configuration. The page count change event is triggered when the user adjusts the number of items displayed per page. S4 also monitors page number switching events, which are triggered when the user clicks to turn pages or directly jumps to a new page.

[0088] In the description herein, it should be noted that relational terms such as first and second, etc., are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Furthermore, the terms "include," "comprise," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, article, or apparatus that includes a list of elements includes not only those elements but also other elements not explicitly listed, or elements inherent to such process, method, article, or apparatus.

Claims

1. A bidirectional binding paging control system, comprising a system module assembly, characterized in that: The system module assembly includes a page number change module, a page size adjustment module, a data synchronization module, and a core element module. The data synchronization module is connected to an event trigger sequence module and a status update module. The core element module includes a total number display module and a page number selector.

2. A two-way binding paging control system according to claim 1, characterized in that: The core element module also includes a page number navigation button and a page number input box.

3. A bidirectional binding paging control system according to claim 1, characterized in that: The system module assembly includes a computer attribute design module, which includes a current page number attribute module and a display quantity per page module.

4. A two-way binding paging control system according to claim 1, characterized in that: The system module assembly includes a paging event processing module, and the paging event processing module includes a display quantity changing module and a page number switching operation module.

5. A two-way binding paging control system according to claim 4, characterized in that: The paging event processing module includes a paging component configuration module, and the paging component configuration module includes a parameter configuration module and an event monitoring module.

6. A two-way binding paging control method, characterized in that: The following steps are involved: S1: Two-way binding of paging status. Use the calculated properties of the paging function in the Vue component. Through the precise responsive programming mechanism, a bridge for two-way data binding is established between the parent and child components. The computer properties include: the current page number and the number of items displayed per page. Both computer properties use the getter and setter mode to achieve two-way data flow. S2: Computer property design. When reading computer properties, the current value is obtained from the value and size properties received by the parent component through props. When writing, the modified value is passed back to the parent component through Vue's custom event system. CurrentPage uses the input event, and pageSize adopts the update:size syntax sugar. S3: Paging event processing mechanism. When processing paging events, the component will execute the following processing flow for changes in the number of pages displayed: 1) First, update the internal page size state to ensure that the component responds immediately to user operations; 2) Trigger a unified paging change event, carrying the latest page number and page size information; 3) Use structured event parameters, including the current page number and the newly set page size value; For page switching operations, the component performs the following processing flow: 1) Update the current page status immediately to ensure instant feedback of the UI; 2) Notify the parent component of changes through the same event interface; 3) Pass the complete paging state consisting of the new page number value and the current page size; S4: Pagination component configuration. The component intelligently controls the display state of the paginator through the conditional rendering mechanism. The component supports complete custom settings when configuring parameters: 1) Current page number binding: Display the page number position of the user in real time; 2) Display quantity per page: The number of data items displayed per page can be adjusted dynamically; 3) Total data statistics: displays the complete data size; 4) Optional paging size: provides multiple options for the number of items displayed per page; 5) Layout customization: supports flexible definition of pager layout style.

7. A two-way binding paging control method according to claim 6, characterized in that: In the above S4, events are monitored when the paging component is configured. The event of changing the number of items displayed per page is triggered when the user adjusts the number of items displayed per page.

8. A two-way binding paging control method according to claim 7, characterized in that: The page switching event monitoring in S4 is triggered when the user clicks to turn the page or directly jumps to the page.

Images