创建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")@ResponseBodypublic 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 ();    }

效果图

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