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>