Bootstrap中table使用方法有哪些

這篇文章主要為大家展示了“Bootstrap中table使用方法有哪些”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Bootstrap中table使用方法有哪些”這篇文章吧。

　　bootstrap-table是在bootstrap-table的基礎(chǔ)上寫(xiě)出來(lái)的，專(zhuān)門(mén)用于顯示數(shù)據(jù)的表格插件。而bootstrap是來(lái)自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，具有簡(jiǎn)便靈活，快速前端開(kāi)發(fā)的優(yōu)勢(shì)。對(duì)與bootstrap在此就不在敘述。

　　首先交代一下，jquery ，bootstrap ，bootstrap-table 三者之間的關(guān)系。bootstrap很多部分代碼涉及到了jquery的，也就是說(shuō) bootstrap是依賴(lài)jquery的，而我們要使用的bootstrap-table則是在bootstrap基礎(chǔ)上創(chuàng)造出來(lái)的，所以在使用bootstrap-table之前必須引用 jquery 和bootstrap的相關(guān)js，css文件。

　　接著說(shuō)，bootstrap-table的特點(diǎn):與jquery-ui，jqgrid等表格顯示插件而言，bootstrap-table扁平化，輕量級(jí),對(duì)于一些輕量級(jí)的數(shù)據(jù)顯示，他是綽綽有余，而對(duì)父子表等的支持也很好，最主要的是可以與bootstrap的其他標(biāo)簽無(wú)縫組合。

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數(shù)據(jù)填充

　　bootStrap table獲取數(shù)據(jù)有兩種方式，一是通過(guò)table 的data-url屬性指定數(shù)據(jù)源，二是通過(guò)JavaScript初始化表格時(shí)指定url來(lái)獲取數(shù)據(jù)

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

　　第二種方式較第一種而言在處理復(fù)雜數(shù)據(jù)時(shí)更為靈活，一般使用第二種方式來(lái)進(jìn)行table數(shù)據(jù)填充。

$(function () {  //1.初始化Table var oTable = new TableInit(); oTable.Init();  //2.初始化Button的點(diǎn)擊事件 /* var oButtonInit = new ButtonInit(); oButtonInit.Init(); */  });   var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#tradeList').bootstrapTable({ url: '/VenderManager/TradeList', //請(qǐng)求后臺(tái)的URL（*） method: 'post',  //請(qǐng)求方式（*） toolbar: '#toolbar', //工具按鈕用哪個(gè)容器 striped: true,  //是否顯示行間隔色 cache: false,  //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*） pagination: true,  //是否顯示分頁(yè)（*） sortable: false,  //是否啟用排序 sortOrder: "asc",  //排序方式 queryParams: oTableInit.queryParams,//傳遞參數(shù)（*） sidePagination: "server", //分頁(yè)方式：client客戶(hù)端分頁(yè)，server服務(wù)端分頁(yè)（*） pageNumber:1,  //初始化加載第一頁(yè)，默認(rèn)第一頁(yè) pageSize: 50,  //每頁(yè)的記錄行數(shù)（*） pageList: [10, 25, 50, 100], //可供選擇的每頁(yè)的行數(shù)（*） strictSearch: true, clickToSelect: true, //是否啟用點(diǎn)擊選中行 height: 460,  //行高，如果沒(méi)有設(shè)置height屬性，表格自動(dòng)根據(jù)記錄條數(shù)覺(jué)得表格高度 uniqueId: "id",  //每一行的唯一標(biāo)識(shí)，一般為主鍵列 cardView: false,  //是否顯示詳細(xì)視圖 detailView: false,  //是否顯示父子表 columns: [{  field: 'id',  title: '序號(hào)' }, {  field: 'liushuiid',  title: '交易編號(hào)' }, {  field: 'orderid',  title: '訂單號(hào)' }, {  field: 'receivetime',  title: '交易時(shí)間' }, {  field: 'price',  title: '金額' }, {  field: 'coin_credit',  title: '投入硬幣' }, {  field: 'bill_credit',  title: '投入紙幣' }, {  field: 'changes',  title: '找零' }, {  field: 'tradetype',  title: '交易類(lèi)型' },{  field: 'goodmachineid',  title: '貨機(jī)號(hào)' },{  field: 'inneridname',  title: '貨道號(hào)' },{  field: 'goodsName',  title: '商品名稱(chēng)' }, {  field: 'changestatus',  title: '支付' },{  field: 'sendstatus',  title: '出貨' },] }); };  //得到查詢(xún)的參數(shù) oTableInit.queryParams = function (params) { var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動(dòng)，控制器也需要改成一樣的 limit: params.limit, //頁(yè)面大小 offset: params.offset, //頁(yè)碼 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字段必須與服務(wù)器端返回的字段對(duì)應(yīng)才會(huì)顯示出數(shù)據(jù)。

3、后臺(tái)獲取數(shù)據(jù)

a、servlet獲取數(shù)據(jù)

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");//通過(guò)此方法獲取前端數(shù)據(jù)

b、springMvc Controller里面對(duì)應(yīng)的方法獲取數(shù)據(jù)

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

以上是“Bootstrap中table使用方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！