今天分享一下bootstraptable的相關技能點，由于第一次接觸，所以剛開始碰了好多壁，于是趁現在過去不久，先總結總結。

Bootstraptable簡單的來說就是一個表格控件，但是這個表格可不是一般的表格，分頁、排序、查詢都自帶了，你就給他一個json數據就可以了。

接下來我們就看看怎么用：

1.先在頁面中引入所需的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.在我們所需要展示數據的表格上加個id，或者class都可以，在這里我以id為例。

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

3.接下來就是給表格里面加數據了，我們可以在加載當前頁面時利用ajax去請求控制器，查詢所需要的數據，然后放在一個集合中，轉換成json格式就可以了。

下面是js中相關代碼：

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

4.后臺查詢數據的代碼（以asp mvc為例）：

控制器是：HomeController

請求數據的方法：

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

下面是演示圖（數據隨便填的）：

對了，另外結合layui使用更好用哦，時候不早了，明天在說結合layui使用的方法。

往期內容推薦

layui如何實現添加數據時關閉頁面層，并實時刷新表格數據？

2020-06-01

你不知道ADO.Net中操作數據庫的步驟【超詳細整理】

2020-05-30

Photoshop中將圖片拖不進軟件的編輯區的解決方法，超詳細

2020-05-29

eclipse下載與安裝步驟詳解，包含解決錯誤（最全最詳細，多圖）

2020-05-28

Boostrap技能點整理之【按鈕樣式】

2020-05-27

Boostrap技能點整理之【網格系統】

2020-05-26

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。