bootstrap-table
页面
<link rel="stylesheet" type="text/css" href="<%=basePath%>/css/plugins/bootstrap-table/bootstrap-table.min.css" />
<script type="text/javascript" src="<%=basePath%>/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<table id="tableList" class="table table-hover"></table>
js
// 房客一览画面 查询 $("#selectBtn").click(function(){ // 验证msg清空 $("#errorJspMsg").text(""); // 手机号验证 if ($("#tel").val() != "") { if (!checkNumber($("#tel").val())) { $("#errorJspMsg").text("手机号码请输入数字") return; } } initTable(serverPath); }); function operateFormatter(value, row, index) { return [ '<button type="button" class="RoleOfA btn btn-default aj btn-sm" style="margin-right:15px;">详细</button>', ].join(''); } window.operateEvents = { 'click .RoleOfA' : function(e, value, row, index) { var serverPath = document.getElementById('basePath').value; window.location.href = serverPath + "/visitor/toVisitorDetail?id=" + value; } } function initTable (serverPath) { $("#tableList").bootstrapTable('destroy'); $('#tableList').bootstrapTable({ url: serverPath + "/visitor/selectVisitorList", method: 'post', queryParams : function(params) { if ($("#viTime").val() == "") { return { pageNumber : params.offset/params.limit+1, pageSize : params.limit, name : $("#name").val(), sfzh : $("#idCd").val(), bjstatus : $("#status option:selected").text(), phone : $("#tel").val(), sfbmnm : $("#viDepart").val() }; } else { return { pageNumber : params.offset/params.limit+1, pageSize : params.limit, name : $("#name").val(), sfzh : $("#idCd").val(), bjstatus : $("#status option:selected").text(), phone : $("#tel").val(), visittime : new Date($("#viTime").val()), sfbmnm : $("#viDepart").val() }; } }, cache: false, contentType : "application/x-www-form-urlencoded;charset=UTF-8", sidePagination : "server", //分页方式:client客户端分页,server服务端分页(*) trimOnSearch : false, //允许空字符搜索 search: false, pagination: true, showRefresh: false, showToggle: false, showColumns: false, pageSize : 10,//如果设置了分页,页面数据条数 pageNumber : 1,//如果设置了分页,首页页码 // pageList : [ 10, 20, 50], pageList : [ 5, 10, 15], responseHandler:function (res) { return res; }, onLoadSuccess : function(data) { console.log(data); }, onLoadError : function(data) { console.log(data); }, columns: [ {title : '姓名',field : 'name',align: 'center'}, {title : '年龄',field : 'age',align: 'center'}, {title : '性别',field : 'gender',align: 'center'}, {title : '身份证',field : 'sfzh',align: 'center'}, {title : '手机号',field : 'phone',align: 'center'}, {title : '受访人',field : 'sfrnm',align: 'center'}, {title : '受访人部门',field : 'sfbmnm',align: 'center'}, {title : '来访时间',field : 'visitTimeStr',align: 'center'}, {title : '报警状态',field : 'bjstatus',align: 'center'}, {title : '详情', field : 'id', align: 'center', events: operateEvents, formatter: operateFormatter } ], }); }
后台
public class Visitor { private Integer pageNumber; private Integer pageSize; private Integer pageStart; private Integer pageEnd; //get,set省略 }
@RequestMapping(path = "/selectVisitorList", method = RequestMethod.POST) @ResponseBody public Map<String,Object>selectVisitorList(Visitor visitor) { logger.info("访客一览:查询-start-/selectVisitorList"); logger.info("参数:"+visitor.toString()); // 显示总件数 Integer total = visitorService.selectCntByFuzzy(visitor); // page*rows+1,(page-1)*rows visitor.setPageStart((visitor.getPageNumber()-1)*visitor.getPageSize()); visitor.setPageEnd(visitor.getPageNumber()*visitor.getPageSize() + 1); // 当前显示数据 List<Visitor> list = visitorService.selectVisitorsByPage(visitor); Map<String,Object> result = new HashMap<String,Object>(); result.put("rows", list); result.put("total", total); logger.info("访客件数:"+list.size()); logger.info("访客一览:查询-end-/selectVisitorList"); return result; }
Mapper
<select id="selectVisitorsByPage" resultMap="BaseResultMap" parameterType="com.ryuantech.mp.dao.entity.Visitor"> select <include refid="Base_Column_List" /> from (select ROWNUM AS rowno, <include refid="Base_Column_List" /> from visitor WHERE ROWNUM <![CDATA[<]]> #{pageEnd,jdbcType=INTEGER} <if test="id != null and id != ''" > AND id LIKE #{id,jdbcType=INTEGER} </if> <if test="name != null and name != ''" > <bind name="name" value="'%' + name + '%'" /> AND name LIKE #{name,jdbcType=VARCHAR} </if> <if test="sfzh != null and sfzh != ''" > <bind name="sfzh" value="'%' + sfzh + '%'" /> AND sfzh LIKE #{sfzh,jdbcType=VARCHAR} </if> <if test="bjstatus != null and bjstatus != ''" > <if test="bjstatus != '全部'" > AND bjstatus LIKE #{bjstatus,jdbcType=VARCHAR} </if> </if> <if test="phone != null and phone != ''" > <bind name="phone" value="'%' + phone + '%'" /> AND phone LIKE #{phone,jdbcType=BIGINT} </if> <if test="visittime != null" > <!-- AND visittime LIKE #{visittime,jdbcType=TIMESTAMP} --> AND trunc(visittime,'dd') = trunc(#{visittime,jdbcType=TIMESTAMP},'dd') </if> <if test="sfbmnm != null and sfbmnm != ''" > <bind name="sfbmnm" value="'%' + sfbmnm + '%'" /> AND sfbmnm LIKE #{sfbmnm,jdbcType=VARCHAR} </if> <if test="age != null and age != ''" > <bind name="age" value="'%' + age + '%'" /> AND age LIKE #{age,jdbcType=INTEGER} </if> <if test="gender != null and gender != ''" > <bind name="gender" value="'%' + gender + '%'" /> AND gender LIKE #{gender,jdbcType=VARCHAR} </if> <if test="jgadress != null and jgadress != ''" > <bind name="jgadress" value="'%' + jgadress + '%'" /> AND jgadress LIKE #{jgadress,jdbcType=VARCHAR} </if> <if test="nowadress != null and nowadress != ''" > <bind name="nowadress" value="'%' + nowadress + '%'" /> AND nowadress LIKE #{nowadress,jdbcType=VARCHAR} </if> ) t1 WHERE t1.rowno <![CDATA[>]]> #{pageStart,jdbcType=INTEGER} </select>