BootStrap table使用方法分析

本文实例为大家分享了BootStrap table的使用方法，供大家参考，具体内容如下
bootstrap table git address：https://github.com/wenzhixin/bootstrap-table
引入文件

<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/><link rel="stylesheet" href="../bower_components/bootstrap-table-develop/dist/bootstrap-table.min.css"/> <script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script><script type="text/javascript" src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="../bower_components/bootstrap-table-develop/dist/bootstrap-table.js"></script><script type="text/javascript" src="../bower_components/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>

使用方式

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

<table id="table" class="mychar1-table"></table>$（"#table"）.bootstrapTable（{ url: "data.json"}）;

第二种更好理解点：

var $table = $（"#mychart1"）;$table.bootstrapTable（{url: reqprojectname_w+"list/spectrumlist", dataType: "json",toolbar: "#toolbar",//工具按钮用哪个容器striped: true,//是否显示行间隔色singleSelect: false,pagination: true, //分页pageNumber:1,//初始化加载第一页，默认第一页pageSize: 10,//每页的记录行数（*）pageList: [10, 25, 50, 100],//可供选择的每页的行数（*）search: false, //显示搜索框sidePagination: "server", //服务端处理分页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: "出货"},{ title: "操作", field: "id", align: "center", formatter:function（value,row,index）{ var e = "<a href="#" mce_href="#" onclick="edit（""+ row.id + ""）">编辑</a> "; var d = "<a href="#" mce_href="#" onclick="del（""+ row.id +""）">删除</a> ";return e+d; } } ] }）;

详细介绍

$（function （） { //1.初始化Tablevar oTable = new TableInit（）;oTable.Init（）; //2.初始化Button的点击事件/* var oButtonInit = new ButtonInit（）;oButtonInit.Init（）; */}）; var TableInit = function （） {var oTableInit = new Object（）;//初始化TableoTableInit.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; };

请求参数

oTableInit.queryParams = function （params） { var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的limit: params.limit, //第几条记录offset: params.offset, //显示一页多少记录sdate: $（"#stratTime"）.val（）,}; return temp;};

后台拼装测试数据

JSONArray jsonData=new JSONArray（）;JSONObject jo=null;for （int i=0,len=10;i<len;i++）{ jo=new JSONObject（）; jo.put（"id", i+（j++））; jo.put（"liushuiid", i+1）; jo.put（"price", 100）; jo.put（"mobilephone",10）; jo.put（"receivetime", 10）; jo.put（"tradetype", 10）; jo.put（"changestatus", "成功"）; jo.put（"sendstatus", "失败"）; jo.put（"bill_credit", 10）; jo.put（"goodroadid", 10）; jo.put（"SmsContent", 10）; jo.put（"orderid", 10）; jo.put（"goodsName", 10）; jo.put（"inneridname", 10）; jo.put（"xmlstr", 10）; jsonData.add（jo）;}int TotalCount=97;JSONObject jsonObject=new JSONObject（）;jsonObject.put（"rows", jsonData）;//JSONArrayjsonObject.put（"total",TotalCount）;//总记录数

分页接收

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>...

分页时BootStrap table 向后端传递两个分页字段：limit， offset ,前者表示每页的个数，默认为10个，后者表示分页时数据的偏移量。

而搜索时则向后端传递的是search字段，表示具体的搜索内容。

服务器端返回的数据中还要包括page（页数），total（数据总量）两个字段，前端要根据这两个字段分页。

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程Bootstrap实战教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。