bootstrap的table表格使用(分页查询、条件查询)
- 先要下载bootstap-table插件包
http://download.youkuaiyun.com/detail/zhangyabin86/9748534
- 将插件的jar包引入到工程中,并通过src导入到本地的项目里
<!--css样式-->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap/bootstrap-table.css" rel="stylesheet">
<!--js-->
<script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/bootstrap/bootstrap-table.js"></script>
<script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>
- 接下来就可以调用包中的bootstrapTable的方法
$('#tradeList').bootstrapTable({
url: '/VenderManager/TradeList', //请求后台的URL(*)
method: 'post', //请求方式(*)
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数(*)
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber:1, //初始化加载第一页,默认第一页
pageSize: 50, //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
strictSearch: true,
clickToSelect: true, //是否启用点击选中行
height: 460, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "id", //每一行的唯一标识,一般为主键列
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [{
field: 'id',
title: '序号'
}, {
field: 'liushuiid',
title: '交易编号'
}, {
field: 'orderid',
title: '订单号'
}, {
field: 'receivetime',
title: '交易时间'
}, {
field: 'price',
title: '金额'
}, {
field: 'coin_credit',
title: '投入硬币'
}, {
field: 'bill_credit',
title: '投入纸币'
}, {
field: 'changes',
title: '找零'
}, {
field: 'tradetype',
title: '交易类型'
},{
field: 'goodmachineid',
title: '货机号'
},{
field: 'inneridname',
title: '货道号'
},{
field: 'goodsName',
title: '商品名称'
}, {
field: 'changestatus',
title: '支付'
},{
field: 'sendstatus',
title: '出货'
},]
});
};
- 介绍几个重要的参数
url:这个参数是表格的数据源,请求的数据的url。与Action层里面的方法对应
queryParams: queryparams 请求过程中传递的参数
function queryParams(params) {
return {
pageSize: params.limit,
pageNumber:params.offset/params.limit +1,
};
}
pageSize:params.limit 传递的的页面大小
pageNumber:params.offset/params.limit+1 传递的是当前页
源码
- 在查询操作
<form id="searchForm" >
<div style="padding:3px; float:left">
动态编号 <input class="form-control" name="dno"
id="sd.dno" style="width:110px" /></div><div style="padding:3px; float:left">账号 <input class="form-control" name="userName"
id="sd.userInfo.userName" style="width:110px" /></div>
<div style="clear:both">
<div style="padding:3px;float:left">
昵称 <input class="easyui-textbox" name="name"
id="sd.userInfo.name" style="width:110px" /></div><div style="padding:3px;float:left">标题关键字 <input class="easyui-textbox" name="title"
id="sd.title" style="width:150px" /></div><div style="padding:3px;float:left">内容关键字 <input class="easyui-textbox" name="text"
id="sd.text" style="width:150px" />  <button type="button" method="post" class="btn btn-primary" name="button" id ='btnf' onclick =search()>查询</button> </div>
</form>
function search()
{
var opt = {
url: 'doDynamicsList',
silent: true,
query:{
'sd.dno':searchForm.dno.value,
'sd.userInfo.userName':searchForm.userName.value,
'sd.userInfo.name':searchForm.name.value,
'sd.title':searchForm.title.value,
'sd.text':searchForm.text.value
}
};
$("#table").bootstrapTable('destroy');
$('#test').bootstrapTable('refresh',opt);
}
响应查询按钮,将input内的值传入后台中
解释
- name用于表单提交加了name属性的标签元素才会提交到服务器
- id 一般用于css和js中引用
- 获取表单参数的两种方法如下
通过表单的name值获取
<html>
<head>
<script language="javascript">
function print(){
var a=myform.name.value;
alert(a);
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="name" id="nn" />
<input type="button" name="button" value="获取" onclick="print()" />
</form>
</body>
</html>
通过id获取
<html>
<head>
<script language="javascript">
function print(){
var a=document.getElementById("nn").value;
alert(a);
}
</script>
</head>
<body>
<form>
<input type="text" name="name" id="nn" />
<input type="button" name="button" value="获取" onclick="print()" />
</form>
</body>
</html>
- 最后通过重新加载table提交表单(需要先摧毁table)
$("#table").bootstrapTable('destroy');
$('#test').bootstrapTable('refresh',opt);
注意
进行查询时,如有中文参数传递,则需要改变Action层的ContentType否则会出现乱码
resp.setContentType("application/x-www-form-urlencoded; charset=UTF-8");