创建bootstrap的表格(含日期控件)

引入准备文件

• bootstrap/css/bootstrap.min.css
• bootstrap-datetimepicker/css/bootstrap-datepicker.css
• jQuery/jquery-1.11.3.min.js
• bootstrap-datetimepicker/js/bootstrap-datepicker.min.js
• bootstrap-datetimepicker/locales/bootstrap-datepicker.zh-CN.min.js
• bootstrap/js/bootstrap.min.js
• bootstrap/snippet/bootloading.js
• bootstrap-table/bootstrap-table.min.js
• bootstrap-table/bootstrap-table-zh-CN.min.js

html代码

<div class="myconsult">
<form id="searchForm" class="form-inline clearfix" role="form">
<div class="form-group item">
<label for="name">  预约对象:label>
<input type="text" class="form-control" id="searchName" placeholder="请输入预约对象">
div>
<div class="form-group">
<label for="">  预约时间:label>
<div class="input-group input-medium date-picker input-daterange" data-date-format="yyyy-mm-dd">
<input id="startTime" name="startTime" class="form-control" style="font-size: 13px; width:140px;" type="text" value="" placeholder="开始时间">
<span class="input-group-addon">到span>
<input id="endTime" name="endTime" class="form-control" style="font-size: 13px; width:140px;" type="text" value="" placeholder="结束时间">
div>
div>
<div class="form-group">
<label for="">  状态label>
<select class="form-control" id="searchStatus">
<option value="">全部option>
<option value="0">预约成功option>
<option value="1">预约失败option>
select>
div>
<div class="form-group">
<button id="searchBtn" type="button" class="btn btn-primary">查询button>
div>
<div class="form-group">
<button id="resetBtn" type="button" class="btn btn-primary">重置button>
div>
form>
<div class="my_folk">
<table id="tb" border="0" cellspacing="0" cellpadding="0" class="table flok_table">
<thead>
<tr>
<th>序号th>
<th>预约对象th>
<th>预约时间th>
<th>预约地点th>
<th>预约内容th>
<th>状态th>
tr>
thead>
table>
div>
div>

js代码

//加载日期控件
var option = {
language : "zh-CN",
format : 'yyyy-mm-dd',
autoclose : true,// 选中之后自动隐藏日期选择框
clearBtn : true// 清除按钮
}
$('#startTime').datepicker(option);
$('#endTime').datepicker(option);
//加载表格,由于bootstrap的刷新也在这,所以先销毁一下表格在加载表示刷新
$("#tb").bootstrapTable('destroy');
var portalUserInfo=new Object();
if (window.sessionStorage) {
//从缓存获取用户信息
portalUserInfo =JSON.parse(window.sessionStorage.getItem('portalUser'));
}
var userid=portalUserInfo.userId;
var inputSearchName=document.getElementById('searchName');
var inputSearchStatus=document.getElementById('searchStatus');
var inputEndTime=document.getElementById('endTime');
var inputStartTime=document.getElementById('startTime');
var name="";
var status="";
var endTime="";
var startTime="";
if(inputSearchName==null||inputSearchName==""||inputSearchName==undefined){
name="";
}else{
name=document.getElementById('searchName').value;
}
if(inputSearchStatus==null||inputSearchStatus==""||inputSearchStatus==undefined){
status="";
}else{
status=document.getElementById('searchStatus').value;
}
if(inputEndTime==null||inputEndTime==""||inputEndTime==undefined){
endTime="";
}else{
endTime=document.getElementById('endTime').value;
}
if(inputStartTime==null||inputStartTime==""||inputStartTime==undefined){
startTime="";
}else{
startTime=document.getElementById('startTime').value;
}
//正式加载表格
$("#tb").bootstrapTable({
toggle: "tb",
url: "../../jhtx/getRemindOrders.do",
pagination: "true",
pageSize: 10,
pageList: [10,20],
showHeader :true,
striped :true,//是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
sidePagination: "server",//表示后台分页(分页方式：client客户端分页，server服务端分页（*）)
paginationPreText: "上一页",
paginationNextText: "下一页",
queryParamsType : "limit",
//参数
queryParams: function (params) {
return {
limit:params.limit,
offset:params.offset,
startTime:startTime,
endTime:endTime,
userid:userid,
name:name,
status:status
};
},
columns: [{
field: 'Number',
title: '序号',
width: '30',
align: 'center',
formatter: function (value, row, index) {
return index+1;
}
},{
field: 'name',
title: '预约对象',
width: '50',
align: 'center'
},{
field: 'serviceTime',
title: '预约时间',
width: '60',
align: 'center'
},{
field: 'orgName',
title: '预约地点',
width: '60',
align: 'center'
},{
field: 'serviceTypeName',
title: '预约内容',
width: '60',
align: 'center'
},{
field: 'orderStatus',
title: '状态',
width: '30',
align: 'center',
formatter:function(value, row, index){
var status = "未知状态";
if (value == "0") {
status="预约成功";
}else if(value=="1"){
status="预约失败";
}else{
status="未知状态";
}
return status;
}
}]
});

