Bootstrap Table分页例子

html

	   <div style="width:95%;float:left;" > -->
		   <table class="rl-page-table ui celled structured table span11" table-data-url="/lead/sale/summary/getStatListTable">
		    <thead>
		    <tr>
		      <th  data-field="id" data-formatter="xuhao"  width="10%">序号</th>
	          <th  data-field="salesman.name"  width="20%">销售人员</th>
	          <th data-field="bonusAmount" data-sortable="true" width="20%">总提成（元）</th>
	          <th data-field="sellBonus" data-sortable="true"  width="10%">当月售车提成（元）</th>
	          <th data-field="monthBonus" data-sortable="true"  width="10%">缴租提奖（元）</th>
	          <th data-field="halfYearBonus" data-sortable="true"  width="10%">半年提奖（元）</th>
	          <th data-field="salesNumber" data-sortable="true"  width="10%">当月销量（台）</th>
	          <!-- <th data-field="id" data-formatter="down" id="downth">下载列表</th> -->
	          <th data-colspan="8" data-field="id" data-formatter="down"  width="10%">下载</th>
	<!-- 	        <th data-field="id" data-align="right" data-sortable="true">Item ID</th> -->
		    </tr>
		    </thead>
		</table>

   <link href="//cdn.bootcss.com/bootstrap-table/1.10.1/bootstrap-table.css" rel="stylesheet">
  	<script src="//cdn.bootcss.com/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
  	<script src="//cdn.bootcss.com/bootstrap-table/1.10.1/locale/bootstrap-table-zh-CN.min.js"></script>
  	
  	
  	<script src="http://echarts.baidu.com/echarts2/doc/example/timelineOption.js"></script>
  	
  	<script src="/static/stat/summary.js"></script>
    <script src="/static/stat/bootPaginator.js"></script>

js

/**
 * Pagination分页
 * table 需要table-data-url='uri'
 * 
 * @param table id或calss
 * @param flag 刷新表数据
 */

function getPaginationTable(table,flag) {
	
	$(table).bootstrapTable('removeAll');
	var uri=$(table).attr('table-data-url');
	if (flag) {// null undefinded "" NaN typeof
		$(table).bootstrapTable('refresh', queryParams);
		return;
	}

	$(table).bootstrapTable({
		method : 'get', // 这里要设置为get，不知道为什么 设置post获取不了
		url : ctx + uri,
		cache : false,
		striped : true,
		silent : true,
		pagination : true,
		pageList : [ 5, 10, 20, 50, 100, 200 ],
		// contentType: "application/x-www-form-urlencoded",
		pageSize : 10,
		// pageNumber : 1,
		queryParamsType : 'limit',
		// search : true,
		sidePagination : 'server',// 设置为服务器端分页
		queryParams : queryParams
	// ,// 参数
	// showColumns : true,
	// showRefresh : true
	});
}

调用

function xuhao(r, v, i) {

	return i + 1;
}
function down(r, v, i) {
	if (i == 0) {
		return '下载';
	}
	return '';
}

//设置传入参数
function queryParams(parma) {
	// 获取查询条件
	var mehtod = $("#_feeDay").val();
	var teamId = $("#_teme_selection").val();
	// 选择本月和上月
	if (mehtod == "" || "undefined" == mehtod) {
		mehtod = $('input[name="radio1"]:checked ').val();
	}

	var dataParm = '';
	if (mehtod != "" && mehtod != null && mehtod != 'undefined') {
		dataParm += "mehtod=" + mehtod;
		parma = $.extend(parma, {
			mehtod : mehtod,
		});

	}

	if (teamId != "" && teamId != 'undefined' && teamId != null) {

		parma = $.extend(parma, {
			teamId : teamId,
		});

	}
	// parma.teamId = teamId;
	// return dataParm+parma;
	return parma;
}

//初始化表
	getPaginationTable(".rl-page-table",false);

后端代码简单封装

	/**
	 * 获取列表
	 * 
	 * @return
	 */
	@ResponseBody
	@RequestMapping(value = { "getStatListTable" })
	public PaginatorResult  getStatListTable( HttpServletRequest request, HttpServletResponse response,Paginator paginator,
			SaleCommissionVo saleCommissionVo) {
		saleCommissionVo=execPaerm(saleCommissionVo);
		PaginatorResult pageResult = summaryService.getPaginatorList(paginator, saleCommissionVo);
		return pageResult;
	}

import org.apache.commons.lang.StringUtils;

/**
 * bootstarp Paginator分页参数
 * <p>
 * order=asc&limit=10&offset=30
 * 
 * @author ruiliang
 * @date 2017/03/08
 */
public class Paginator {

