bootstrap分页

前端：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/static/vehicle/common/taglib.jsp"%>
<%-- <%@ include file="/static/bootstrap/bootstrapCommon.jsp"%> --%>
      <button type="button" class="btn btn-primary waves-effect waves-light m-b-5" style="height:35px" id="openModel">用车申请</button>
      <button type="button" class="btn btn-primary waves-effect waves-light m-b-5" style="height:35px" id="reApply">再次用车</button>
      <button type="button" class="btn btn-primary waves-effect waves-light m-b-5" style="height:35px" id="print">打印派车单</button>
      <button type="button" class="btn btn-primary waves-effect waves-light m-b-5" style="height:35px" id="export">数据导出</button>
      <table id="table" style="height:100px"></table>
      
      <!--申请表单模态框开始 -->
        <div class="modal fade bs-example-modal-lg" id="applyModel" tabindex="-1" data-backdrop="static" aria-labelledby="myLargeModalLabel" style="display: none">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myLargeModalLabel">用车申请表</h4>
                    </div>
                    <div class="modal-body">
                    <form id="applyForm" >
                     <div class="row"> 
                           <div class="col-md-6"> 
                               <div class="form-group"> 
                                       <input type="hidden" id="id" name="id" value="${id}" />
                                    <input type="hidden" id="vehicleId" name="vehicleId" value="${vehicleId}" />
                                    <input type="hidden" id="driverId" name="driverId" value="${driverId}" />
                                    <input type="hidden" id="yongcherenId" name="yongcherenId" value="${yongcherenId}" />
                                    <input type="hidden" id="processSerialNumber" name="processSerialNumber" value="${processSerialNumber}" />
                                   <label class="control-label">用车人</label> 
                                   <input type="text" class="form-control" id="yongcheren" name="yongcheren" value="${yongcheren}"> 
                               </div> 
                           </div> 
                           <div class="col-md-6"> 
                               <div class="form-group"> 
                                   <label class="control-label">预计历程</label> 
                                   <input type="text" class="form-control" id="course" placeholder="公里数" name="course" value="${course}"> 
                               </div> 
                           </div> 
                       </div> 
                       <div class="row"> 
                           <div class="col-md-6"> 
                               <div class="form-group"> 
                                   <label class="control-label">开始时间</label> 
                                   <%-- <input type="text" class="form-control" value="${startTime}" id="startTime1" name="startTime1"> --%> 
                                   <input type="text" readonly class="form-control" value="${startTime}" id="startTime" name="startTime">
                               </div> 
                           </div> 
                           <div class="col-md-6"> 
                               <div class="form-group"> 
                                   <label class="control-label">结束时间</label> 
                                   <input type="text" readonly class="form-control" value="${endTime}" id="endTime" name="endTime">
                               </div> 
                           </div> 
                       </div> 
                       <div class="row"> 
                           <div class="col-md-4"> 
                               <div class="form-group"> 
                                   <label class="control-label">车牌号</label> 
                                   <select class="form-control" id="licenseNumber" name="licenseNumber" value="${licenseNumber}" οnchange="selectOnchang(this)">
                                     <option>---请选择---</option>  
                                   </select>
                               </div>
                           </div>
                           <div class="col-md-4"> 
                               <div class="form-group"> 
                                   <label class="control-label">司机</label> 
                                   <select class="form-control" id="driver" name="driver" value="${driver}" οnchange="selectOnchang1(this)">
                                       <option>---请选择---</option>
                                   </select> 
                               </div> 
                           </div> 
                           <div class="col-md-4"> 
                               <div class="form-group"> 
                                   <label class="control-label">司机手机</label> 
                                   <input type="text" class="form-control" id="phone" name="phone" value="${phone}"> 
                               </div> 
                           </div>                          
                       </div>  
                       <div class="row"> 
                           <div class="col-md-4"> 
                               <div class="form-group"> 
                                   <label class="control-label">始发地</label> 
                                   <input type="text" class="form-control" id="shifadi" name="shifadi" value="${shifadi}"> 
                               </div> 
                           </div> 
                           <div class="col-md-4"> 
                               <div class="form-group"> 
                                   <label class="control-label">目的地</label> 
                                   <input type="text" class="form-control" id="mudidi" name="mudidi" value="${mudidi}"> 
                               </div> 
                           </div> 
                           <div class="col-md-4">
                               <div class="form-group"> 
                                   <label class="control-label">用车性质</label> 
                                   <select class="form-control" data-live-search="true" id="models" name="models" οnchange="">
                                     <option value="公用" ${"公用" eq carInfo.models ? "selected":"" }>公用</option>
                                     <option value="私用" ${"私用" eq carInfo.models ? "selected":"" }>私用</option>
                                   </select>
                               </div> 
                           </div>
                       </div>
                       <div class="row"> 
                           <div class="col-md-12"> 
                               <div class="form-group"> 
                                   <label class="control-label">行车路线</label> 
                                   <input type="text" class="form-control" id="root" name="root" value="${root}"> 
                               </div> 
                           </div> 
                       </div>
                       <div class="row"> 
                           <div class="col-md-12"> 
                               <div class="form-group no-margin"> 
                                   <label class="control-label">事由</label> 
                                   <textarea class="form-control autogrow" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 104px" id="reason" name="reason" value="${reason}">                                                        </textarea> 
                               </div> 
                           </div> 
                       </div> 
                       </form>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default waves-effect" data-dismiss="modal" style="height:35px">关闭</button>
                      <button type="button" class="btn btn-primary waves-effect waves-light" style="height:35px" id="apply">发送申请</button>
                    </div>
                </div>
            </div>
        </div>
      <!-- 申请表单模态框结束 -->
     
