表格外掛-bootstrap table的分頁使用示例
阿新 • • 發佈：2018-12-10
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後前端妹子，愛程式設計，愛運營，愛折騰。 堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。