contorller代码

这里的重点就在它获取的参数limit,offset是已经计算好的,而不是想esayUI只获取到第几页(page),页的数据量(pageSize);
返回的数据倒是跟esayUI相同 :total–符合条件的总数据量,rows:本次查到的数据;

@RequestMapping ("/getRemindOrders")
@ResponseBody
public String getRemindOrders (HttpServletResponse response, HttpServletRequest request{
// 参数容器
Map <String, Object> paraMap = new HashMap <String, Object> ();
// 返回数据的容器
Map <String, Object> resultMap = new HashMap <String, Object> ();
UserFamily userFamily = new UserFamily ();
RemindOrder remindOrder = new RemindOrder ();
Long userid = 0L;
// 获得用户id
String useridStr = request.getParameter ("userid");
if (!StringUtils.isBlank (useridStr))
{
userid = Long.parseLong (useridStr);
}
// 模拟数据,在获取分页参数失败的情况下代替
int limit = 10;
int offset = 0;
try
{
if (!StringUtils.isBlank (request.getParameter ("offset")))
{
// 开始
offset = Integer.parseInt (request.getParameter ("offset")) + 1;
}
if (!StringUtils.isBlank (request.getParameter ("limit")))
{
// 结束
limit = offset + Integer.parseInt (request.getParameter ("limit")) - 1;
}
String name = request.getParameter ("name");
String status = request.getParameter ("status");
// 搜索开始时间
String start = request.getParameter ("startTime");
// 搜索结束时间
String end = request.getParameter ("endTime");
// 查询我的家人
if (StringUtils.isNotEmpty (useridStr))
{
userFamily.setUserId (userid);
// 查询认证过的家属相关信息
userFamily.setIsRealAuth ("1");
}
UserDto user = (UserDto) request.getSession ().getAttribute (LoginConstants.LOGIN_USER);
String identification = user.getPortalUserInfo ().getIdentification ();
// 获取家人的相关信息
List <UserFamily> userFamilyList = userFamilyService.queryUserFimalyByPage (userFamily, 0, -1);
// 添加自己
userFamily.setIdentification (identification);
userFamilyList.add (userFamily);
// 设置查询参数
remindOrder.setName (name != null ? name : "");
remindOrder.setOrderStatus (status != null ? status : "");
remindOrder.setStartTime (start != null ? start : "");
remindOrder.setEndTime (end != null ? end : "");
paraMap.put ("startNumber", offset);
paraMap.put ("endNumber", limit);
paraMap.put ("allFamily", userFamilyList);
paraMap.put ("remindOrder", remindOrder);
List <RemindOrder> list = null;
int count = 0;
count = remindOrderService.findRemindCountOfFamily (paraMap);
if (count != 0)
{
list = remindOrderService.findRemindByConditionOfFamilyWithPage (paraMap);
}
resultMap.put ("rows", list);
resultMap.put ("total", count);
}
catch (Exception e)
{
_logger.error ("查询数据失败!", e);
resultMap.put ("rows", null);
resultMap.put ("total", 0);
}
JsonConfig config = new JsonConfig ();
config.registerJsonValueProcessor (Date.class, new JsonDateValueProcessor ("yyyy-MM-dd HH:mm:ss"));
return JSONObject.fromObject (resultMap, config).toString ();
}

效果图

这里说一下:如果数据根本不需要第二页时,这里的分页器是不显示的.