表格插件-bootstrap table的分页使用示例
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);
}原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，爱折腾。 坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.11.15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读