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>
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 = request.getRequestURI(); String basePath = request.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 = window.document.location.href; var pathName = window.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); }
