bootstrap table服务端实现分页效果服务端实现分页效果
主要为大家详细介绍了bootstrap table服务端实现分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考
一下
实现bootstrap table服务端实现分页demo,具体内容如下
首页index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<link rel="stylesheet" href="/assets/css/bootstrap.min.css" rel="external nofollow" />
<link rel="stylesheet" href="/assets/css/bootstrap-table.min.css" rel="external nofollow" >
<script src="/assets/js/jquery-2.1.1.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/bootstrap-table.min.js"></script>
<script src="/assets/js/bootstrap-table-zh-CN.min.js"></script>
<script src="/assets/js/index.js"></script>
</head>
<body>
<!--查询窗体-->
<div class="widget-content">
<form method="post" class="form-horizontal" id="eventqueryform">
<input type="text" class="span2" name="seqNo" placeholder="编号">
<input type="text" class="span3" name="name" placeholder="姓名">
<input type="button" class="btn btn-default span1" id="eventquery" value="查询">
</form>
</div>
<div class="widget-content">
<!--工具条-->
<div id="toolbar">
<button class="btn btn-success btn-xs" data-toggle="modal" data-target="#add">添加事件</button>
</div>
<table id="eventTable"></table>
</div>
</body>
</html>
index.js
$(function() {
// 初始化表格
initTable();
// 搜索按钮触发事件
$("#eventquery").click(function() {
$('#eventTable').bootstrapTable(('refresh')); // 很重要的一步,刷新url!
// console.log("/program/area/findbyItem?offset="+0+"&"+$("#areaform").serialize())
$('#eventqueryform input[name=\'name\']').val('')
$('#eventqueryform input[name=\'seqNo\']').val('')
});
});
// 表格初始化
function initTable() {
$('#eventTable').bootstrapTable({
method : 'post', // 向服务器请求方式
contentType : "application/x-www-form-urlencoded", // 如果是post必须定义
url : '/bootstrap_table_demo/findbyitem', // 请求url
cache : false, // 是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
striped : true, // 隔行变色
dataType : "json", // 数据类型
pagination : true, // 是否启用分页
showPaginationSwitch : false, // 是否显示 数据条数选择框
pageSize : 10, // 每页的记录行数(*)
pageNumber : 1, // table初始化时显示的页数
pageList: [5, 10, 15, 20], //可供选择的每页的行数(*)
search : false, // 不显示 搜索框
sidePagination : 'server', // 服务端分页