1: 在官网上下载相关的文件之后, 步骤下载之后引入:
- <!-- 引入的 CSS 文件 -->
- <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
- <link href="bootstrap-table/dist/bootstrap-table.min.css"
- rel="stylesheet">
- <!-- 引入的 js 文件 -->
- <script src="jquery/jquery.min.js"></script>
- <script src="bootstrap/js/bootstrap.min.js"></script>
- <script src="bootstrap-table/dist/bootstrap-table.min.js"></script>
- <script src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
- <!-- 引入 bootstrap 样式 -->
- <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
- <!-- 引入 bootstrap-table 样式 -->
- <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
- <<!-- jquery 及 bootstrapjs -->
- <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
- <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
- <!-- bootstrap-table.min.js -->
- <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
- <!-- 引入中文语言包 -->
- <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
2:html 界面
- <div class="mytab">
- <table id="mytab" class="table table-hover"></table>
- </div>
3:JS 代码
- $('#mytab').bootstrapTable({
- method : 'post',
- // contentType:
- // "application/x-www-form-urlencoded",// 当请求方法为 post 的时候, 必须要有!!!!
- url : path + "/user/list",// 请求路径
- striped : true, // 是否显示行间隔色
- pageNumber : 1, // 初始化加载第一页
- pagination : true,// 是否分页
- sidePagination : 'client',// server: 服务器端分页 | client: 前端分页
- pageSize : 4,// 单页记录数
- pageList : [ 5, 10, 20, 30 ],// 可选择单页记录数
- //showRefresh : true,// 刷新按钮
- queryParams : function(params) {// 上传服务器的参数
- var temp = {// 如果是在服务器端实现分页, limit,offset 这两个参数是必须的
- limit : params.limit, // 每页显示数量
- offset : params.offset, // SQL 语句起始索引
- // page: (params.offset / params.limit) + 1, // 当前页码
- };
- return temp;
- },
- columns : [ {
- title : '登录名',
- field : 'loginName',
- sortable : true
- }, {
- title : '昵称',
- field : 'nickName',
- sortable : true
- }, {
- title : '角色',
- field : 'roleName',
- }, {
- title : '操作',
- field : 'id',
- formatter : option
- } ]
- })
4: 完整的添加数据之后显示在表格里面, 自动分页代码, 删除和编辑效果
jsp 界面 :
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <% String path=r equest.getRequestURI(); String basePath=r equest.getScheme()
- + "://" + request.getServerName() + ":" + request.getServerPort() + path;
- %>
- <base href="<%=basePath%>">
- <title>
- 用户管理
- </title>
- <link rel="stylesheet" type="text/css" href="../../common/bootstrap/css/bootstrap.min.css"
- />
- <link rel="stylesheet" href="../../common/bootstrap-table/bootstrap-table.min.css">
- <link rel="stylesheet" type="text/css" href="../../css/user/user.css"
- />
- <style>
- </style>
- </head>
- <body>
- <div class="page-content-wrapper">
- <div class="page-content">
- <div class="row">
- <div class="col-md-12">
- <div class="portlet-title">
- <a href="javascript:;" class="btn default yellow-stripe" id="userAdd">
- <i class="">
- </i>
- <span class="hidden-480">
- 添加用户
- </span>
- </a>
- </div>
- <div class="mytab">
- <table id="mytab" class="table table-hover">
- </table>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script type="text/javascript" src="../../js/jquery-1.9.1.js" />
- </script>
- <script src="../../common/bootstrap/js/bootstrap.min.js">
- </script>
- <script src="../../common/bootstrap-table/bootstrap-table.min.js">
- </script>
- <script src="../../common/bootstrap-table/bootstrap-table-zh-CN.min.js">
- </script>
- <script src="../../js/user/user.js" />
- </script>
- <!-- 弹框 -->
- <script src="../../common/layer/layer.js">
- </script>
- <script src="../../common/layer/extend/layer.ext.js">
- </script>
- </body>
- </HTML>
JS 代码:
- var path = getContextPath();
- $(function() {
- $('#mytab').bootstrapTable({
- method : 'post',
- // contentType:
- // "application/x-www-form-urlencoded",// 当请求方法为 post 的时候, 必须要有!!!!
- url : path + "/user/list",// 请求路径
- striped : true, // 是否显示行间隔色
- pageNumber : 1, // 初始化加载第一页
- pagination : true,// 是否分页
- sidePagination : 'client',// server: 服务器端分页 | client: 前端分页
- pageSize : 4,// 单页记录数
- pageList : [ 5, 10, 20, 30 ],// 可选择单页记录数
- //showRefresh : true,// 刷新按钮
- queryParams : function(params) {// 上传服务器的参数
- var temp = {// 如果是在服务器端实现分页, limit,offset 这两个参数是必须的
- limit : params.limit, // 每页显示数量
- offset : params.offset, // SQL 语句起始索引
- // page: (params.offset / params.limit) + 1, // 当前页码
- };
- return temp;
- },
- columns : [ {
- title : '登录名',
- field : 'loginName',
- sortable : true
- }, {
- title : '昵称',
- field : 'nickName',
- sortable : true
- }, {
- title : '角色',
- field : 'roleName',
- }, {
- title : '操作',
- field : 'id',
- formatter : option
- } ]
- })
- // 定义删除, 更新操作
- function option(value, row, index) {
- var htm = '<button id="delUser"userId='
- + value
- + 'onclick="delUser(this)">删除 </button><button id="dupUser"onclick="updUser(' + value +')"> 修改</button>'
- return htm;
- }
- // 查询按钮事件
- $('#search_btn').click(function() {
- $('#mytab').bootstrapTable('refresh', {
- url : path + '/user/list'
- });
- })
- // 添加用户
- $("#userAdd").on("click", function() {
- layer.open({
- type : 2,
- title : '添加用户',
- area : [ '500px', '440px' ],
- fix : false, //
- content : path + '/user/pageAdd',
- end : function() {
- $("#mytab").bootstrapTable('refresh', {
- url : path + "/user/list"
- });
- }
- });
- });
- })
- // 删除用户
- function delUser(dom) {
- var mymessage = confirm("确认删除嘛?");
- if (mymessage == true) {
- $.Ajax({
- url : path + '/user/' + $(dom).attr("userId"),
- type : 'delete',
- success : function(data) {
- $(dom).parent().parent().hide();
- },
- error : function(data){
- alert("服务器繁忙")
- }
- });
- }
- }
- // 编辑用户
- function updUser(id) {
- layer.open({
- type : 2,
- title : '编辑用户',
- area : [ '500px', '440px' ],
- fix : false, //
- content : path + '/user/pageUpd/' + id,
- end : function() {
- $("#mytab").bootstrapTable('refresh', {
- url : path + "/user/list"
- });
- }
- });
- }
- // 获取项目路径
- function getContextPath() {
- var currentPath = Windows.document.location.href;
- var pathName = Windows.document.location.pathname;
- var pos = currentPath.indexOf(pathName);
- var localhostPath = currentPath.substring(0, pos);
- var projectName = pathName
- .substring(0, pathName.substr(1).indexOf('/') + 1);
- return (localhostPath + projectName);
- }
来源: http://www.jianshu.com/p/e436e4d87a14