1. 引入bootstrap-table资源包, 页首引用css, 页脚引用js
2. table 参数说明
data-toggle="table"
data-toolbar="#toolbar" //指定关联的toolbar div id
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-query-params="queryParams" // 对于toolbar中的input, 需要在这里加入参数
data-sort-name="name" //与th中的 data-field匹配, 默认以哪一个排列
data-sort-field="1" // 远程请求时, 实际用的sort参数值
data-sort-order="desc" // 默认的排序
data-side-pagination="server"
data-pagination="true"
data-query-params-type="limit" //使用简化分页排序参数
data-page-list="[5, 10, 20, 50, 100, 200]"
data-url="/admin/sys/adminuser/data/list.html" // 数据请求地址
3. th参数说明
data-field="createdAt" // 显示时使用的字段
data-sort-field="0" // 远程请求时使用的sort参数值
data-sortable="true" // 是否允许排序
4. 行点击事件
window.op_events = {
'click .op_remove': function (event, value, row, index) {
alert('You click like action, row: ' + JSON.stringify(row));
$table.bootstrapTable('refresh');
}
};
完整页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title></title>
<!-- Bootstrap -->
<link href="/admin/res/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/admin/res/bootstrap-notify/css/bootstrap-notify.css" rel="stylesheet">
<link rel="stylesheet" href="/admin/res/bootstrap-table/bootstrap-table.min.css" type="text/css" media="screen, projection">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via utilities:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/admin/res/jquery/1.11.3/jquery.min.js"></script>
</head>
<body> <!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/admin">FTChinese 财富</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">资产<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/admin/asset/debt/">债权</a></li><li><a href="/admin/asset/fund/">基金</a></li><li><a href="/admin/asset/product/">产品</a></li>
</ul>
</li> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">投资<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/admin/invest/user">用户</a></li>
</ul>
</li> <li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">系统<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/admin/sys/adminuser/">用户</a></li><li><a href="/admin/sys/config/">配置</a></li><li><a href="/admin/sys/menu/">菜单</a></li><li><a href="/admin/sys/auth/">权限</a></li><li><a href="/admin/sys/role/">角色</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/admin/logout.html">[Admin]退出</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<style>
.w70 {width: 70px !important;}
</style>
<div class="container">
<h1>管理员</h1>
<div id="toolbar">
<div class="form-inline" role="form">
<div class="form-group">
<input name="name" class="form-control" type="text" placeholder="Search">
</div>
<button id="ok" type="submit" class="btn btn-default">OK</button>
</div>
</div>
<table id="table"
data-toggle="table"
data-toolbar="#toolbar"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-query-params="queryParams"
data-sort-name="name"
data-sort-field="1"
data-sort-order="desc"
data-side-pagination="server"
data-pagination="true"
data-query-params-type="limit"
data-page-list="[5, 10, 20, 50, 100, 200]"
data-url="/admin/sys/adminuser/data/list.html">
<thead>
<tr>
<th data-field="name" data-sort-field="1" data-sortable="true">用户名</th>
<th data-field="email">Email</th>
<th data-field="role">角色</th>
<th data-field="createdAt" data-sort-field="0" data-sortable="true">创建时间</th>
<th data-field="id" data-formatter="op_formatter" data-events="op_events">操作</th>
</tr>
</thead>
</table> <script>
var $table = $('#table'); $('#ok').click(function () {
$table.bootstrapTable('refresh');
}); function queryParams(params) {
$('#toolbar').find('input[name]').each(function () {
params[$(this).attr('name')] = $(this).val();
});
return params;
} function op_formatter(value, row) {
return [
'<a href="/admin/sys/adminuser/edit.html?id=',
row.id,
'">编辑</a> ',
'<a class="op_remove" href="javascript:void(0)" title="Remove">',
'删除',
'</a> '
].join('');
} function getHeight() {
return $(window).height() - $('h1').outerHeight(true) - 70;
} window.op_events = {
'click .op_remove': function (event, value, row, index) {
alert('You click like action, row: ' + JSON.stringify(row));
$table.bootstrapTable('refresh');
}
}; $(window).resize(function () {
$table.bootstrapTable('resetView', {
height: getHeight()
});
}); $(function () {
$table.bootstrapTable('resetView', {
height: getHeight()
});
});
</script> </div> <div class='notifications bottom-right' id='bs-notify'></div>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/admin/res/bootstrap/js/bootstrap.min.js"></script>
<script src="/admin/res/bootstrap-notify/js/bootstrap-notify.js"></script>
<script src="/admin/res/bootstrap-table/bootstrap-table.js"></script>
</body>
</html>