Bootstrap table implementation method for displaying data from the server _javascript tips

Bootstrap-table is a boostrap form plug-in that can display JSON data directly in a table. Of course, this requires configuring some parameters and initializing the table. Its official website address is: http://bootstrap-table.wenzhixin.net.cn/. It can be downloaded using the required JS and CSS files, as well as reference documentation and examples.

There are two ways to display data to a table, one in client mode and one in server (bootstrap-table) mode.

The so-called client mode, refers to the server to display the data to be displayed to the table in one time to load out, and then converted to the JSON format to the display of the interface, in the Javaweb can be saved in the request, and then forwarded to the specified interface, in the interface initialization using the EL expression to obtain, The associated initialization function is then invoked, and the JSON string is passed in to display. The client mode is simpler, it is to load the data into the interface, and then according to the number of records you set, the automatic composition page. When you click on the second page, the data is automatically loaded and no more requests are sent to the server. At the same time, users can use their own search function, you can achieve full data search. You can use this method when you have a small amount of data. However, for large data systems, using this method will result in loading some long ago, the user is not concerned about the data, making the loading speed slowed, increased the burden on the server, wasting resources. In this case, the server mode should be used.

The so-called server mode, refers to the set of records per page and the current number of pages to be displayed, send data to the server for query, and then display in the table. This method can dynamically load the data according to the user's need, save the resources of the server, but can't use the full data search function with its own. Because the data you load is just one page of data, the full data search is only on one page.

The client-side model is simpler, and the reader can practice on its own according to official documents and examples. This article mainly introduces the server mode, and can implement the query with parameters.

The system interface is shown below:

The image above is an interface implemented using Bootstrap-table with an input box and a query button. Enter a number in the input box, click the query can go to the background to query, and then the results of the query to display the data in the table. Because there is less data in the database, each page setting displays one piece of data in order to see the effect.
The following is the front-end interface code:

First, the corresponding JS and CSS files are introduced. Define a table tag, configure the associated Boostrap-table property, and omit the column's code 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 Table-hover "id=" custable "data-pagination=" "true" Data-show-refresh= "true" data-show-toggle= "true" Data-showco Lumns= "true" > <thead> <tr> <th data-field= "Sellrecordid" data-sortable= "true" & 
       Gt Sales record ID </th> <th data-field= "Srnumber" > Sales number </th> <!--this omits the code for the table column, the code, and the above Almost--> <th class= "col-xs-2" data-field= "action" data-formatter= "Actionformatter" data-events= "actionEvents" &G T action</th> </tr> </thead> &LT;TBOdy> </tbody> </table>  

        The following is JavaScript code: defines a function inittable () for initializing a table. Line 7th method Specifies how the request was submitted, and I tried to set it to post, and found that the backend was not getting the query parameters, and I didn't know why, so I submitted it using get. The 8th line URL sets the address where you want to submit the request, where C tags are used in the JSP. Line 17th Specifies that the server-side mode load data. Line 20th Specifies the type of the query parameter, which can be set to undefined or limit, and different settings can get different parameters in the Queryparams function. The 第23-25 row Gets the page number, the number of records per page, the query criteria, and returns as a parameter to the query. There is only one condition, if you want to query multiple conditions, you can only get multiple conditions. Line 40th calls the function in ready to get the back-end data displayed in the table. The 43rd Behavior Query button binds a click event and executes when you enter a number and click on the query. Because the query is the first time to load the table after the action, so in line 4th to call the bootstrap-table provided by the function to destroy the table, or click the query can not go to the background load data.

<script type= "Text/javascript" > Function inittable () {//Destroy form $ (' #cusTable ') first. Bootstraptable (' destroy '); /sellservlet?act=ajaxgetsellrecord '/> ',//Get Data servlet address striped:true,//table display stripe pagination:true,//start paging P 
   Agesize:1,//per page of the number of records pagenumber:1,//Current first page pagelist: [5, 10, 15, 20, 25],///record number optional list search:false,//whether to enable query Showcolumns:true,//Show Drop-down box check the column showrefresh:true to display,//Show Refresh button sidepagination: "Server"/////= service-side request//set to und Efined can get Pagenumber,pagesize,searchtext,sortname,sortorder//set for limit can get limit, offset, search, sort, order query Paramstype: "Undefined", queryparams:function queryparams (params) {//Set query parameter var param = {Pagenumber:pa 
    Rams.pagenumber, PageSize:params.pageSize, Ordernum: $ ("#orderNum"). Val ()};     
   return param; }, Onloadsuccess:fUnction () {//Layer.msg ("Load succeeded") when the load succeeds; 
   Onloaderror:function () {////load Failed to execute layer.msg ("Load data failed", {time:1500, icon:2}); 
  } 
   }); 
   } $ (document). Ready (function () {//calling functions, Initializing table inittable (); 
  Execute $ ("#search") when clicking on the Query button. Bind ("click", Inittable); 
});  </script>

Back-end servlet code:

When the act parameter is obtained in the servlet, the following code is invoked. Then invoke service business logic to find, service in the judge, whether Ordernum is empty string, if empty then without ordernum parameter query, if not empty will take ordernum condition query. Functions in the service call Dao,dao also generate different SQL statements and query parameters based on whether the Ordernum parameter is empty. Line 23rd of the query is converted to a JSON string, and the 25th row gets the total number of records that satisfy the condition. Note that line 28th sets the JSON that returns the front end, where you need to return two parameters, one for total, for totals, one for rows, for tabular data.

/** * Dynamically load sales records based on page numbers and number of records per page, and query criteria * @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 (); 
  Gets the page number and the number of records per page passed by the client and converts to int type int pageSize = Integer.parseint (Request.getparameter ("pageSize")); 
  int pagenumber = Integer.parseint (Request.getparameter ("pagenumber")); 
  String ordernum = Request.getparameter ("Ordernum"); 
  Paging to find merchandise sales records, you need to determine whether there is a query with the conditions list<simssellrecord> sellrecordlist = null; 
  Sellrecordlist = Sellrecordservice.querysellrecordbypage (pagenumber, PageSize, ordernum); 
  Converts a merchandise sales record to a JSON string Sellrecordjson = Sellrecordservice.getsellrecordjson (sellrecordlist); 
  Get total number of records int = Sellrecordservice.countsellrecord (ordernum); The data that needs to be returned has the total record number and row data String json = "{\" total\ ":" "+ total +", \ "rows\": "+ Sellrecordjson + "}"; 
 Pw.print (JSON);  }

The above is a small set to introduce the Bootstrap table from the server load data to display the implementation method, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!