bootstrap-table是在bootstrap-table的基础上写出来的，专门用于显示数据的表格插件。而bootstrap是来自 twitter，是目前最受欢迎的前端框架。bootstrap 是基于 html、css、javascript 的，具有简便灵活，快速前端开发的优势。对与bootstrap在此就不在叙述。本文将着重讲解自己在项目中使用到bootstrap-table的一些理解和如何学习它。
首先交代一下，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) { ... }
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js 实现毫秒+天+时+分秒转换
bootstrap有哪些轮播模板可以使用
以上就是在bootstrap里怎么操作table的详细内容。