Skip to content

Instantly share code, notes, and snippets.

@weisiwu

weisiwu/bootstrapTable-server-pagination.html

Last active August 10, 2017 02:00
Show Gist options
  • Save weisiwu/530588b6f83e759b8996963ea29131c7 to your computer and use it in GitHub Desktop.
Save weisiwu/530588b6f83e759b8996963ea29131c7 to your computer and use it in GitHub Desktop.
Download ZIP
bootstrap table server-pagination
Raw
bootstrapTable-server-pagination.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrapTable server pagination</title>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css">
<style type="text/css">
#tableCon {
width: 800px;
height: 540px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="tableCon">
<table id="tableSample"></table>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<script type="text/javascript">
var dom = $('#tableSample'),
requestUrl = 'http://sampletest.cn/UAT/mock/bootstrapTable-server-pagination.php';
dom.bootstrapTable("destroy").bootstrapTable({
method: "get",
url: requestUrl,
// 生成发送往服务器端查询数据,请求数据中包含当前页面中所有查询数据
queryParams: function(set) {
var params = $.extend({}, {
limit: set['limit'],
offset: set['offset']
});
return params;
},
// 接受到服务器端数据后,可以通过这个函数来简单处理器使其符合结构.
responseHandler: function(res) {
var result = {
total: 100, // 服务器数据总数,用于初始化底部翻页按钮,这里是虚拟的
rows: res
};
return result;
},
sidePagination: 'server',
columns: [
{
checkbox: true
}, {
field: 'id',
title: 'id',
width: 100
}, {
field: 'name',
title: 'name',
width: 100
}, {
field: 'age',
title: 'age',
width: 100
}
],
striped: true,
cache: false,
pagination: true,
pageNumber: 1,
pageSize: 20,
pageList: '[5,10,15,20]',
clickToSelect: true,
searchTimeOut: 5000,
paginationPreText: "上一页",
paginationNextText: "下一页"
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment