Bootstrap-table 表头筛选控件,根据Bootstrap-table API,在表头添加筛选排序,支持文本搜索,数值搜索,日期搜索,单选和复选。
依赖js jQuery,Bootstrap,Bootstrap-table,select2
筛选类型说明
1. 文本类型(text)
提供模糊搜索功能,根据输入的参数模糊匹配返回对应的结果
2. 数值类型(num)
提供区间搜索功能,所搜列必须为数值,可以搜索最小值和最大值之间的结果,也可以搜索所有大于最小值或小于最大值的结果。
3. 日期类型(date)
提供区间搜索日期功能,使用方法同数值类型。
4. 单选(radio)
如图所示,根据所选项筛选出对应的结果。
5. 复选(checkbox)
与单选功能相同,但可以搜索多个选项。
参数说明
表格参数 | 默认值 | 说明 |
---|---|---|
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"] |
服务端分页传参说明
1.客户端分页
sidePagination设为"client"时为客户端分页,只要把相应的数据以JSON格式传到前端即可,由前端JS来实现排序,搜索功能。
2.服务端分页
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"]
}]
github链接:https://github.com/Westsyan/bootstrap-advanced-sortable