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

创建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">&nbsp;&nbsp;预约对象:</label> 
                <input type="text" class="form-control" id="searchName" placeholder="请输入预约对象">
            </div>
            <div class="form-group">
                <label for="">&nbsp;&nbsp;预约时间:</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="">&nbsp;&nbsp;状态</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 ();
    }

效果图

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