1. Introduction of Bootstrap Table

Regarding the introduction of Bootstrap Table, there are generally two methods:

1. Directly download the source code 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, we Just install it directly.

The version of Bootstrap Table is actually 0.4, which is too cheating. Therefore, the blogger suggests that the Bootstrap Table package should be downloaded directly from the source code. The latest version of Bootstrap Table seems to be 1.9.0.

Introduction to the background of this article:

Recently, customers have put forward demands and want to optimize the original management system so that it can be displayed well through mobile phones. Two solutions come to mind:

a Plan: Keep the original page and design a new page suitable for mobile phones. When accessed by mobile phone, enter m.zhy.com (mobile page). When accessed by PC device, enter www.zhy.com (pc page). )

b plan: Use bootstrap framework to replace the original page and automatically adapt to mobile phones, tablets, and PC devices

Using plan a, you need to design an interface and rewrite the appropriate page Interface, considering time and cost issues, the project adopted plan b

2. Effect display

2. Brief introduction to BootStrap table

bootStrap table is a lightweight table plug-in that uses AJAX to obtain data in JSON format. Its paging and data filling are very convenient and supports internationalization.

3. How to use

1. Introducing js and css

<!--css樣式-->
<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-zh-CN.js"></script>

2. Table data filling

bootStrap table has two ways to obtain data. One is to specify the data source through the data-url attribute of the table; the other is Specify the url to obtain the data when initializing the table through JavaScript

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

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

The second method is more flexible than the first method when processing complex data. The second method is generally used to fill the table data.

$(function () {
  
 //1.初始化Table
 var oTable = new TableInit();
 oTable.Init();
  
 //2.初始化Button的點擊事件
 /* var oButtonInit = new ButtonInit();
 oButtonInit.Init(); */
  
 });
  
  
 var TableInit = function () {
 var oTableInit = new Object();
 //初始化Table
 oTableInit.Init = function () {
  $('#tradeList').bootstrapTable({
  url: '/VenderManager/TradeList',  //請求后臺的URL（*）
  method: 'post',   //請求方式（*）
  toolbar: '#toolbar',  //工具按鈕用哪個容器
  striped: true,   //是否顯示行間隔色
  cache: false,   //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個屬性（*）
  pagination: true,   //是否顯示分頁（*）
  sortable: false,   //是否啟用排序
  sortOrder: "asc",   //排序方式
  queryParams: oTableInit.queryParams,//傳遞參數(shù)（*）
  sidePagination: "server",  //分頁方式：client客戶端分頁，server服務(wù)端分頁（*）
  pageNumber:1,   //初始化加載第一頁，默認(rèn)第一頁
  pageSize: 50,   //每頁的記錄行數(shù)（*）
  pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(shù)（*）
  strictSearch: true,
  clickToSelect: true,  //是否啟用點擊選中行
  height: 460,   //行高，如果沒有設(shè)置height屬性，表格自動根據(jù)記錄條數(shù)覺得表格高度
  uniqueId: "id",   //每一行的唯一標(biāo)識，一般為主鍵列
  cardView: false,   //是否顯示詳細(xì)視圖
  detailView: false,   //是否顯示父子表
  columns: [{
   field: 'id',
   title: '序號'
  }, {
   field: 'liushuiid',
   title: '交易編號'
  }, {
   field: 'orderid',
   title: '訂單號'
  }, {
   field: 'receivetime',
   title: '交易時間'
  }, {
   field: 'price',
   title: '金額'
  }, {
   field: 'coin_credit',
   title: '投入硬幣'
  }, {
   field: 'bill_credit',
   title: '投入紙幣'
  }, {
   field: 'changes',
   title: '找零'
  }, {
   field: 'tradetype',
   title: '交易類型'
  },{
   field: 'goodmachineid',
   title: '貨機(jī)號'
  },{
   field: 'inneridname',
   title: '貨道號'
  },{
   field: 'goodsName',
   title: '商品名稱'
  }, {
   field: 'changestatus',
   title: '支付'
  },{
   field: 'sendstatus',
   title: '出貨'
  },]
  });
 };
  
 //得到查詢的參數(shù)
 oTableInit.queryParams = function (params) {
  var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
  limit: params.limit, //頁面大小
  offset: params.offset, //頁碼
  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 field must correspond to the field returned by the server to display the data.

3. Obtaining data from the background

a. Obtaining 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");//通過此方法獲取前端數(shù)據(jù)
 ...

b. Obtaining data through the corresponding method in springMvc Controller

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

4. Paging ( The most encountered problems)

When using paging, the data returned by the server 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)?"成功":"失敗");
  jo.put("sendstatus", (tb.getSendstatus()!=0)?"成功":"失敗");
  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);//總記錄數(shù)
 out.print(jsonObject.toString()); <br>...

5. Introduction to the content of the paging interface

Front-end acquisition Paging data, the code is as follows:

...<br>oTableInit.queryParams = function (params) {
  var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
  limit: params.limit, //第幾條記錄
  offset: params.offset, //顯示一頁多少記錄
  sdate: $("#stratTime").val(),
  
  };
  return temp;
 };<br>...

The backend gets the paging 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;//第幾頁<br>...

The above is the entire content of this article, I hope it can Help everyone better learn the JS table component artifact bootstrap table.

For more detailed explanations of the JS table component artifact bootstrap table (enhanced version), please pay attention to the PHP Chinese website!