jsp页面,主要就是在option里面加个queryParams属性,这个属性是用于给后台传数据的,不写的时候默认传四个,自己可以外加俩,模糊查询input框的值,然后给点击模糊查询的时候加一个单击事件用来刷新这个table列表展现模糊查询出来的数据.
<%--
Created by IntelliJ IDEA.
User: liulx
Date: 2018/9/3
Time: 9:04
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" >
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/table/bootstrap-table.min.css">
<title>展示用户信息!</title>
</head>
<body>
<div class="container">
<br>
<input type="text" style="width: 300px" class="form-control" placeholder="查询公司名称" id="firstStep">
<input type="text" style="width: 300px;margin-top: -35px;margin-left: 400px" placeholder="查询手机" class="form-control" id="secondStep">
<button class="btn btn-primary" style="margin-top: -55px;margin-left: 800px" onclick="searchTable()">查询</button>
<br>
<table id="table"></table>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="${pageContext.request.contextPath}/static/common/jquery-3.2.1.js" ></script>
<script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
<script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/table/bootstrap-table.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/assets/layer/layer.js" type="text/javascript"></script>
<script type="text/javascript">
var option = { // 对应table标签的id
url: "<%=request.getContextPath()%>/witkeyUser/findAllUserManagerMsg", // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
striped: true, //表格显示条纹，默认为false
pagination: true, // 在表格底部显示分页组件，默认false
pageList: [5,10,15, 20], // 设置页面可以显示的数据条数
pageSize: 5, // 页面数据条数
pageNumber: 1, // 首页页码
sidePagination: 'server', // 设置为服务器端分页server client前台分页
sortName: 'id', // 要排序的字段
sortOrder: 'asc', // 排序规则 desc
queryParams:function(param){
return {
offset: param.offset, //这四个是默认传输的值
limit: param.limit,
sort: param.sort,
order:param.order,
corporateName:$("#firstStep").val(), //这两个是上面模糊查询input的值
iphone:$("#secondStep").val()
}
},
columns: [
{
checkbox: true, // 显示一个勾选框
align: 'center' // 居中显示
}, {
field: 'id', // 返回json数据中的name
title: '编号' // 表格表头显示文字
}, {
field: 'completeName',
title: '企业名称'
}, {
field: 'iphone',
title: '手机号'
}, {
title: "邮箱",
field:'qq'
}, {
title: "审核状态",
field:'auditStatus',
formatter:function (value,row,index) {
if(Number(value)&&Number(value)==1){
return "已审核";
}else{
return "待审核";
}
}
}, {
title: "操作",
field: 'auditStatus',
formatter: function (value, row, index) {
var str = "";
if (Number(value) && Number(value) == 1) {
str += "<button class='btn btn-primary' onclick=\"toCheckPage(\'" + row.id + "\')\">查看</button> ";
} else {
str += "<button class='btn btn-primary' onclick=\"toAuditPage(\'" + row.id + "\')\">审核</button> ";
}
str += "<button class='btn btn-primary'>编辑</button> ";
str += "<button class='btn btn-primary' onclick=\"deleteUser(\'" + row.id + "\')\">删除</button> ";
return str;
}
}
],
onLoadSuccess: function(){ //加载成功时执行
console.info("加载成功");
},
onLoadError: function(){ //加载失败时执行
console.info("加载数据失败");
}
}
function searchTable() {
$("#table").bootstrapTable("refresh"); //这个是点击查询按钮刷新页面
//$("#table").bootstrapTable("refresh",{query:{offset:0}});
}
$(function () {
$("#table").bootstrapTable(option);
})
</script>
</body>
</html>
controller
//分页查询所有公司用户信息
@RequestMapping("/findAllUserManagerMsg")
@ResponseBody
public BootStrapResult findAllUserManagerMsg(BootTableParam param,String corporateName,String iphone){
try {
corporateName = new String(corporateName.getBytes("iso-8859-1"),"utf-8"); //这是防乱码
iphone = new String(iphone.getBytes("iso-8859-1"),"utf-8");
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
BootStrapResult result = witkeyUserService.findAllUserManagerMsg(param,corporateName,iphone);
return result;
}
service
@Override
public BootStrapResult findAllUserManagerMsg(BootTableParam param, String corporateName, String iphone) {
PageHelper.offsetPage(param.getOffset(),param.getLimit());
List<UserManagerMsg> allUserManagerMsg = witkeyUserMapper.findAllUserManagerMsg(param,corporateName,iphone);
PageInfo<UserManagerMsg> info = new PageInfo<>(allUserManagerMsg);
BootStrapResult result = new BootStrapResult();
result.setTotal(info.getTotal());
result.setRows(info.getList());
return result;
}
mapper
<select id="findAllUserManagerMsg" resultType="com.bgs.pojo.UserManagerMsg">
select w1.id id,w2.corporate_name completeName,w1.iphone iphone,w1.qq qq,w2.audit_status auditStatus
from witkey_user w1,witkey_user_complete w2
where w1.id=w2.id
<if test="corporateName!=null and corporateName!=''">
and w2.corporate_name like '%${corporateName}%'
</if>
<if test="iphone!=null and iphone!=''">
and w1.iphone like '%${iphone}%'
</if>
<if test="param.sort!=null and param.sort!='' and param.order!=null and param.order!=''">
order by ${param.sort} ${param.order}
</if>
</select>
接收参数的实体类
package com.bgs.pojo;
public class BootTableParam {
private String sort;//排序的字段名 id
private String order;//排序的方式:desc|asc
private Integer offset;//偏移量，从第几条数据开始显示:0
private Integer limit;//一页显示的条数:5
public String getSort() {
return sort;
}
public void setSort(String sort) {
this.sort = sort;
}
public String getOrder() {
return order;
}
public void setOrder(String order) {
this.order = order;
}
public Integer getOffset() {
return offset;
}
public void setOffset(Integer offset) {
this.offset = offset;
}
public Integer getLimit() {
return limit;
}
public void setLimit(Integer limit) {
this.limit = limit;
}
}
返回参数的实体类
package com.bgs.pojo;
import java.util.List;
public class BootStrapResult<T> {
private Long total;//一共有多少条数据
private List<T> rows; //查询结果
public Long getTotal() {
return total;
}
public void setTotal(Long total) {
this.total = total;
}
public List<T> getRows() {
return rows;
}
public void setRows(List<T> rows) {
this.rows = rows;
}
}