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

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

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

先在頁面中引入所需的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>

在我們所需要展示數據的表格上價格id，或者class都可以，在這里我以id為例。

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

接下來就是給表格里面加數據了，我們可以在加載當前頁面時利用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" οnclick="tijiao(\'' + row.aid + '\')">提交</button>';return e;},}]}); }

后臺查詢數據的代碼（以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使用的方法。

總結

以上是生活随笔為你收集整理的利用bootstraptable展示数据，对数据进行排序分页等操作的全部內容，希望文章能夠幫你解決所遇到的問題。

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