今天试用bootstrap-table做自定义搜索实现:
html实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap案例</title>
<link rel="stylesheet" type="text/css" href="/xjzhgdyun/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/xjzhgdyun/bootstraptable/bootstrap-table.css" />
<link rel="stylesheet" type="text/css" href="../css/test.css" />
<script type="text/javascript" src="/xjzhgdyun/js/jquery.min.js"></script>
<script type="text/javascript" src="/xjzhgdyun/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="/xjzhgdyun/bootstraptable/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/xjzhgdyun/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="../js/test.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h4>全国施工企业列表</h4>
</div>
</div>
<div class="row">
<h3>js获取数据</h3>
<div class="col-md-12">
<table id="table">
</table>
</div>
</div> <!-- js获取数据结束 -->
<div class="row">
<h3>html获取数据</h3>
<div class="col-md-12">
<table id="table1"
data-toggle="table"
data-url="/xjzhgdyun/get_demo_table_list.call"
data-method="post"
data-content-type="application/x-www-form-urlencoded; charset=UTF-8"
data-pagination="true"
data-show-columns="true"
data-show-refresh="true"
data-show-fullscreen="true"
data-side-pagination="server"
data-page-number="1"
data-page-size="10"
data-sort-name="name"
data-sort-order="desc"
data-page-list="[10, 20,30,all ]"
data-query-params="queryParams1"
data-query-params-type="undefind"
data-toolbar="#tb1"
>
<thead>
<tr>
<th data-field="name" data-align="center">Item ID</th>
<th data-field="telephone" data-align="center">Item Name</th>
<th data-field="password" data-align="center">Item Price</th>
<th data-field="toolbar" data-width="120px" data-align="center">状态</th>
</tr>
</thead>
</table>
</div><!-- html 获取数据结束 -->
</div>
<div class="row">
<div class="col-md-12" id="tb">
<form class="form-inline" id="resource-form">
<div class="form-group form-inner">
<label for="user_name" class="form-lable">姓名:</label>
<input type="text" class="form-control form-input" id="username" name="user_name" placeholder="姓名">
</div>
<div class="form-group form-inner">
<label for="telephone" class="form-lable">手机号:</label>
<input type="text" class="form-control form-input" id="telephone" name="telephone" placeholder="手机号">
</div>
<div class="form-group form-inner">
<label for="password" class="form-lable">密码:</label>
<input type="text" class="form-control form-input" id="password" name="password" placeholder="密码">
</div>
<a class="btn btn-info glyphicon glyphicon-search form-search" onclick="searchfun()" >搜索</a>
<a class="btn btn-info glyphicon glyphicon-plus form-search" onclick="clearfun()" >清除</a>
<a class="btn btn-info glyphicon glyphicon-plus form-search" data-toggle="modal" data-target="#myModal">添加</a>
</form>
</div>
<div class="row">
<div class="col-md-12" id="tb1">
<form class="form-inline" id="resource-form">
<div class="form-group form-inner">
<label for="user_name" class="form-lable">姓名:</label>
<input type="text" class="form-control form-input" id="username1" name="user_name" placeholder="姓名">
</div>
<div class="form-group form-inner">
<label for="telephone" class="form-lable">手机号:</label>
<input type="text" class="form-control form-input" id="telephone1" name="telephone" placeholder="手机号">
</div>
<div class="form-group form-inner">
<label for="password" class="form-lable">密码:</label>
<input type="text" class="form-control form-input" id="password1" name="password" placeholder="密码">
</div>
<a class="btn btn-info glyphicon glyphicon-search form-search" onclick="searchfun1()" >搜索</a>
<a class="btn btn-info glyphicon glyphicon-plus form-search" data-toggle="modal" data-target="#myModal">添加</a>
</form>
</div>
</div>
</div>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>
</div>
<div class="modal-body">在这里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</body>
</html>
js实现:
$(function(){
$('#table').bootstrapTable({
url:'/xjzhgdyun/get_demo_table_list.call',
method:'post',
dataType:'json',
contentType:"application/x-www-form-urlencoded; charset=UTF-8",
showRefresh:true,
showColumns:true,
showFullscreen:true,
pagination:true,
pageNumber:1,
pageSize:10,
pageList:[10,20,30],
data_local: "zh-US",//表格汉化
cache:false,//禁用 AJAX 数据缓存。
search:false,//启用搜框
toolbar: '#tb',//指定工具栏
sidePagination: "server", //服务端处理分页 server 前端分页client
striped: true,//设置为 true 会有隔行变色效果
queryParamsType:'undefind',
queryParams: queryParams,
sortClass:"name",
sortName:"name",
idField: "name",
columns:[{
title:'姓名',
field:'name',
align:'center'
},{
title:'联系方式',
field:'telephone',
align:'center',
sortable:true
},{
title:'密码',
field:'password',
align:'center'
},{
title:'操作',
field:'toolbar',
width:120,
align:'center'
},]
});
});
//得到查询的参数
function remove(id){
alert(id);
}
function edit(id){
alert(id);
}
//获取参数
function queryParams(params) {
alert($("#username").val());
if($("#username").val()!=null||""!=$("#username").val()){
this.pageNumber=1;
}
var pars = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
offset:this.offset,
pageSize: this.pageSize, //页面大小
pageNumber: this.pageNumber, //页码
sortName:this.sortName,
sortOrder:this.sortOrder,
searchText:this.searchText,
name: $("#username").val(),
telephone: $("#telephone").val(),
password: $("#password").val(),
};
return pars;
}
function searchfun() {
$("#table").bootstrapTable('refresh');
}
function clearfun(){
$("#username").val("");
$("#telephone").val("");
$("#password").val("");
searchfun();
}
function queryParams1(params) {
var pars = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
pageSize: params.pageSize, //页面大小
pageNumber: params.pageNumber, //页码
sortName:params.sortName,
sortOrder:params.sortOrder,
searchText:params.searchText,
name: $("#username1").val(),
telephone: $("#telephone1").val(),
password: $("#password1").val(),
};
return pars;
}
function searchfun1() {
$("#table1").bootstrapTable('refresh');
}
这里介绍配置参数:
写自定义函数:
function queryParams(params) {
alert($("#username").val());
if($("#username").val()!=null||""!=$("#username").val()){
this.pageNumber=1;
}
var pars = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
offset:this.offset,
pageSize: this.pageSize, //页面大小
pageNumber: this.pageNumber, //页码
sortName:this.sortName,
sortOrder:this.sortOrder,
searchText:this.searchText,
name: $("#username").val(),
telephone: $("#telephone").val(),
password: $("#password").val(),
};
return pars;
}
官方文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
搜索结果:
controller:
@Controller
public class TestController extends BaseController {
@Autowired
private TestService testService;
@RequestMapping("/get_demo_table_list.call")
public void get_roles_list(int pageSize,int pageNumber,String sortName,String sortOrder,String name,String telephone,String password,
HttpServletResponse response) throws IOException
{
testService.get_demo_table_list(pageSize,pageNumber,sortName,sortOrder,name,telephone,password);
response.getWriter().write(testService.getReturnObject().toString());
}
}
public void get_demo_table_list(int pageSize,int pageNumber,String sortName,String sortOrder,String name,String telephone,String password) {
String sql="SELECT id, user_name,telephone,`password`,role_number from `user` where 1=1 ";
if(null != name && !"".equals(name)){
sql += " AND user_name like '%"+name+"%' ";
}
if(null != telephone && !"".equals(telephone)){
sql += " AND telephone = '"+telephone+"' ";
}
if(null != password && !"".equals(password)){
sql += " AND password = '"+password+"' ";
}
int count=userDao.findCountByMySql(sql);
List<User> list = userDao.findListByMySql(sql, pageNumber, pageSize);
JSONObject jo=new JSONObject();
JSONArray ja=new JSONArray();
JSONObject jr=new JSONObject();
for(User u : list){
jo.put("name",u.getUser_name());
jo.put("telephone", u.getTelephone());
jo.put("password", u.getPassword());
String toolbar="<a class=\"btn btn-xs btn-warning glyphicon glyphicon-trash toolbar-del\" onclick=\"remove('"+u.getId()+"')\" >删除</a>"+
"<a class=\"btn btn-xs btn-success glyphicon glyphicon-pencil toolbar-edit\" onclick=\"edit('"+u.getId()+"')\" >编辑</a>";
jo.put("toolbar",toolbar);
ja.add(jo);
}
jr.put("total", count);
jr.put("rows", ja);
super.setReturnObject(jr);
}
这个我给大家演示我遇到的坑:
我们把这里改为button:
这里添加监控刷新事件:
contraller改变:
点击搜索按钮,看到
我们看到页面竟然触发了刷新页面:
后台也接收到数据,我们放开断点:
我们发现问题竟然发了两次请求刷新页面在搜索请求之后,所有在数据渲染时,搜索的数据被覆盖了
查阅资料才发现:
bootstrap:button放在form里不指定type会刷新页面:
现在我们加上类型:
页面不刷新了
有刷新页面了
总结:button在在form里type省略会刷新页面,type=submit时会刷新页面,type=button|reset不会刷新页面,
这里个人建议如果使用ajax提交数据我们可以使用a标签做button
或者把form改为div
感谢支持