Bootstrap-table 表头筛选控件
利用Bootstrap-table特性,在表头添加筛选排序,支持文本搜索,数值搜索,日期搜索,单选和复选。
依赖包 | 版本 |
---|---|
jQuery | v3.2.1 |
Bootstrap | v4.5.3 |
Bootstrap-table | v1.11.1 |
select2 | v4.0.3 |
提供区间搜索功能,所搜列必须为数值,可以搜索最小值和最大值之间的结果,也可以搜索所有大于最小值或小于最大值的结果。
表格参数 | 默认值 | 说明 |
---|---|---|
data-advanced-sortable | false | 默认false。设为true开启控件功能 |
列参数 | 默认值 | 说明 |
---|---|---|
data-sortable | false | 默认false。设为true开启排序功能,bootstrap-advanced-sortable.js控件开启后会覆盖bootstrap-table默认的筛选功能 |
data-search-type | - | 可选参数,设置开启搜索功能。可选值:text,num,date,radio,checkbox。 |
data-search-select | - | 传值参数,只有当搜索类型设为radio和checkbox时才生效,要求输入数组类型。样例:data-search-select=["选项1","选项2","选项3"] |
sidePagination设为"client"时为客户端分页,只要把相应的数据以JSON格式传到前端即可,由前端JS来实现排序,搜索功能。
sidePagination设为"server"时为服务端分页,这时需要与服务端交互才能实现排序,搜索功能。
当选择服务器分页时,客户端会向服务端传输五个参数:
- limit : Int类型,页面展示数据条数;
- offest : Int类型,当前页起始行数;
- order : String类型,排序方式,asc:顺序,desc逆序;
- search : Option[String]类型,默认为空值。进行搜索时,会传输JSON字符串回服务端,样例:
{"id":{"field":"id","searchType":"text","data":"100"},"name":{"field":"name","searchType":"text","data":"200"}}
有四个参数,服务端解析这个json字符串获取相应的结果,然后截取offest - offest+limit 之间的数据传输的客户端进行展示; - sort : Option[String]类型,以sort列进行排序,默认为空值。 示例代码(Scala):
case class PageData(limit: Int, offset: Int, order: String, search: Option[String], sort: Option[String])
val pageForm: Form[PageData] = Form(
mapping(
"limit" -> number,
"offset" -> number,
"order" -> text,
"search" -> optional(text),
"sort" -> optional(text)
)(PageData.apply)(PageData.unapply)
)
def dealMapDataByPage(page: PageData) = {
val searchX = page.search match {
case None => 获取初始数据代码
case Some(y) => 筛选数据代码
}
val sortX = page.sort match {
case None => searchX
case Some(y) => 以列进行排序
}
val orderX = page.order match {
case "asc" => sortX
case "desc" => sortX.reverse
}
//返回值
orderX
}
前端JS代码:
$('#table').bootstrapTable({
method: 'post',
url: "/getData",
sidePagination: "server",
contentType: "application/x-www-form-urlencoded",
columns:[{
field:"testText",
title:"TestText",
sortable:"true",
searchType:"text"
},{
field:"testRadio",
title:"TestRadio",
sortable:"true",
searchType:"radio",
searchSelect:["test1","test2","test3"]
}]
});