Bootstrap Table is used to display and load data from the server.

Bootstrap Table is used to display and load data from the server.

Bootstrap-Table is a Boostrap Table plug-in that can directly display JSON data in tables. Of course, you need to configure some parameters and initialize the table. Its official website address is http://bootstrap-table.wenzhixin.net.cn /. You can download and use the required JS and CSS files, as well as reference documents and examples.

Bootstrap-Table displays data in tables in two ways: client mode and server mode.

The so-called client Mode means loading the data to be displayed in the table on the server at one time, and then converting the data to JSON format to the interface to be displayed, you can save the content in the request in JavaWeb and forward it to the specified interface. You can use the EL expression to obtain the content during interface initialization, call the initialization function, and upload the JSON string to display the content. The client mode is relatively simple. It loads data to the interface at a time and automatically generates pages based on the number of records on each page you set. When the second page is clicked, data is automatically loaded and no request is sent to the server. At the same time, users can use their own search functions to achieve full data search. You can use this method when the data volume is small. However, for systems with a large amount of data, using this method may cause loading of data that has not been concerned for a long time, slowing down the loading speed, increasing the burden on the server and wasting resources. In this case, the server mode should be used.

The so-called server mode refers to sending data to the server for query based on the set number of records per page and the current page number to be displayed, and then displaying the data in the table. This method can dynamically load data based on user needs, saving server resources, but cannot use its own full data search function. Because the data you load is only one page of data, the full data search scope is only one page.

The client mode is relatively simple. You can use it based on official documents and examples. This section mainly introduces the server mode and supports query with parameters.

The system interface is shown in the following figure:

Is an interface implemented using Bootstrap-Table with an input box and a query button. Enter the ticket number in the input box and click query to go to the background for query. Then, the data of the query result is displayed in the table. Because there is little data in the database, to see the effect, each page is set to display a piece of data.
The front-end interface code is as follows:

First introduce the corresponding JS and CSS files. Define a table label and configure the boostrap-table attribute. The column code is omitted here.

<Link href = "css/bootstrap.min.css" rel = "stylesheet" type = "text/css"> <link href = "css/bootstrap-table.min.css" rel = "stylesheet" type = "text /css "> <script src =" js/jquery. min. js "> </script> <script src =" js/bootstrap. min. js "> </script> <script src =" js/plugins/bootstrap-table.min.js "> </script> <script src =" js/plugins/bootstrap-table-zh-CN.js "> </script> <table class = "table-hover" id = "cusTable" data-pa Gination = "true" data-show-refresh = "true" data-show-toggle = "true" data-showColumns = "true"> <thead> <tr> <th data -field = "sellRecordId" data-sortable = "true"> sales record id </th> <th data-field = "srNumber"> sales order number </th> <! -- The code of the table column is omitted here, code is similar to the above --> <th class = "col-xs-2" data-field = "action" data-formatter = "actionFormatter" data-events = "actionEvents"> Action </th> </tr> </thead> <tbody> </table>

The following JavaScript code defines a function, initTable (), to initialize a table. The method in row 7th specifies the request submission method. I tried to set it to post submission. The result showed that the backend could not obtain the query parameter and I don't know why, so I used get to submit the request. The url in line 3 sets the address of the request to be submitted. The C tag is used in JSP. Row 3 specifies the server mode to load data. Row 20th specifies the query parameter type, which can be set to undefined or limit. Different settings can be obtained in the queryParams function. Row 23-25 obtains the page number, number of records on each page, and query conditions as the query parameters. There is only one condition. to query multiple conditions, you only need to obtain multiple conditions. Row 3 calls the function in ready to obtain the backend data. The data is displayed in the table. 43rd the action query button is bound to a click event. It is executed when you enter the ticket number and click query. Because the query is performed only after the table is loaded for the first time, you must call the function provided by bootstrap-table to destroy the table in row 4th. Otherwise, you cannot load data in the background when you click query.

<Script type = "text/javascript"> function initTable () {// destroy the table $ ('# cusTable') first '). bootstrapTable ('deststroy'); // initialize the table and dynamically load data from the server $ ("# cusTable "). bootstrapTable ({method: "get", // use the get request to obtain data from the server url: "<c: url value = '/SellServlet? Act = ajaxGetSellRecord '/> ", // Servlet address for getting data striped: true, // pagination: true in the table, // pageSize: 1, // number of records displayed on each page pageNumber: 1, // current page pageList: [5, 10, 15, 20, 25], // optional list of records search: false, // whether to enable the query showColumns: true, // select showRefresh: true in the show drop-down box, // display the refresh button sidePagination: "server ", // indicates the server request // if it is set to undefined, you can obtain pageNumber, pageSize, searchText, sortName, sortOrder // if it is set to limit, you can obtain limit, offset, search, sort, order queryParamsType: "undefined", queryParams: function queryParams (params) {// set the query parameter var param = {pageNumber: params. pageNumber, pageSize: params. pageSize, orderNum: $ ("# orderNum "). val ()}; return param;}, onLoadSuccess: function () {// execute layer when loading is successful. msg ("loaded successfully") ;}, onLoadError: function () {// when loading fails, execute layer. msg ("failed to load data", {time: 1500, icon: 2}) ;}}$ (document ). ready (function () {// call the function, initialize the table initTable (); // execute $ ("# search") When you click the query button "). bind ("click", initTable) ;}); </script>

Backend servlet code:

After obtaining the act parameter in the servlet, call the following code. Then, call the service business logic for search. The service determines whether orderNum is a Null String. If it is null, the query does not contain the orderNum parameter. If it is not null, the query must contain the orderNum condition. The service calls dao. The functions in dao must also generate different SQL statements and query parameters based on whether the orderNum parameter is null. Rows 23rd convert the queried records into json strings, and rows 25th obtain the total number of records that meet the conditions. Note that the front-end json is set in row 28th. Here, two parameters must be returned: total, total record count, and rows, table data.

/*** Based on the page number and the number of records on each page, and query condition dynamic loading of sales records * @ param request * @ param response * @ throws IOException * @ author lzx */private void ajaxGetSellRecord (HttpServletRequest request, HttpServletResponse response) throws IOException {response. setCharacterEncoding ("UTF-8"); PrintWriter pw = response. getWriter (); // obtain the page number and the number of records on each page passed by the client, and convert it to int type int pageSize = Integer. parseInt (request. getParameter ("pageSize"); int pageNumber = Integer. parseInt (request. getParameter ("pageNumber"); String orderNum = request. getParameter ("orderNum"); // query the product sales records by page. You need to determine whether the List contains the query conditions <SimsSellRecord> sellRecordList = null; sellRecordList = sellRecordService. querySellRecordByPage (pageNumber, pageSize, orderNum); // converts the product sales record to a json String sellRecordJson = sellRecordService. getSellRecordJson (sellRecordList); // get the total number of records int total = sellRecordService. countSellRecord (orderNum); // The total number of records to be returned and the row data String json = "{\" total \ ":" + total + ", \" rows \": "+ sellRecordJson +"} "; pw. print (json );}

The above section describes how to display the Bootstrap Table data loaded from the server. I hope it will be helpful to you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!