Summary of how to use Bootstrap table

This article mainly summarizes the simple use methods of Bootstrap table for everyone, which has certain reference value. Interested friends can refer to it. I hope it can help everyone.

【Related video recommendation: Bootstrap tutorial】

bootstrap-table is written on the basis of bootstrap-table and is specially used for Table plugin for displaying data. Bootstrap comes from Twitter and is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, and JAVASCRIPT, and has the advantages of simplicity, flexibility, and rapid front-end development. I won’t describe bootstrap and bootstrapping here. This article will focus on explaining some of my understanding of using bootstrap-table in my project and how to learn it.

First explain the relationship between jquery, bootstrap and bootstrap-table. Many parts of the bootstrap code involve jquery, which means that bootstrap relies on jquery, and the bootstrap-table we want to use is created on the basis of bootstrap, so before using bootstrap-table, you must reference jquery and bootstrap. js, css files.

Next, the characteristics of bootstrap-table: Compared with jquery-ui, jqgrid and other table display plug-ins, bootstrap-table is flat and lightweight. It is more than enough for some lightweight data display. , and the support for parent-child tables, etc. is also very good. The most important thing is that it can be seamlessly combined with other bootstrap tags.

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 through the data-url attribute of the table. Source, the second is to specify the url when initializing the table through JavaScript to obtain the data

<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. Generally, the second method is used to process table data. filling.

$(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,  //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
 pagination: true,  //是否显示分页（*）
 sortable: false,  //是否启用排序
 sortOrder: "asc",  //排序方式
 queryParams: oTableInit.queryParams,//传递参数（*）
 sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
 pageNumber:1,  //初始化加载第一页，默认第一页
 pageSize: 50,  //每页的记录行数（*）
 pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
 strictSearch: true,
 clickToSelect: true, //是否启用点击选中行
 height: 460,  //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
 uniqueId: "id",  //每一行的唯一标识，一般为主键列
 cardView: false,  //是否显示详细视图
 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: '货机号'
 },{
  field: 'inneridname',
  title: '货道号'
 },{
  field: 'goodsName',
  title: '商品名称'
 }, {
  field: 'changestatus',
  title: '支付'
 },{
  field: 'sendstatus',
  title: '出货'
 },]
 });
 };
 
 //得到查询的参数
 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");//通过此方法获取前端数据
 ...

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)
{
 ...
}

Related recommendations:

How to implement mouse drag sorting of HTML table

JS realizes table table fixed header and the header scrolls with horizontal scrolling

bootstrap Table server-side processing paging example sharing

The above is the detailed content of Summary of how to use Bootstrap table. For more information, please follow other related articles on the PHP Chinese website!