我們在業務開發中，可以使用許多功能強大的插件來滿足需求表格記錄的查詢、分頁、排序等功能，下面錯新技術頻道小編給大家詳解bootstrap table表格的使用方法。
1.進入頁面，根據指定的URL加載數據(json格式)
2.加載成功，根據$table.bootstrapTable({options})顯示表格樣式。
感覺還是挺漂亮的哈，OK，下面貼代碼解釋功能。?
開始之前，當然要引用js啦
<link href="~/Content/bootstrap.min.css" rel="stylesheet" /><link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" /><link href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" /><script src="~/Scripts/jquery-1.9.1.js"></script><script src="~/Scripts/bootstrap.min.js"></script><script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script>
?html代碼，一是指定table要使用的工具欄，而是寫一個空的table
<div class="row"> <div class="col-md-12"> <div class="btn-group" id="toobar" role="group" aria-label="..."> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus"></span>新增 </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-edit"></span>修改 </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-remove"></span>刪除 </button> </div> <table id="myTable"></table> </div> </div>
js代碼，使用("#table").bootstraptable({options})填充table
$("#myTable").bootstrapTable({ url: '/BootstrapTable/GetTestData', method: 'get', toolbar: '#toobar',//工具列 striped: true,//隔行換色 cache: false,//禁用緩存 pagination: true,//啟動分頁 sidePagination: 'client',//分頁方式 pageNumber: 1,//初始化table時顯示的頁碼 pageSize: 10,//每頁條目 showFooter: false,//是否顯示列腳 showPaginationSwitch: true,//是否顯示 數據條數選擇框 sortable: false,//排序 search: true,//啟用搜索 showColumns: true,//是否顯示 內容列下拉框 showRefresh: true,//顯示刷新按鈕 idField: 'SystemCode',//key值欄位 clickToSelect: true,//點擊選中checkbox singleSelect: true,//啟用單行選中 columns: [{ checkbox: true }, { field: 'SystemCode', title: '系統代碼', titleTooltip: 'young for you' }, { field: 'SystemDesc', title: '系統名稱' }, { field: 'Isvalid', title: '是否有效' }, { field: 'UUser', title: '更新人' }, { field: 'UDate', title: '更新時間' }], onClickCell: function (field, value, row, $element) { //alert(row.SystemDesc); } });其中URL是table 數據源地址，如果table啟動了分頁功能，后臺取數據的方法要加上limit、offset兩個int類型的參數，這里把后臺代碼也貼一下。
public JsonResult GetTestData(int limit, int offset) { BugzillaModelContainer db = new BugzillaModelContainer(); List<B_SystemInfo> systemInfo = db.B_SystemInfo.ToList(); for (int i = 0; i < 20; i++) { B_SystemInfo tempSystem = new B_SystemInfo(); tempSystem.SystemCode = (i + 1).ToString(); tempSystem.SystemDesc = "測試系統" + (i + 1).ToString(); tempSystem.Isvalid = "Y"; tempSystem.UUser = "result_for" + (i + 1).ToString(); tempSystem.UDate = System.DateTime.Now.ToShortDateString(); systemInfo.Add(tempSystem); } var total = systemInfo.Count(); var rows = systemInfo.Skip(offset).Take(limit).ToList(); return Json(systemInfo, JsonRequestBehavior.AllowGet); }offset表示從多少條數據開始取，limit表示取多少條數據。
客戶端搜索只要設置search=true即可。?
服務端搜索，需要設置參數。
首先設置
("#table").bootstraptable({queryParams: oTableInit.queryParams}),//傳遞參數（*）
然后獲取查詢的參數
//得到查詢的參數 oTableInit.queryParams = function (params) { var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的 limit: params.limit, //頁面大小 offset: params.offset, //頁碼 systemcode: $("#systemcode").val(), }; return temp;};通過button事件刷新table，重新獲取數據源，即可。
$("#btnQuery").click(function () { $table.bootstrapTable('refresh'); });最后貼上全部html代碼~
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/Content/bootstrap.min.css" rel="external nofollow" rel="stylesheet" /> <link href="~/Content/bootstrap-theme.min.css" rel="external nofollow" rel="stylesheet" /> <link href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="external nofollow" rel="stylesheet" /> <script src="~/Scripts/jquery-1.9.1.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script></head><body> <div class="container"> <div class="row"> <div class="col-md-8"> </div> </div> <div class="row"> <div class="col-md-12"> <div class="btn-group" id="toobar" role="group" aria-label="..."> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus"></span>新增 </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-edit"></span>修改 </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-remove"></span>刪除 </button> </div> <table id="myTable"></table> </div> </div> </div> <script> $(function () { var itable = TableInit(); itable.Init(); }); var TableInit = function () { var myTableInit = new Object(); myTableInit.Init = function () { $("#myTable").bootstrapTable({ url: '/BootstrapTable/GetTestData', method: 'get', toolbar: '#toobar',//工具列 striped: true,//隔行換色 cache: false,//禁用緩存 pagination: true,//啟動分頁 sidePagination: 'client',//分頁方式 pageNumber: 1,//初始化table時顯示的頁碼 pageSize: 10,//每頁條目 showFooter: false,//是否顯示列腳 showPaginationSwitch: true,//是否顯示 數據條數選擇框 sortable: false,//排序 search: true,//啟用搜索 showColumns: true,//是否顯示 內容列下拉框 showRefresh: true,//顯示刷新按鈕 idField: 'SystemCode',//key值欄位 clickToSelect: true,//點擊選中checkbox singleSelect: true,//啟用單行選中 columns: [{ checkbox: true }, { field: 'SystemCode', title: '系統代碼', titleTooltip: 'young for you' }, { field: 'SystemDesc', title: '系統名稱' }, { field: 'Isvalid', title: '是否有效' }, { field: 'UUser', title: '更新人' }, { field: 'UDate', title: '更新時間' }], onClickCell: function (field, value, row, $element) { //alert(row.SystemDesc); } }); }; return myTableInit; }; </script></body></html>以上就是錯新技術頻道小編給大家介紹的詳解bootstrap table表格的使用方法，這個操作方法是非常簡單的，只要掌握好技巧就能學會了。
新聞熱點
疑難解答
圖片精選
