Skip to content

Instantly share code, notes, and snippets.

@weisiwu

weisiwu/bootstrapTable-server-pagination-modify.html

Created August 10, 2017 01:59
Show Gist options
  • Save weisiwu/14bcab2507ecc14fb403697551bcdc1d to your computer and use it in GitHub Desktop.
Save weisiwu/14bcab2507ecc14fb403697551bcdc1d to your computer and use it in GitHub Desktop.
Download ZIP
bootstrap table server pagination 保存翻页前状态
Raw
bootstrapTable-server-pagination-modify.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/lodash.js/4.17.0/lodash.min.js"></script>
<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',
experSelections = [];
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
};
$.each(result.rows, function (i, row) {
row.state = $.inArray(row.id, experSelections) !== -1;
});
return result;
},
sidePagination: 'server',
columns: [
{
field: 'state',
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: "下一页"
});
// 用户选中/取消某个或者所有项时触发
dom.on('check.bs.table uncheck.bs.table ' +
'check-all.bs.table uncheck-all.bs.table', function (e, rows) {
var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
// 用于区分每项的ID,如果项目是联合索引,可以尝试将其连接为一个字符串
return row.id;
}),
func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
// 使用lodash union difference 函数来计算选中/取消操作后处于选中状态的项目.
experSelections = _[func](experSelections, ids);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment