上一篇介紹了後臺的分頁，這一篇介紹前臺bootstrapTable前臺分頁：
html代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>客戶管理</title>
<link href="../../plugin/bootstrap/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<link href="../../plugin/jquery-confirm/jquery-confirm.min.css"
rel="stylesheet">
<link href="../../plugin/bootstrapTable/css/bootstrap-table.min.css"
rel="stylesheet" type="text/css" />
<link
href="../../plugin/bootstrapValidator/css/bootstrapValidator.min.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<!-- 數據表格 -->
<table id="dg" data-toggle="table"
data-unique-id="customerId"//唯一標識
data-height="380"//表格高度
data-ajax="ajaxRequest"//自定義 AJAX 方法,須實現 jQuery AJAX API
//設置在哪裏進行分頁，可選值爲 ‘client’ 或者 ‘server’。
//設置 ‘server’時，必須設置 服務器數據地址（url）或者重寫ajax方法
data-side-pagination="server"
/設置爲 true 會在表格底部顯示分頁條
data-pagination="true"
>
<thead>
<tr>
<th data-formatter="seqnumFormatter" class="col-xs-1"
data-align="center">序號</th>
<th data-field="customerId" data-align="center">客戶Id</th>
<th data-field="customerName" data-align="center">客戶名稱</th>
<th data-field="creationUserName" data-align="center">創建人</th>
<th data-field="creationTime" data-align="center">創建時間</th>
<th data-field="modifiedUserName" data-align="center">修改人</th>
<th data-field="modifiedTime" data-align="center">上次修改時間</th>
<th data-formatter="operFormatter" class="col-sm-1"
data-align="center">操作</th>
</tr>
</thead>
</table>
</div>
<!-- panel-body -->
</div>
<!-- panel -->
</body>
<script src="../../plugin/jquery.min.js"></script>
<script src="../../plugin/bootstrap/js/bootstrap.min.js"></script>
<script
src="../../plugin/bootstrapValidator/js/bootstrapValidator.min.js"></script>
<script src="../../plugin/jquery-confirm/jquery-confirm.min.js"></script>
<script src="../../plugin/bootstrapTable/js/bootstrap-table.min.js"></script>
<script src="../../plugin/jquery.formautofill.min.js"></script>
<script
src="../../plugin/bootstrapTable/js/bootstrap-table-zh-CN.min.js"></script>
<script src="../../js/util/jqConfirmExtend.js"></script>
<script src="../../js/util/ajaxTimeout.js"></script>
<script src="../../js/project/customermanager.js"></script>
</html>js代碼
/**
* ajax請求數據
*/
function ajaxRequest(params) {
// data you need
console.log(params.data);
var jsonData=params.data;
$.ajax({
url : '../../customer/findByPageAndParams', //請求路徑
type: "POST",
contentType:'application/json',
data : JSON.stringify({"offset":jsonData.offset,"pageSize":jsonData.limit,"customerId":$('#customerIdSearch').val(),
"customerName":$('#customerNameSearch').val(),
"modifiedUser":$('#creationUserSearch').val(),
"creationUser":$('#modifiedUserSearch').val()}),
success : function(result) {
if(result.status=="2000"){
// just use setTimeout
setTimeout(function () {
params.success({
total: result.data.total,//分頁的總條數
rows: result.data.rows//表格數據
});
}, 1000);
}
},
error : function() {
}
});
}
/**
* bootstrap table顯示序號
*
* @param value
* 對應表格field的值
* @param {Object}
* row 當前行的數據
* @param {Number}
* index 行索引
*/
function seqnumFormatter(value,row,index){
return index+1;
}
/**
* table顯示詳情按鈕
*
* @param value
* 對應表格field的值
* @param {Object}
* row 當前行的數據
* @param {Number}
* index 行索引
*/
/**table顯示修改、刪除按鈕
* @param value 對應表格field的值
* @param {Object} row 當前行的數據
* @param {Number} index 行索引
* */
function operFormatter(value,row,index){
return "<button type='button' class='btn btn-default btn-xs' title='修改' onclick='modify("+row.customerId+")'><span class='text-primary glyphicon glyphicon-edit'></span></button>" +
" <button type='button' class='btn btn-default btn-xs' title='刪除' onclick='del("+index+","+row.customerId+")'><span class='text-primary glyphicon glyphicon-trash'></span></button>";
}
測試：
這樣分頁的前臺就做好了