bootstrap-table的简单使用

先上效果图：

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

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

第二步：在页面上放一个table标签。

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

第三步：在加载或者搜索事件中处理js代码

         var loginname = $('#txt_loginname').val();
         var realname = $('#txt_realname').val();

         show_loading_bar(50);
         startup();
         $.ajax({
             url: "@Url.Action("QueryUserList", "System")",
             method: 'GET',
             dataType: 'json',
             cache: false,
             async: false,
             data: {
                 username: loginname,
                 realname: realname
             },
             success: function (resp) {
                 show_loading_bar(100);
                 shutdown();
                 if (resp.Status == 1) {
                     var data = [];
                     if (resp.Data.length > 0) {
                         data = resp.Data;
                     }
                     $('#reportTable').bootstrapTable('destroy');    //先销毁才可再次初始化
                     $('#reportTable').bootstrapTable({
                         method: 'get',
                         clickToSelect: true,
                         pagination: true,  //是否分页
                         //showPaginationSwitch: true, //显示分页切换按钮
                         pageList: [10, 25, 50, 100],
                         pageSize: 10,
                         pageNumber: 1,
                         uniqueId: 'dl_uhid', //将index列设为唯一索引
                         striped: true,
                         //search: true,  //显示检索框
                         columns: [
                             {
                                 field: "dl_uhid", title: "用户ID", align: "center"
                             },
                             { field: "dl_username", title: "用户账户", align: "center", sortable: true },
                             {
                                 field: "dl_name", title: "用户姓名", align: "center", sortable: true
                             },
                             {
                                 field: "dl_degree", title: "职位", align: "center"
                             },
                             { field: "dl_duty", title: "职称", align: "center", sortable: true },
                             { field: "dl_department", title: "科室", align: "center", sortable: true },
                             {
                                 field: "", title: "操作", align: "center", formatter: function (value, row, rowIndex) {
                                     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>';
                                     return strHtml;
                                 }
                             }
                         ],
                         data: data
                     });
                     $('#reportTable').bootstrapTable('hideColumn', 'dl_uhid');
                 }
                 else {
                     toastr.error(resp.Message);

                 }
             }
         });

至此，bootstrap-table的简单使用就完成了，初来乍到，简单总结了一下，分享给请大家，写的不好请多多见谅，转载请注明出处，谢谢！！