2. 程式人生 > >Bootstrap Table分頁例子

Bootstrap Table分頁例子

阿新 • • 發佈：2019-01-20


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;
	}


相關推薦

bootstrap table 分頁例子

頁面js： var $table=$("#table4"); function queryParamsForHandover(params){var nparams={"pagesize":5,"pageno": (params.offset/5)+1};return nparams; } /*

Bootstrap Table分頁例子

html <div style="width:95%;float:left;" > --> <table class="rl-page-table ui celled structured table span11" table

bootstrap-table分頁數據前臺不顯示

ams class 記錄 pagelist str scrip ole 等待 loop 問題:後臺返回數據{"total":52,"rows":[{"ztname":"2007年新會計準則科目（李相）","ztid":"003bf550-afa5-47b2-aa43-2e1

bootstrap table 分頁只顯示分頁不顯示總頁數等數據

分頁 總頁數 ati pull bsp hal AI pla blog 搜了下沒找到解決方案，就用CSS來解決了。 把paginationDetailHAlign:"right",使pagination-detail的class為.pull-right.paginatio

基於bootstrap table分頁資料及行內編輯和匯出資料（一）

第一步，匯入相應的css和js檔案      <link href="~/Content/bootstrap.min.css" rel="stylesheet" />     <!-----swich按鈕需要的css檔案-->     <

Bootstrap Table分頁重新整理，使formatter的內容無法儲存解決方法

由於專案需要，需要運用Bootstrap Table在最後一列渲染一個input框填寫資訊！ 效果是每列填寫後，點選分頁，或搜尋時使資料保留，但是由於Bootstrap Table每次進行搜尋或者分頁會重新formatter， 導致資料每次都會消失，我想到的解決方法，是通過每次文字框輸

bootstrap-table分頁跳到指定頁面下拉框

一、前言      bootstrap-table是一款表格外掛，他能快速的將資料用表格的形式展示，還包括了搜尋、排序、分頁等功能。最近在一個專案中開始使用它，發現其中分頁沒有直接跳轉指定頁面的功能，

bootstrap-table分頁小結

1.bootstrap-table使用後臺分頁時，請求方式為post的時候，必須新增contentType: “application/x-www-form-urlencoded”,引數，get請求時可以不需要； 2.注意controller介面的引數要與之對

Bootstrap-table分頁+彙總統計

特別說明 使用Bootstrap-table分頁和彙總統計！ 我是自己模擬的JSON資料，用data接受，如果是從後臺url介面拿的的資料請用url接受 設定bootstrapTable的js中 showFooter:true，這樣才能顯示錶格底部彙總欄 在colum

mybatis pagehelp分頁 Springmvc+Mybatis+pagehelper5.1.2+bootstrap table分頁和分頁查詢

1.修改Mybatis配置檔案 <!-- MyBatis配置 --> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">

bootstrap-table 分頁，超細緻！新手寫的個人的看法和理解。

我最近也是剛剛開始寫部落格，目的就是記錄給自己看的。 bootstrap-table 分頁 無意是挺煩的。 網上也有，但是不是那麼簡單。其實我就是一個新人。我也看不懂他們寫的。 <table data-toggle="table" data-mobile-respon

bootstrap-table分頁模板和獲取表中的ID

1.dao層    MyBatis對映    mapper.xml中        <select id="getTcdt" parameterType="com.ls.entity.Mydata" resultMap="BaseResultMap">     

Angularjs+Bootstrap實現分頁指令

效果圖 博客 要求 config 大小 cti 說明 cal 自己 　　本插件的開發目的主要給前端同學使用，本人是專註於後臺開發的，對css樣式不熟悉，但逼於前端要求做一個共公組件方便日常開發，所以這個插件在樣式上可能不適合大部分人，喜歡的拿走吧，不喜歡的也請別噴。 一

bootstrap-paginator分頁示例 源碼 MVC

jquer inittab 加載 rbo 創建 etime tps name item 準備 1.數據：bootstrap包(含分頁插件bootstrap-paginator.js) 2.技術方案：ajax動態加載分頁、部分視圖、BLL取數 代碼 模板頁 @{

ssm整合bootstrap之分頁

java ssm pageHelper 分頁 bootstrap 分頁是我們經常會碰到的需求之一，今天我們就使用企業中很常用的mybatis分頁插件pageHelper來給大家做一個ssm整合bootstrap分頁的案例先看效果圖:一：建立數據庫student:學生表student年級表g

Bootstrap table 跨頁全選

AR Nid size ret 裏的 true cti reat return 此代碼是針對於bootstrap table中分頁的跨頁全選。 　　以下是整個bootstrap的定義 　　 <script type="text/javascript"

Bootstrap 路徑分頁標簽和徽章組件

bootstrap一．路徑組件路徑組件也叫做面包屑導航。//面包屑導航<ol class="breadcrumb"><li><a href="#">首頁</a></li><li><a href

Laravel 5+ Bootstrap 4 分頁器

最近的project裡，發現需要修改Laravel自帶的Bootstrap 4分頁器。要使用自帶的BS4分頁，我們需要將分頁器模板匯出到resources/views/vendor資料夾下： $ php artisan vendor:publish --tag=laravel-pag

關於layui table分頁的實現

這是我做的一個demo 使用layui table 分頁我饒了不少圈子，主要的鍋只能怪自己太懶 先上layui官方文件：  剛開始我忽略了這一句話，我以為layui已經寫好了分頁，只需要我傳入引數就行[手動滑稽] ，所以希望看到這篇帖子的像我一樣的小白，請打消這

django 分頁例子

django 分頁例子 安裝 python3.6 -m pip install django-pure-pagination==0.3.0 設定 settings.py INSTALLED_APPS = [ 'pure_pagination', ] PAGINATION_SETTINGS =