bootstrap table 基本使用

前言

bootstrap tabel是基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。

主要功能

  1. 支持 Bootstrap 3 和 Bootstrap 2
  2. 自适应界面
  3. 固定表头
  4. 非常丰富的配置参数
  5. 直接通过标签使用
  6. 显示/隐藏列
  7. 显示/隐藏表头
  8. 通过 AJAX 获取 JSON 格式的数据
  9. 支持排序
  10. 格式化表格
  11. 支持单选或者多选
  12. 强大的分页功能
  13. 支持卡片视图
  14. 支持多语言
  15. 支持插件

相关文档
官方网站

示例(后台分页,动态获取数据)

html部分

      
1
2
      
<table id="example-table" class="table table-striped mb-none"> </table>

js部分

      
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
      
$traineesTable.bootstrapTable( 'destroy');
$traineesTable.bootstrapTable({
url: '/users/***',
method: 'GET',
dataType: 'json',
striped: true,
pagination: true,
sidePagination: "server",
/**
* 这是一个大坑!
* 设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
* 设置为limit可以获取limit, offset, search, sort, order
* */
queryParamsType: "undefined",
queryParams: function (params) {
return {
currentPage: params.pageNumber, //页码
pageSize: params.pageSize, //页面大小
realName: 'abc' // 自定义参数
};
},
//这里我查看源码的,在ajax请求成功后,发放数据之前可以对返回的数据进行处理,返回什么部分的数据,比如我的就需要进行整改的!
responseHandler: function (res) {
return {
total: res.data.total,
rows: res.data.traineeList
};
},
columns: [{
field: 'id',
title: '序号',
visible: false
}, {
field: 'loginName',
title: '账号'
}, {
field: 'realName',
title: '姓名'
}, {
title: '操作',
field: 'realName',
align: 'center',
formatter: function (value, row, index) {
// value: 默认的值
// row: 行对象
// index: 行序号,从0开始
return '这里是返回字符串';
}
}],
onLoadSuccess: function () {
// 当表格实例化成功后调用的函数
}
})

原文:大专栏  bootstrap table 基本使用


猜你喜欢

转载自www.cnblogs.com/wangziqiang123/p/11657662.html