Bootstrap中table使用方法有哪些

这篇文章主要为大家展示了“Bootstrap中table使用方法有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Bootstrap中table使用方法有哪些”这篇文章吧。

　　bootstrap-table是在bootstrap-table的基础上写出来的，专门用于显示数据的表格插件。而bootstrap是来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，具有简便灵活，快速前端开发的优势。对与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使用方法有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！