BootStrap数据表格实例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
$(function(){
  $('#archives-table').bootstrapTable({
   url: "/coinSend/list",//数据源
   dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows，分页时使用总记录数的键值为total
   search: true,//是否搜索
   cache: false,
   striped: true,
   pagination: true,//是否分页
   sortable: true,          //是否启用排序
   sortOrder: "asc",          //排序方式
   //pageNumber:1,
   pageSize: 10,//单页记录数
   pageList: [5, 10, 20, 50],//分页步进值
   sidePagination: "server",//服务端分页
   contentType: "application/json",//请求数据内容格式 默认是 application/json 自己根据格式自行服务端处理
   dataType: "json",//期待返回数据类型
   method: "post",//请求方式
   searchAlign: "left",//查询框对齐方式
   silent: true,
   queryParamsType: "limit",//查询参数组织方式
   queryParams: function getParams(params) {
     var param = {
      pageNum: params.pageNumber,
      pageSize: params.pageSize,
      realName : params.search
     };
     return param;
   },
   responseHandler: function(res) {
     return {
      "total": res.total,//总页数
      "rows": res.rows  //数据
     };
   },
   searchOnEnterKey: false,//回车搜索
   showRefresh: true,//刷新按钮
   showColumns: true,//列选择按钮
   buttonsAlign: "left",//按钮对齐方式
   toolbar: "#userToolbarsendCoin",//指定工具栏
   toolbarAlign: "right",//工具栏对齐方式
   columns: [
     /*{
      title: "全选",
      field: "select",
      checkbox: true,
      width: 20,//宽度
      align: "center",//水平
      valign: "middle"//垂直
     },*/
     {
      title: "ID",//标题
      field: "id",//键名
      sortable: true,//是否可排序
      order: "desc"//默认排序方式
     },
     {
      field: "userInfo.userName",
      title: "用户名",
      sortable: true,
      titleTooltip: "this is name"
     }/*,
     {
      field: "userInfo.id",
      title: "userInfo.id",
     }*/,
     {
      field: "userInfo.realName",
      title: "真实姓名",
      sortable: true,
     },
     {
      field: "userInfo.department",
      title: "所属部门",
      sortable: true,
     },{
      field: "coinName",
      title: "类型",
      sortable: true,
     },
     {
      field: "amount",
      title: "数量",
      sortable: true,
      sorter:numSort
     },
     {
      field: "validDateStart",
      title: "有效期起",
      sortable: true,
      //——修改——获取日期列的值进行转换
      formatter: function (value, row, index) {
        var time = new Date(value);
        var y = time.getFullYear();//年
        var m = time.getMonth() + 1;//月
        var d = time.getDate();//日
        return y+"-"+m+"-"+d
      }
     },
     {
      field: "validDateEnd",
      title: "有效期止",
      sortable: true,
      //——修改——获取日期列的值进行转换
      formatter: function (value, row, index) {
        var time = new Date(value);
        var y = time.getFullYear();//年
        var m = time.getMonth() + 1;//月
        var d = time.getDate();//日
        return y+"-"+m+"-"+d}
     }
     ,
     {
      field: "userInfo.id",
      title: "操作列",
      formatter:function(value, row, rowIndex){
        var userId =row.userInfo.id;
        var amount =row.amount;
        var validDateStart =row.validDateStart;
        var validDateEnd =row.validDateEnd;
        var realName =row.userInfo.realName;
        console.log(userId);
        console.log(realName);
        console.log(amount);console.log(validDateStart);console.log(validDateEnd);
        if(userId!=null){
         return'      '+'<a class="btn btn-info" href="javascript：void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="sendCoin(''+userId+'',''+realName+'',''+row.id+'');"> <i class="icon-edit icon-white"></i>分配</a>' +'      '/*+
            '<a class="btn btn-info" href="javascript：void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="editTw(''+userId+'',''+amount+'',''+realName+'',''+validDateEnd+'',''+row.id+'');"> <i class="icon-edit icon-white"></i>编辑</a>'*/;
        }else{
         return '<a class="btn btn-info" href="javascript：void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="sendCoin(''+userId+'');"> <i class="icon-edit icon-white"></i>分配</a>';
        }
     }
     }
   ],
   onClickRow: function(row, $element) {
     //$element是当前tr的jquery对象
     $element.css("background-color", "white");
     /*alert(row.id);
     id = row.id;*/
   },//单击row事件
   locale: "zh-CN",//中文支持,
   detailView: false, //是否显示详情折叠
   detailFormatter: function(index, row, element) {
   var html = '';
   $.each(row, function(key, val){
     html += "<p>" + key + ":" + val + "</p>"
   });
   return html;
  }
})
  /*$('#archives-table').bootstrapTable('hideColumn', 'userInfo.id');*/
  /*$("#searchBtn").click(function() {
   var realName = $("#realName").val();
   $.ajax({
     type: "post",
     url: "/coinSend/list",
     data: {param : param},
     dataType:"json",
     success : function(json) {
      $("#archives-table").bootstrapTable('load', json);//主要是要这种写法
     }
   });
  });*/
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="ibox float-e-margins">
  <div class="ibox-title">
   <h5>员工列表</h5>
   <div class="ibox-tools">
     <a class="collapse-link">
      <i class="fa fa-chevron-up"></i>
     </a>
   </div>
  </div>
  <div class="ibox-content">
   <div class="ibox float-e-margins">
     <table id="archives-table" class="table table-hover">
     </table>
   </div>
  </div>
</div>