<style>
    .table th, .table td {
    text-align: center;
    vertical-align: middle!important;
    }
</style>
<script>

var isAdmin = "${isAdmin}"
var sendId = "${sendId}"
$(document).ready(function(){
    $('#table').bootstrapTable({
        url:'${ctx}/applyVehicle/vehicleList?sendId='+sendId,
        method: 'POST',//请求方式（*）
        contentType : "application/x-www-form-urlencoded",
        dataType: "json",
        striped: true,//设置为 true 会有隔行变色效果
        //得到查询的参数
        queryParams : function (params) {
            //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            console.log(params);
            var temp = {
                    sendId : sendId,
                    page : params.offset, //页码
                    rows : params.limit, //页面大小
            };
            return temp;
        }, 
        undefinedText: "空",//当数据为 undefined 时显示的字符   
        pagination: true, //分页 
        uniqueId: "id",
        paginationLoop:true,//设置为 true 启用分页条无限循环的功能。           
        pageNumber: 1,//如果设置了分页，首页页码        // 
        pageSize: 10,//如果设置了分页，页面数据条数        
        pageList: [10, 20, 30, 40],    //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。        
        paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<        
        paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>        // singleSelect: false,//设置True 将禁止多选         
        search: false, //显示搜索框        
        data_local: "zh-US",//表格汉化        
        sidePagination: "server", //服务端处理分页
        columns: [{
            field: 'id',
            title: 'id',
            visible: false
        }, {
            field: 'taskId',
            title: 'taskId',
            visible:false
        }, {
            field: 'licenseNumber',
            title: '使用车辆'
        }, {
            field: 'startTime',
            title: '用车时间'
        }, {
            field: 'driver',
            title: '驾驶员'
        }, {
            field: 'models',
            title: '用车性质'
        }, {
            field: 'applyAtatue',
            title: '状态',
            formatter: function(value, row, index) {
                if ("1" == row.applyAtatue){
                     return '<font color="green">已派车</font>';
                    } else if("2" == row.applyAtatue){
                        return '<font color="red">拒绝派车</font>';
                    }else if("3" == row.applyAtatue){
                        return '<font color="blue">等待派车</font>';
                    }else if("4" == row.applyAtatue){
                        return '<font color="blue">用车结束</font>';
                    }
            },
            
        }, {
            field: 'applyTime',
            title: '申请时间'
        }, {
            field: 'operation',
            title: '操作'
        },],
        onLoadSuccess: function () {
        },
        onLoadError: function () {
            showTips("数据加载失败！");
        },
        onDblClickRow: function (row, $element) {
            var id = row.ID;
            EditViewById(id, 'view');
        },
    });
    
      //加载车辆下拉选
      getLicenseNumber();
      //加载驾驶员
      getDriver();
});

