創建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 ();
}效果圖
這裏說一下:如果數據根本不需要第二頁時,這裏的分頁器是不顯示的.
