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>