//加载司机和手机
function selectOnchang(obj){  
     //获取被选中的option标签选项 
     var vehicleId = $('#licenseNumber').find("option:selected").attr('value');
     //$("#driver").find("option:not(:first)").remove();
     $.ajax({
        url: ctx+'/carManager/findOne',
        type: "get",
        dataType: "json",
        data: {vehicleId:vehicleId},
        success: function (data) {
            console.log(data);
            if(true == data.success){
                $("#vehicleId").val(data.carInfo.id);
                $("#driverId").val(data.carInfo.driverId);
                $("#phone").val(data.carInfo.phone);
                //$('#driver').find("option:selected").html("<option value=" + data.carInfo.driverId +">" + data.carInfo.driver + "</option>");
                $("#driver option[value='"+data.carInfo.driverId+"']").attr("selected", true);
            }else{
                alert(data.msg);
            }
        },
        error: function (data) {
            alert("查询失败" + data);
        }
    })
    }

//加载车辆信息和手机
function selectOnchang1(){
    //获取被选中的option标签选项 
     var driverId = $('#driver').find("option:selected").attr('value');
     //$("#driver").find("option:not(:first)").remove();
     $.ajax({
       url: ctx+'/driver/findOne',
       type: "get",
       dataType: "json",
       data: {driverId:driverId},
       success: function (data) {
           console.log(data);
           if(true == data.success){
               $("#vehicleId").val(data.driverInfo.id);
               $("#driverId").val(data.driverInfo.driverId);
               $("#phone").val(data.driverInfo.phone);
               //$('#licenseNumber').find("option:selected").html("<option value=" + data.driverInfo.vehicleId +">" + data.driverInfo.vehicle + "</option>");
               $("#licenseNumber option[value='"+data.driverInfo.vehicleId+"']").attr("selected", true);
           }else{
               alert(data.msg);
           }
       },
       error: function (data) {
           alert("查询失败" + data);
       }
   })
}

//加载车牌号
function getLicenseNumber() {
    $.ajax({
        url: ctx+'/carManager/loadAll',
        type: "get",
        dataType: "json",
        data: '',
        success: function (data) {
            $.each(data, function (i){
                $('#licenseNumber.form-control').append("<option value=" + data[i].id +">" + data[i].licenseNumber + "</option>");
            });
        },
        error: function (data) {
            alert("查询失败" + data);
        }
    })
}

//加载驾驶员
function getDriver(){
    $.ajax({
        url: ctx+'/driver/loadAll',
        type: "get",
        dataType: "json",
        data: '',
        success: function (data) {
            $.each(data, function (i){
                $('#driver.form-control').append("<option value=" + data[i].id +">" + data[i].driverName + "</option>");
                
            });
        },
        error: function (data) {
            alert("查询失败" + data);
        }
    })
}

//日历加载
$("#startTime").datetimepicker({
    format: 'yyyy-mm-dd',
    minView:'month',
    language: 'zh-CN',
    autoclose:true,
    startDate:new Date()
}).on("click",function(){
    $("#endTime").datetimepicker("setStartDate",$("#startTime").val())
});
$("#endTime").datetimepicker({
    format: 'yyyy-mm-dd',
    minView:'month',
    language: 'zh-CN',
    autoclose:true,
    startDate:new Date()
}).on("click",function(){
    $("#startTime").datetimepicker("setEndDate",$("#endTime").val())
});