	private String order;// 排序方式
	private int limit;// 限制取多少行
	private int offset;// 起始行,忽略前面行数
	private String sort;// 排序名称
	private Object bean;

	public String getOrder() {
		return order;
	}

	public void setOrder(String order) {
		this.order = order;
	}

	public int getLimit() {
		return limit;
	}

	public void setLimit(int limit) {
		this.limit = limit;
	}

	public int getOffset() {
		return offset;
	}

	public void setOffset(int offset) {
		this.offset = offset;
	}

	public String getSort() {
		return sort;
	}

	public String getSortAppendOrderBy() {
		if (!StringUtils.isBlank(sort)) {
			if (!StringUtils.isBlank(order)) {
				StringBuffer sb = new StringBuffer();
				sb.append(sort);
				sb.append(" ");
				sb.append(order);
				sort = sb.toString();
			}
		}
		return sort;
	}

	public void setSort(String sort) {
		this.sort = sort;
	}

	public Object getBean() {
		return bean;
	}

	public void setBean(Object bean) {
		this.bean = bean;
	}

	// @Deprecated
	// public <T> Page<T> toPageJSTL(Page<T> page) {
	// if (page == null) {
	// page = new Page<T>();
	// }
	//
	// if (!StringUtils.isBlank(sort)) {
	// if (!StringUtils.isBlank(order)) {
	// sort = (sort + " " + order);
	// }
	// page.setOrderBy(sort);
	// }
	//
	// if (offset <= 0) {
	// offset = 1;
	// }
	// page.setPageNo(offset);
	// page.setPageSize(limit);
	// return page;
	// }

}

package com.ihavecar.hirecar.common.persistence;

/**
 * PaginatorResult 分页返回结果
 * 
 * @author ruiliang
 *
 */
public class PaginatorResult {

	private Object rows;
	private long total;

	public Object getRows() {
		return rows;
	}

	public void setRows(Object rows) {
		this.rows = rows;
	}

	public long getTotal() {
		return total;
	}

	public void setTotal(long total) {
		this.total = total;
	}

}

