1. The introduction of Bootstrap Table
Regarding the introduction of Bootstrap Table, there are generally two methods:
1. Download the source code directly and add it to the project.
Since Bootstrap Table is a component of Bootstrap, it depends on Bootstrap. We first need to add a reference to Bootstrap.
2. Use our magical Nuget
Open Nuget and search for these two packages
Bootstrap is already the latest 3.3.5, so we can install it directly.
The version of Bootstrap Table is actually 0.4, which is too scammed. So the blogger suggests that the Bootstrap Table package be downloaded directly in the source code. The latest version of Bootstrap Table seems to be 1.9.0.
The background of this article is introduced:
Recently, the customer raised a demand and wanted to optimize the original management system, which can be displayed well through mobile phones. He thought of two solutions:
Plan a: Keep the original page and design a new set of pages suitable for mobile phones. When accessing the mobile phone, enter m.zhy.com (mobile page), and when accessing the PC device, enter www.zhy.com (pc page)
Solution b: Use bootstrap framework to replace the original page, and automatically adapt to mobile phones, tablets, and PC devices
Using solution a requires designing a set of interfaces and rewriting the interface suitable for the page. Considering the time and cost issues, the project adopts solution b
2. Effect display
2. A brief introduction to BootStrap table
bootStrap table is a lightweight table plug-in that uses AJAX to obtain data in JSON format. Its pagination and data filling are very convenient and supports internationalization.
3. How to use
1. Introduce js and css
<!--css style--><link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"><link href="css/bootstrap/bootstrap-table.css" rel="stylesheet"><!--js--><script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script><script src="js/bootstrap/bootstrap.min.js"></script><script src="js/bootstrap/bootstrap-table.js"></script><script src="js/bootstrap/bootstrap-table.js"></script><script src="js/bootstrap/bootstrap-table.js"></script><script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>
2. Table data filling
There are two ways to obtain data from bootStrap table. One is to specify the data source through the data-url property of the table, and the other is to specify the url when initializing the table through JavaScript to obtain data.
<table data-toggle="table"> <tead> ... </tead></table> ...
$('#table').bootstrapTable({ url: 'data.json' });The second method is more flexible when processing complex data than the first method. Generally, the second method is used to fill table data.
$(function () { //1. Initialize Table var oTable = new TableInit(); oTable.Init(); //2. Initialize Button's click event/* var oButtonInit = new ButtonInit(); oButtonInit.Init(); */ }); var TableInit = function () { var oTableInit = new Object(); // Initialize Table oTableInit.Init = function () { $('#tradeList').bootstrapTable({ url: '/VenderManager/TradeList', //Request URL (*) method: 'post', //Request method (*) toolbar: '#toolbar', //Which container striped by the tool button: true, //Where to display line interval color cache: false, //Where to use cache, default is true, so in general, you need to set this property (*) pagination: true, //Where to display paging (*) sortable: false, //Whether sort sortOrder: "asc", //Sorting method queryParams: oTableInit.queryParams, //Pagination parameters (*) sidePagination: "server", //Page method: client client pagination, server server pagination (*) pageNumber:1, //Initialize the first page to load, the default first page pageSize: 50, //The number of rows recorded per page (*) pageList: [10, 25, 50, 100], //The number of rows per page to be selected (*) strictSearch: true, clickToSelect: true, //Whether click select row height: 460, //Line height, if the height attribute is not set, the table automatically feels the height of the table according to the number of records, uniqueId: "id", //The unique identification of each row is generally the primary key column cardView: false, //Does the detailed view detailView: false, //Does the parent and child table columns: [{ field: 'id', title: 'serial number' }, { field: 'liushuiid', title: 'Transaction number' }, { field: 'orderid', title: 'Order number' }, { field: 'receivetime', title: 'Transaction time' }, { field: 'price', title: 'Amount' }, { field: 'coin_credit', title: 'Input coin' }, { field: 'bill_credit', title: 'Input banknote' }, { field: 'changes', title: 'changes' }, { field: 'tradetype', title: 'Transaction type' }, { field: 'goodmachineid', title: 'Freighter number' },{ field: 'inneridname', title: 'Cargo lane number' },{ field: 'goodsName', title: 'Product name' },{ field: 'changestatus', title: 'Payment' },{ field: 'sendstatus', title: 'Ship' },] }); }; //Get the query parameters oTableInit.queryParams = function (params) { var temp = { //The key name here and the variable name of the controller must be always. If this is changed, the controller also needs to be changed to the same limit: params.limit, //Page size offset: params.offset, //Page number sdate: $("#stratTime").val(), edit: $("#endTime").val(), sellerid: $("#sellerid").val(), orderid: $("#orderid").val(), CardNumber: $("#CardNumber").val(), maxrows: params.limit, pageindex:params.pageNumber, portid: $("#portid").val(), CardNumber: $("#CardNumber").val(), tradetype:$('input:radio[name="tradetype"]:checked').val(), success:$('input:radio[name="success"]:checked').val(), }; return temp; }; return oTableInit; };The field field must correspond to the field returned by the server before data will be displayed.
3. Get data in the background
a. servlet obtains data
BufferedReader bufr = new BufferedReader( new InputStreamReader(request.getInputStream(),"UTF-8")); StringBuilder sBuilder = new StringBuilder(""); String temp = ""; while((temp = bufr.readLine()) != null){ sBuilder.append(temp); } bufr.close(); String json = sBuilder.toString(); JSONObject json1 = JSONObject.fromObject(json); String sdate= json1.getString("sdate");//Get front-end data through this method...b. The corresponding method in springMvc Controller obtains data
public JsonResult GetDepartment(int limit, int offset, string orderId, string SellerId, PortId, CardNumber, Success, maxrows, tradetype){ ...}4. Pagination (the one that encounters the most problems)
Using pagination, the data returned by the server side must include rows and total, the code is as follows:
...<br>gblst = SqlADO.getTradeList(sql,pageindex,maxrows);JSONArray jsonData=new JSONArray(); JSONObject jo=null; for (int i=0,len=gblst.size();i<len;i++) { TradeBean tb = gblst.get(i); if(tb==null) { continue; } jo=new JSONObject(); jo.put("id", i+1); jo.put("liushuiid", tb.getLiushuiid()); jo.put("price", String.format("%1.2f",tb.getPrice()/100.0)); jo.put("mobilephone", tb.getMobilephone()); jo.put("receivetime", ToolBox.getYMDHMS(tb.getReceivetime())); jo.put("tradetype", clsConst.TRADE_TYPE_DES[tb.getTradetype()]); jo.put("changestatus", (tb.getChangestatus()!=0)?"Success":"failed"); jo.put("changestatus", (tb.getChangestatus()!=0)?"Success":"failed"); jo.put("sendstatus", (tb.getSendstatus()!=0)?"Success":"failed"); jo.put("bill_credit", String.format("%1.2f",tb.getBill_credit()/100.0)); jo.put("changes",String.format("%1.2f",tb.getChanges()/100.0)); jo.put("goodroadid", tb.getGoodroadid()); jo.put("SmsContent", tb.getSmsContent()); jo.put("orderid", tb.getOrderid()); jo.put("goodsName", tb.getGoodsName()); jo.put("inneridname", tb.getInneridname()); jo.put("xmlstr", tb.getXmlstr()); jsonData.add(jo); } int TotalCount=SqlADO.getTradeRowsCount(sql); JSONObject jsonObject=new JSONObject(); jsonObject.put("rows", jsonData);//JSONArray jsonObject.put("total",TotalCount);//Total records out.print(jsonObject.toString()); <br>...5. Introduction to the content of the pagination interface
The front-end gets the paged data, the code is as follows:
...<br>oTableInit.queryParams = function (params) { var temp = { //The key name here and the controller variable name must be always. If this is changed, the controller also needs to be changed to the same limit: params.limit, //How many records are offset: params.offset, //Display how many records are recorded on a page sdate: $("#stratTime").val(), }; return temp; };<br>...The backend gets the paged data, the code is as follows:
...<br>int pageindex=0;int offset = ToolBox.filterInt(json1.getString("offset"));int limit = ToolBox.filterInt(json1.getString("limit")); if(offset !=0){ pageindex = offset/limit;} pageindex+= 1;//How many pages<br>...4. Others
bootstrap3 is compatible with IE8 browser! View the article://www.VeVB.COM/article/83366.htm
If you haven't learned enough, you can click here to learn and then attach a wonderful topic to you: Bootstrap learning tutorial
The above is all about this article. I hope it can help you better learn the JS table component artifact bootstrap table.