Bootstrap table使用方法汇总

　　bootstrap-table是在bootstrap-table的基础上写出来的，专门用于显示数据的表格插件。而bootstrap是来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，具有简便灵活，快速前端开发的优势。对与bootstrap在此就不在叙述。本文将着重讲解自己在项目中使用到bootstrap-table的一些理解和如何学习它。

推荐教程：Bootstrap入门教程

　　首先交代一下，jquery ，bootstrap ，bootstrap-table 三者之间的关系。bootstrap很多部分代码涉及到了jquery的，也就是说 bootstrap是依赖jquery的，而我们要使用的bootstrap-table则是在bootstrap基础上创造出来的，所以在使用bootstrap-table之前必须引用 jquery 和bootstrap的相关js，css文件。

　　接着说，bootstrap-table的特点:与jquery-ui，jqgrid等表格显示插件而言，bootstrap-table扁平化，轻量级,对于一些轻量级的数据显示，他是绰绰有余，而对父子表等的支持也很好，最主要的是可以与bootstrap的其他标签无缝组合。

1、引入js、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数据填充

　　bootStrap table获取数据有两种方式，一是通过table 的data-url属性指定数据源，二是通过JavaScript初始化表格时指定url来获取数据

<table data-toggle="table">  <thead>  ...  </thead> </table>  ... $('#table').bootstrapTable({  url: 'data.json'  });

　　第二种方式较第一种而言在处理复杂数据时更为灵活，一般使用第二种方式来进行table数据填充。

$(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;  };

field字段必须与服务器端返回的字段对应才会显示出数据。

3、后台获取数据

a、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、springMvc Controller里面对应的方法获取数据

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

以上就是本文的全部内容，希望对大家的学习有所帮助。

以上就是Bootstrap table使用方法汇总的详细内容，更多内容请关注技术你好其它相关文章！