//模态框弹出前触发
$('.bs-example-modal-lg').on('show.bs.modal', function (e) {
      $.ajax({
              url:ctx+'/applyVehicle/getPersonInfo',
            cache:false,//false是不缓存，true为缓存
            async:true,//true为异步，false为同步
            success:function(data){
                $("#yongcheren").val(data.yongcheren);
                $("#yongcherenId").val(data.yongcherenId);
            },
            error:function(){
                alert("请求失败！");
            }
      });
})

//启动模态框
$("#openModel").click(function(){
    $('#applyModel').modal({backdrop:'static'});
});

//关闭模态框
function closeModel(){
    $("#applyModel").modal('hide');
}
</script>
<script type="text/javascript" src="${ctx}/static/risesoft/js/autoDetilPage.js"></script>
 

 

 

 

 

 

 

后端：

/**
     * 加载用车申请列表(普通用户待办列表)
     */
    @ResponseBody
    @RequestMapping("/vehicleList")
    public Map<String,Object> vehicleList(ServletRequest request){
         int page = Integer.parseInt(request.getParameter("page"));
         int rows = Integer.parseInt(request.getParameter("rows"));
         String sendId = request.getParameter("sendId");
         int currentPage = (page / rows)+1;
         FlowMessageQueryForm form  = new FlowMessageQueryForm();
         form.setPage(currentPage);
         form.setRows(rows);
         form.setSendId(sendId);
        List<Map<String, Object>> items = new ArrayList<Map<String, Object>>();
        String taskId = null;
        Page<FlowMessage> pages = sendService.findAll(form);
        for(FlowMessage flowMessage : pages){
            Map<String, Object> map = new HashMap<String,Object>();
            String processSerialNumber = flowMessage.getProcessSerialNumber();
            String processInstanceId = flowMessage.getProcessInstanceId();
            ApplyForm applyForm = applyVehicleService.findByProcessSerialNumber(processSerialNumber);
            /*Task task = taskService.createTaskQuery().processInstanceId(processInstanceId).singleResult();
            if(null==task){//如果此任务已不再运行，查询历史流程信息
                HistoricVariableInstanceQuery hviq = historyService.createHistoricVariableInstanceQuery().processInstanceId(processInstanceId);
                List<HistoricVariableInstance> list = hviq.variableName(SysVariables.applyStatue).list();
                if(list.size()>0){
                    applyAtatue = (String)list.get(0).getValue();
                }
                taskId ="";
            }else {
                applyAtatue = (String)taskService.getVariable(task.getId(), SysVariables.applyStatue);
                taskId = task.getId();
            }*/
            map.put("id",processSerialNumber);
            map.put("taskId",taskId);
            map.put("licenseNumber", applyForm.getLicenseNumber());
            String startTime = applyForm.getStartTime();
            String endTime = applyForm.getEndTime();
            String durTime = startTime+"--"+endTime;
            map.put("startTime",durTime);
            map.put("driver", applyForm.getDriver()+"("+applyForm.getPhone()+")");
            map.put("models", applyForm.getModels());
            map.put("applyAtatue",flowMessage.getApplyAtatue());
            map.put("applyTime",flowMessage.getApplyTime());
            map.put("feedBackState", flowMessage.getFeedBackState());
            items.add(map);
        }
        Map<String,Object> map1 = new HashMap<String,Object>();
        //map1.put("currpage", pages);
        map1.put("totalpages", pages.getTotalPages());
        map1.put("total", pages.getTotalElements());
        map1.put("rows",items);
        return map1;
    }

    /**
     * 加载用车申请列表(车辆管理员待办列表)
     */
    @ResponseBody
    @RequestMapping("/vehicleList4Admin")
    public Map<String,Object> vehicleList4Admin(@RequestParam(required = false) int page,@RequestParam(required = false) int rows){
        Person person = Y9ThreadLocalHolder.getPerson();
        String processDefinitionKey = "applyVehicle";
        String activitiUer = BpmUtil.genActivitiUser(person.getID(), person.getParentID());
        Map<String, Object> map = flowableService.findTodoTask(activitiUer,processDefinitionKey,page,rows);
        return map;
    }