Metronic-based Bootstrap development framework experience (18) -- integrates pagination and sorting support for the Bootstrap-table plug-in the Code Generation Tool Database2Sharp,

Metronic-based Bootstrap development framework experience (18) -- integrates pagination and sorting support for the Bootstrap-table plug-in the Code Generation Tool Database2Sharp,

In our development system interface, both Web and Winform are the same. The main interface is the list display main interface, editing and Viewing Interface, and some auxiliary interfaces such as the import interface and selection interface, the main interface of the list display is a comprehensive data display interface. Generally, records need to be paginated properly and various functions such as adding, deleting, modifying, and querying buttons are integrated. As the development project needs to be defended, it is a normal requirement to display and sort data records by page, therefore, in the code generation tool, the list display plug-in on the main list interface is adjusted to the Bootstrap-table plug-in, this article describes how to integrate the paging and sorting functions of the Bootstrap-table plug-in the Code Generation Tool Database2Sharp.

1. pagination in the Web interface list (1) Conventional paging Mode

In the initial pagination mode of the Web interface list, the more common Bootstrap Paginator paging mode is used. The content is generated in HTML combination. First, the header is set, and then the Page List data is obtained to traverse and generate relevant HTML data, added to the page. This method is also a more efficient processing method. For example, I wrote a Summary of the Metronic-based Bootstrap development framework experience at the beginning of this series (2) -- the list page processing is the same as the use of the plug-in JSTree. For quick query of business data, a tree list is placed on the left to facilitate classification query. The interface is shown below.

This method is very controllable and can fully control HTML code. It is very suitable for displaying some data on the custom interface, such as the icon pagination display interface I have previously introduced, it is completely custom content display, and the icon interface is as follows.

 

2) Bootstrap-table plug-in Paging

It is very convenient to use the conventional paging interface, but with some special requirements of different projects, the demand for sorting headers is also very strong, the preceding paging processing method cannot implement the sorting of headers. Therefore, the Bootstrap-Table plug-in is introduced, which is widely used and has powerful functions, you can use Attribute configuration to implement detailed functional control. The Bootstrap-table plug-in provides a rich set of attributes, supports query, paging, sorting, check boxes, setting display columns, Card View, Master/Slave table display, merging columns, and international processing, the plug-in also provides some good extension functions, such as moving rows and moving column locations.

Therefore, I have studied and summarized the use of this plug-in. For detailed use of this plug-in, refer to my essay Summary of Metronic-based Bootstrap development framework experience (16) -- use the bootstrap-table plug-in to query, pagination, and sort table records. This plug-in interface is also very beautiful.

 

2. Integration of pagination and sorting support for the Bootstrap-table plug-in the Code Generation Tool Database2Sharp

Our code generation tool Database2Sharp is designed for the framework development service. Both Winform and Web development can quickly generate framework code and interface code based on databases, the code generation tool function of this adjustment adds pagination support for the Bootstrap-table plug-in the list interface code, which makes the interface code for developing the Bootstrap framework richer and faster.

On the code generation tool Database2Sharp, we first use the Enterprise Library code to incrementally generate the Framework Code of the main framework.

Then, use the Bootstrap Web interface code generation function, which can be selected in the toolbar as follows.

After selecting a database and a table, you can perform interface code (including controller code and view interface code). The view is divided into two modes, one is to use the Bootstrap-table plug-in for paging and sorting (index. cshtml), one is the conventional Bootstrap Paginator paging processing (index2.cshtml ).

Old customers can continue to use the index2.cshtml style, or use the paging and sorting method (index. cshtml) of the latest Bootstrap-table plug-in ).

The generated interface is divided into HTML and JS parts, which are closely related. We can adjust some of them to achieve rich interface layout.

Part of the JS Code (display part of paging processing) is as follows.

The display column of List data is generated by the database field by default. After the column is generated, we can adjust it to properly display the data we are interested in.

Of course, the generated interface code also contains a lot of other JS Code, such as editing and viewing code and control correspondence, and the processing of Code such as import and export, which are all generated together, we can crop and adjust the entire interface as needed, greatly improving the development efficiency.