Skip to content

Instantly share code, notes, and snippets.

@weisiwu

weisiwu/bootstrapTable-client-pagination.html

Last active August 10, 2017 02:01
Show Gist options
  • Save weisiwu/eaf0564da84a85ff88aa3c4ece6b82dd to your computer and use it in GitHub Desktop.
Save weisiwu/eaf0564da84a85ff88aa3c4ece6b82dd to your computer and use it in GitHub Desktop.
Download ZIP
bootstrap table client pagination
Raw
bootstrapTable-client-pagination.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrapTable client 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-client-pagination.php';
dom.bootstrapTable("destroy").bootstrapTable({
method: "get",
url: requestUrl + "",
sidePagination: 'client',
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: 10,
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