如何使用bootstrap-table实现一个美观而又功能强大的表格?
一、获取bootstrap-table
http://bootstrap-table.wenzhixin.net.cn/zh-cn/是一个国人开发的插件。
直接下载即可,这个插件同时依赖bootstrap和jquery,需要同时备齐这两个js。
二、在网页中引入js和css文件
1 2 3 4 5 6 7 8 |
<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-table.min.css"> <link rel="stylesheet" href="css/bootstrap-vertical-menu.css"> <script src="js/jquery-3.1.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-table.min.js"></script> <script src="js/bootstrap-table-zh-CN.min.js"></script> |
这些就差不多了,如果想更有逼格一点,可以不引入zh文件,换个别的什么语言文件,就能感受别国语言了。
三、如何使用?
使用js进行初始化(推荐),还有一种是直接在table标签处加上属性来初始化,我认为这种方式不好拓展功能,个人不推荐,还是使用js的方式靠谱。
(1)首先写出这样一个div
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id="box"> <table id="table"> <thead> <tr> <th data-field="id" data-sortable="true">id</th> <th data-field="level" data-sortable="true">level</th> <th data-field="logclass" data-sortable="true">logclass</th> <th data-field="location" data-sortable="true">location</th> <th data-field="message" data-sortable="true">message</th> <th data-field="username" data-sortable="true">username</th> <th data-field="ip" data-sortable="true">ip</th> <th data-field="param" data-sortable="true">param</th> <th data-field="result" data-sortable="true">result</th> <th data-field="time" data-sortable="true">time</th> </tr> </thead> </table> </div> |
就是一个简单的表格,其中有两个需要解释的属性:
1.data-field
bootstrap-table是key-value形式显示数据的,后端传到前端的json自己解析然后自动显示。
data-field中填写json中对应的key。
例如:json中的键值对是”id”:”xie”, data-field=”id”,那么表格中就会自动填充”xie”。
2.data-sortable
这个是bootstrap-table用来做排序的,如果设置了这个值,就可以在前端或者后端分页中对数据进行排序(前端分页不用往后端传值,后端分页需要传值,仅此而已)。如果不需要排序,就不用加上这个属性。
(2)写出这样的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 |
var table = $("table"); function showTable() { table .bootstrapTable({ search: true,//是否使用搜索 pagination: true,//是否使用分页,默认前端分页 showRefresh: true,//是否使用刷新按钮,默认没有 url: "../api/server/selectServerList",//后端数据来源地址 method: 'post',//后端请求方法 cache: false,//是否使用缓存 escape: true,//前端自动转义 showColumns: true,//换个显示方式 showToggle: true,//同上 sidePagination: 'server',//分页方式 queryParams: queryParams,//请求后端时的数据格式 pageSize: 10,//分页大小 toolbar: '#toolbar',//自定义工具类,可以融合在表格中 clickToSelect: true,//单击选择当前条目 showExport: true,//显示导出按钮 exportDataType: "basic"//导出类型 }); } $(function () { showTable(); }); function queryParams(params) { return { limit: params.limit,//每页数据条数 offset: params.offset,//当前页偏移 order: params.order,//排序 ordername: params.sort,//需要排序的字段 search: params.search//搜索的字段 }; } |
$(function () {showTable();});在页面加载时就调用showTable(),进行表格的生成。
这里是我常用的后端分页的情况,下面选些重要的解释:
- search:是否使用搜索,如果为true,就会多出一个搜索框。在前端分页的情况下,会在前端直接在对象中进行搜索。如果是后端分页,就会在请求后端数据时添加一个search参数,由后端进行搜索处理。
- url:从后端获取数据的地址。从哪里获取表格数据?就从这里了。
- method:请求后端的方法。前端分页可以用get,后端基本上只能用post了。
- escape:有没有经历过被xss的痛苦?这个属性支持特殊字符自动转义,再也不怕被x。
- sidePagination: 决定前后端分页,有server和client两个选项
- queryParams:请求后端时的参数,特别容易出错,需要注意。
- pageSize:分页大小,会自动根据数据量来决定,不用太在意。
四、后端实现
参考如下文章:
https://xie4ever.com/2016/10/15/spring-mvc-%e6%95%b4%e5%90%88page-helper/
特别需要注意,如果使用的是后端分页,需要传入类似这样的实体类:
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 |
package com.xie.pojo; public class pagePojo { private int limit = 10;// 每页限制数,默认为10 private int offset = 1;// 当前页偏移,默认为1 private String order;// 排序 private String ordername;// 排序列名称 private String search;// 搜索内容 public int getLimit() { return limit; } public void setLimit(int limit) { this.limit = limit; } public int getOffset() { return offset; } public void setOffset(int offset) { this.offset = offset; } public String getOrder() { return order; } public void setOrder(String order) { this.order = order; } public String getOrdername() { return ordername; } public void setOrdername(String ordername) { this.ordername = ordername; } public String getSearch() { return search; } public void setSearch(String search) { this.search = search; } @Override public String toString() { return "userPagePojo [limit=" + limit + ", offset=" + offset + ", order=" + order + ", ordername=" + ordername + ", search=" + search + "]"; } } |
这个实体类基本上是固定的,不需要怎么改动。
五、关于前后端分页的选择
这个其实是一开始就要确定好的。是否需要分页?是前端分页还是后端分页?(区别在于,前端分页很省事,在数据量不多的时候可以使用,但是如果多了,会造成性能问题。后端分页需要自己实现,比较复杂,但是效率和性能都很好,适用各种情况)
如果是前端分页,那就把sidePagination改成client或者根本就不加这个属性(默认就是前端分页),然后不需要传参数(不需要queryParam这个属性了)。只需要后端访问地址(只需要url属性)。后端直接给出一个所有数据的list,自动转化成json,前端帮你对应展示,就搞定了,确实很省事。
或者直接就使用table加属性的方式来生成表格,默认就是前端分页。
后端分页,就可以参考我写的那个例子了。把sidePagination改成server,给定传输数据的格式,然后后端进行分页处理,给出包含总页数,偏移量,数据…的json,只要做到对应,前端就会自动处理json数据并且展示。
六、实现效果
这个界面是加了特技。左上角的增删改操作不是自带的,其他的基本都是原生。
七、总结
感觉很好用哦,在很多使用表格进行数据展示的时候都可以使用!