Bootstrap Table use sharing, bootstraptable

Bootstrap Table use sharing, bootstraptable

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.

Recently, the customer raised a demand to optimize the original management system, which can be well presented through mobile phones. Two solutions were proposed:

Solution: Retain the original page and design a new set of pages suitable for mobile phones. When the mobile phone is accessed, enter m.zhy.com (mobile phone page) and enter www.zhy.com (pc page)

Solution B: Uses the bootstrap framework to replace existing pages and automatically adapts to mobile phones, tablets, and PC devices.

To adopt Solution a, you need to design a set of interfaces and rewrite the interface suitable for the page. Considering the time and cost problems, the project adopts solution B.

I. effect display

II. Introduction to BootStrap table

BootStrap table is a lightweight table plug-in. AJAX is used to obtain data in JSON format, which facilitates paging and data filling and supports internationalization.

Iii. Usage

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. min. js "> </script> <script src =" js/bootstrap/bootstrap-table.js "> </script> <script src =" js/bootstrap/bootstrap-table-zh-CN.js "> </script>

2. table Data Filling

BootStrap table can be used to obtain data. One is to specify the data source through the data-url attribute of table, and the other is to specify the url when initializing the table through JavaScript to obtain data.

<table data-toggle="table">    <thead>        ...    </thead></table>

...

$('#table').bootstrapTable({          url: 'data.json'  });

The second method is more flexible in processing complex data. The second method is generally used for table data filling.

$ (Function () {// 1. initialize Table var oTable = new TableInit (); oTable. init (); // 2. initialize the Button 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 the background URL (*) method: 'post', // Request method (*) toolbar: '# toolbar', // container used by the tool button striped: true, // whether to display the row interval color cache: false, // whether to use the cache. The default value is true, therefore, you need to set this attribute (*) pagination: true, // whether to display paging (*) sortable: false, // whether to enable sorting sortOrder: "asc ", // sorting method queryParams: oTableInit. queryParams, // pass the parameter (*) sidePagination: "server", // paging mode: client page, server Page (*) pageNumber: 1, // initialize and load the first page. The default page is pageSize: 50. // The number of record lines per page (*) pageList: [10, 25, 50,100]. // The number of lines per page (*) strictSearch: true, clickToSelect: true, // whether to enable the selected Row height: 460, // The Row height, if the height attribute is not set, the table automatically considers the table height uniqueId: "id" based on the number of records, // the unique identifier of each row, which is generally the primary key column cardView: false, // whether to display the detailed view detailView: false, // whether to display the Parent and Child table columns: [{field: 'id', title: 'sequence number '}, {field: 'liushuiid ', title: 'transaction number'}, {field: 'orderid', title: 'order number'}, {field: 'receivetime', title: 'transaction time'}, {field: 'price', title: 'ant'}, {field: 'coin _ credentials', title: 'coin invested '}, {field: 'bill _ credentials', title: 'Paper bank'}, {field: 'changes', title: 'change 0'}, {field: 'tradetype ', title: 'transaction type'}, {field: 'goodmachineid', title: 'Cargo No. '}, {field: 'inneridname', title: 'Cargo No.'}, {field: 'goodsname', title: 'item name'}, {field: 'changestatus', title: 'payby'}, {field: 'sendstatus', title: 'shipping '},]});}; // obtain the queried parameter oTableInit. queryParams = function (params) {var temp = {// The Name Of The key here and the variable name of the controller must be the same. Here, the controller needs to be changed to the same limit: params. limit, // page size offset: params. offset, // page sdate: $ ("# stratTime "). val (), edate: $ ("# 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 must correspond to the field returned by the server to display the data.

3. obtain data in the background

A. obtain data from servlet

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"); // obtain front-end data using this method...

B. obtain data using the corresponding methods in springMvc Controller

public JsonResult GetDepartment(int limit, int offset, string orderId, string SellerId，PortId，CardNumber，Success，maxrows，tradetype){ ...}

4. Paging (most problematic)

When paging is used, the data returned by the server must include rows and total. The Code is as follows:

...
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", T OolBox. getYMDHMS (tb. getReceivetime (); jo. put ("tradetype", clsConst. TRADE_TYPE_DES [tb. getTradetype ()]); jo. put ("changestatus", (tb. getChangestatus ()! = 0 )? "Successful": "failed"); jo. put ("sendstatus", (tb. getSendstatus ()! = 0 )? "Successful": "failed"); jo. put ("bill_credit", String. format ("% 1.2f", tb. getbill_trust ()/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); // JSONArrayjsonObject. put ("total", TotalCount); // total number of records out. print (jsonObject. toString ());
...

5. Page Content

The front-end obtains the paging data. The Code is as follows:

...
OTableInit. queryParams = function (params) {var temp = {// The Name Of The key here and the variable name of the controller must be the same. Here, the controller needs to be changed to the same limit: params. limit, // number of records offset: params. offset, // number of records displayed on a page sdate: $ ("# stratTime "). val (),}; return temp ;};
...

The code for the backend to obtain paging data is as follows:

...
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; // page
...

4. Others

Bootstrap3 is compatible with IE 8 browsers