mybatis 语句

	<!-- 搜索条件判断 -->
	<sql id="searchField">
		<where>
			a.del_flag = 0 
			<if test="bean.commissionDate != null and bean.commissionDate != ''">
				<![CDATA[
				AND a.commission_date >= DATE_ADD(CONVERT(#{bean.commissionDate}, DATE),interval -day(CONVERT(#{bean.commissionDate}, DATE))+1 day)
				AND a.commission_date < DATE_ADD(CONVERT(#{bean.commissionDate}, DATE)-day(CONVERT(#{bean.commissionDate}, DATE))+1,interval 1 month)
				]]>
			</if>
			<if test="bean.teamId != null and bean.teamId>0">
				AND u.office_id =#{bean.teamId}
			</if>
		</where>
	</sql>
	
	<select id="findPaginatorSummary" resultType="SaleCommissionSummary" parameterType="com.ihavecar.hirecar.common.persistence.Paginator">
		SELECT 
			<include refid="saleCommissionSummaryColumns"/>
		FROM sale_commission_summary a
		<include refid="saleCommissionSummaryJoins"/>
		<include refid="searchField" />
		<choose>
			<when test="bean !=null and sort != null and sort != ''">
				ORDER BY ${sort}  
<!-- 				<if test="order != null and order != ''"> -->
<!-- 				   #{order} -->
<!-- 				</if> -->
		
			</when>
			<otherwise>
				ORDER BY a.update_date DESC
			</otherwise>
		</choose>
		LIMIT
		#{offset},#{limit}
	</select>
	
	
	<select id="getCount" resultType="long" parameterType="com.ihavecar.hirecar.common.persistence.Paginator"	>
		SELECT 
			count(*)
		FROM sale_commission_summary a
		<include refid="saleCommissionSummaryJoins"/>
		<include refid="searchField" />
	</select>

---------------------补充说明代码，spirng dao  postgresql 处理方式 ，我回头第二次用的时候，也有点看不懂的原因-----------

/**
	 * 分页请求日志列表
	 * 
	 * @param paginator
	 * @param vo
	 * @return
	 */
	@Override
	public PaginatorResult getPaginatorList(Paginator paginator, ChartsQueryVo vo) {
		PaginatorResult result = new PaginatorResult();
		String table = "x8_crash_log";
		if (StringUtils.isNotBlank(vo.getGameMark())) {
			table = vo.getGameMark() + "_crash_log";
		}
		// 获取总记录数
		result.setTotal(getLogTotal(vo));
		// 参数
		List<Object> paramArray = new LinkedList<Object>();
		// 条件组装
		StringBuffer sqlWhere = getSQLString(vo);// 完成
		StringBuffer sql = new StringBuffer(512);
		sql.append("SELECT id,flag fla,dt,log FROM  ");
		sql.append(table);
		sql.append(sqlWhere);
		// 排序
		if (StringUtils.isNotBlank(paginator.getSort())) {
			if ("logType".equals(paginator.getSort())) {
				sql.append(" order by ");
				sql.append(" flag ");
				sql.append(paginator.getOrder());
			}
			if ("time".equals(paginator.getSort())) {
				sql.append(" order by ");
				sql.append(" dt ");
				sql.append(paginator.getOrder());
			}
		} else {
			sql.append(" order by dt desc");
		}
		// 分页
		sql.append(" LIMIT ");
		sql.append(paginator.getLimit());
		sql.append(" offset ");
		sql.append(paginator.getOffset());
		log.info("sql:>>>\n{}\n param={}", sql.toString(), paramArray.toArray());
		List<CrashLog> data = crashLogDao.selectObjectList(sql.toString(), rowMapper_log);
		// 处理长文本的
		if (data != null && data.size() > 0) {
			for (CrashLog log : data) {
				if (StringUtils.isNotBlank(log.getLog()) && log.getLog().length() > 200) {
					String log_text = log.getLog().substring(0, 200);
					String href = "  <a href='business/device/device_crash/log_detail".intern();
					href += "?id=";
					href += log.getId();
					href += "' target='blank' style='color: blue; cursor: pointer;'>详情</a>".intern();
					log.setLog(log_text + href);
				}
			}
		}
		result.setRows(data);
		return result;
	}

	/**
	 * 获取总记录数
	 * 
	 * @param vo
	 * @return
	 */
	public int getLogTotal(ChartsQueryVo vo) {
		String table = "x8_crash_log";
		if (StringUtils.isNotBlank(vo.getGameMark())) {
			table = vo.getGameMark() + "_crash_log";
		}
		// 参数
		List<Object> paramArray = new LinkedList<Object>();
		// 条件组装
		StringBuffer sqlWhere = getSQLString(vo);// 完成
		StringBuffer sql = new StringBuffer(512);
		sql.append("SELECT count(*) FROM  ");
		sql.append(table);
		sql.append(sqlWhere);
		log.info("sql:>>>\n{}\n param={}", sql.toString(), paramArray.toArray());
		int total = crashLogDao.selectForRows(sql.toString());
		return total;
	}

	private RowMapper<CrashLog> rowMapper_log = new RowMapper<CrashLog>() {
		@Override
		public CrashLog mapRow(ResultSet rs, int rowNum) throws SQLException {
			CrashLog bean = new CrashLog();
			bean.setId(rs.getLong(("id")));
			bean.setTime(rs.getString("dt"));
			bean.setLogType(rs.getString("fla"));
			bean.setLog(rs.getString("log"));
			return bean;
		}
	};

private StringBuffer getSQLString(ChartsQueryVo vo) {
		// 条件语句
		StringBuffer sbWhere = new StringBuffer();
		if (vo != null) {
			// 服务器
			// if (vo.getServer() != null && vo.getServer() > 0) {
			// sbWhere.append(" and server_id=");
			// sbWhere.append(vo.getServer());
			// }

			// 日期
			if (StringUtils.isNotBlank(vo.getDt1())) {// 如果不为空，
				sbWhere.append(" and dt>='");
				sbWhere.append(vo.getDt1());
				sbWhere.append("'");
			}

			if (StringUtils.isNotBlank(vo.getDt2())) {// 如果不为空，
				sbWhere.append(" and dt<='");
				sbWhere.append(vo.getDt2());
				sbWhere.append(" 23:59:59'");
			}
			// 平台
			if (StringUtils.isNotBlank(vo.getOs()) && !"-1".equals(vo.getOs())) {
				sbWhere.append(" and os='");
				sbWhere.append(vo.getOs().toLowerCase());
				sbWhere.append("'");
			}

			if (StringUtils.isNotBlank(vo.getType()) && !"-1".equals(vo.getType())) {
				sbWhere.append(" and app_v='");
				sbWhere.append(vo.getType());
				sbWhere.append("'");
			}
			// 1 JAVA 奔溃日志、2 C奔溃日志、3 Lua错误日志
			if (vo.getCommQueryInt() > 0) {
				sbWhere.append(" and flag=");
				sbWhere.append(vo.getCommQueryInt());
			}

		}
		if (StringUtils.isNotBlank(sbWhere.toString())) {
			// 删除 and 前4位
			sbWhere.delete(0, 5);
			sbWhere.insert(0, " where ");
		}
		// 转数组
		return sbWhere;
	}