今天分享一下bootstraptable的相關(guān)技能點(diǎn)，由于第一次接觸，所以剛開(kāi)始碰了好多壁，于是趁現(xiàn)在過(guò)去不久，先總結(jié)總結(jié)。

Bootstraptable簡(jiǎn)單的來(lái)說(shuō)就是一個(gè)表格控件，但是這個(gè)表格可不是一般的表格，分頁(yè)、排序、查詢都自帶了，你就給他一個(gè)json數(shù)據(jù)就可以了。

接下來(lái)我們就看看怎么用：

1.先在頁(yè)面中引入所需的js文件和css文件

<link?rel="stylesheet"?href="bootstrap.min.css"> <link?rel="stylesheet"?href="bootstrap-table.css"> <script?src="jquery.min.js"></script> <script?src="bootstrap.min.js"></script> <script?src="bootstrap-table.js"></script> <script?src="bootstrap-table-zh-CN.js"></script>

2.在我們所需要展示數(shù)據(jù)的表格上加個(gè)id，或者class都可以，在這里我以id為例。

<table id="table"></table>

3.接下來(lái)就是給表格里面加數(shù)據(jù)了，我們可以在加載當(dāng)前頁(yè)面時(shí)利用ajax去請(qǐng)求控制器，查詢所需要的數(shù)據(jù)，然后放在一個(gè)集合中，轉(zhuǎn)換成json格式就可以了。

下面是js中相關(guān)代碼：

$(function?() {caseTable();});//加載數(shù)據(jù) function?caseTable() {$('#table').bootstrapTable({method: "get", //提交方法striped: true, //是否顯示行間隔色cache:true, //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性singleSelect: false, //設(shè)置True 將禁止多選url: "/Home/GetAllAnJian",//查詢的地址dataType: "json", //服務(wù)器返回的數(shù)據(jù)類型pagination: true, //是否分頁(yè)pageSize: 5, //頁(yè)大小pageNumber: 1, //當(dāng)前頁(yè)search: false, //顯示搜索框contentType: "application/x-www-form-urlencoded", //發(fā)送到服務(wù)器的數(shù)據(jù)編碼類型queryParams:null, //參數(shù)// function (parms) {// return {// aid: $("#aid").val(),// };//},columns: [{title: "案件編號(hào)", //列標(biāo)題field: 'aid', //該列映射的data的參數(shù)名align: 'center', //水平對(duì)齊方式valign: 'middle', //垂直對(duì)齊方式sortable: true??????//是否排序},{title: '案件名稱',field: 'aname',align: 'center',valign: 'middle',sortable: true},{title: '案件類型',field: 'atypename',align: 'center',valign: 'middle',sortable: true},{field: '',title: '操作',halign: 'center',align: 'center',width: '50px', //寬度sortable: true, //下面是單獨(dú)加的按鈕formatter: function?(value,row,index) {var?e = '<button class="btn btn-primary" onclick="tijiao(\''?+ row.aid + '\')">提交</button>';return?e;},}]}); }

4.后臺(tái)查詢數(shù)據(jù)的代碼（以asp mvc為例）：

控制器是：HomeController

請(qǐng)求數(shù)據(jù)的方法：

//查詢所有的案件信息 public?JsonResult GetAllAnJian(string?aid) {List<AnJian> anAll = (from?a in?entity.AnJianwhere?a.astatename.Equals("新建")select?a).ToList(); //將日期類型轉(zhuǎn)換成string類型 for?(int?i = 0; i < anAll.Count; i++){anAll[i].adate_formate = anAll[i].adate.ToString();}return?Json(anAll, JsonRequestBehavior.AllowGet);}

下面是演示圖（數(shù)據(jù)隨便填的）：

對(duì)了，另外結(jié)合layui使用更好用哦，時(shí)候不早了，明天在說(shuō)結(jié)合layui使用的方法。

往期內(nèi)容推薦

layui如何實(shí)現(xiàn)添加數(shù)據(jù)時(shí)關(guān)閉頁(yè)面層，并實(shí)時(shí)刷新表格數(shù)據(jù)？

2020-06-01

你不知道ADO.Net中操作數(shù)據(jù)庫(kù)的步驟【超詳細(xì)整理】

2020-05-30

Photoshop中將圖片拖不進(jìn)軟件的編輯區(qū)的解決方法，超詳細(xì)

2020-05-29

eclipse下載與安裝步驟詳解，包含解決錯(cuò)誤（最全最詳細(xì)，多圖）

2020-05-28

Boostrap技能點(diǎn)整理之【按鈕樣式】

2020-05-27

Boostrap技能點(diǎn)整理之【網(wǎng)格系統(tǒng)】

2020-05-26

總結(jié)

以上是生活随笔為你收集整理的3分钟内看完这,bootstraptable表格控件,受益匪浅！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。