bootstrap-table的簡單使用

先上效果圖：

 

 

 第一步：引用bootstrap-table的樣式和js。

1 @Styles.Render("~/assets/css/bootstrap.css")
2 @Styles.Render("~/Content/bootstrap-table.min.css")
3 @Scripts.Render("~/assets/js/jquery-1.11.1.min.js")
4 @Scripts.Render("~/Scripts/bootstrap-table.min.js")
5 @Scripts.Render("~/Scripts/bootstrap-table-zh-CN.min.js")

 

第二步：在頁面上放一個table標籤。

1  <div class="row">
2        <table class="table table-striped table-hover table-small-font" id="reportTable"></table>
3 </div>

 

第三步：在加載或者搜索事件中處理js代碼

 1         var loginname = $('#txt_loginname').val();
 2         var realname = $('#txt_realname').val();
 3 
 4         show_loading_bar(50);
 5         startup();
 6         $.ajax({
 7             url: "@Url.Action("QueryUserList", "System")",
 8             method: 'GET',
 9             dataType: 'json',
10             cache: false,
11             async: false,
12             data: {
13                 username: loginname,
14                 realname: realname
15             },
16             success: function (resp) {
17                 show_loading_bar(100);
18                 shutdown();
19                 if (resp.Status == 1) {
20                     var data = [];
21                     if (resp.Data.length > 0) {
22                         data = resp.Data;
23                     }
24                     $('#reportTable').bootstrapTable('destroy');    //先銷燬纔可再次初始化
25                     $('#reportTable').bootstrapTable({
26                         method: 'get',
27                         clickToSelect: true,
28                         pagination: true,  //是否分頁
29                         //showPaginationSwitch: true, //顯示分頁切換按鈕
30                         pageList: [10, 25, 50, 100],
31                         pageSize: 10,
32                         pageNumber: 1,
33                         uniqueId: 'dl_uhid', //將index列設爲惟一索引
34                         striped: true,
35                         //search: true,  //顯示檢索框
36                         columns: [
37                             {
38                                 field: "dl_uhid", title: "用戶ID", align: "center"
39                             },
40                             { field: "dl_username", title: "用戶帳戶", align: "center", sortable: true },
41                             {
42                                 field: "dl_name", title: "用戶姓名", align: "center", sortable: true
43                             },
44                             {
45                                 field: "dl_degree", title: "職位", align: "center"
46                             },
47                             { field: "dl_duty", title: "職稱", align: "center", sortable: true },
48                             { field: "dl_department", title: "科室", align: "center", sortable: true },
49                             {
50                                 field: "", title: "操做", align: "center", formatter: function (value, row, rowIndex) {
51                                     var strHtml = '<a class="btn-pink" href="javascript:void(0);" onclick="ShowDetail(\'' + row["dl_uhid"] + '\');"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn-red" href="javascript:void(0);" onclick="Delete(\'' + row["dl_uhid"] + '\');"><i class="fa fa-trash" aria-hidden="true"></i></a>';
52                                     return strHtml;
53                                 }
54                             }
55                         ],
56                         data: data
57                     });
58                     $('#reportTable').bootstrapTable('hideColumn', 'dl_uhid');
59                 }
60                 else {
61                     toastr.error(resp.Message);
62 
63                 }
64             }
65         });

至此，bootstrap-table的簡單使用就完成了，初來乍到，簡單總結了一下，分享給請你們，寫的很差請多多見諒，轉載請註明出處，謝謝！！