bootstrap-table后端分頁功能完整實例
本文實例講述了bootstrap-table后端分頁功能。分享給大家供大家參考,具體如下:
使用bootstrap-table實現(xiàn)后臺分頁
插件資源點擊此處本站下載。

引用以下css
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" href="../plugins/bootstrap-table/css/bootstrap-table.css" rel="external nofollow" >
引用以下js
<script src="../plugins/jQuery/jquery-1.12.4.min.js"></script> <script src="../plugins/bootstrap/js/bootstrap.min.js"></script> <script src="../plugins/bootstrap-table/js/bootstrap-table.js"></script> <script src="../plugins/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
html
<table id="userTable" style="text-align: center;font-size: 14px;margin: auto;word-wrap:break-word; word-break:break-all" > </table>
js代碼
$(function () {
//初始化表格
var oTable = new TableInit();
oTable.Init();
});
function TableInit() {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#userTable').bootstrapTable({
url: httpRequestUrl + '/admin/queryUserList', //請求后臺的URL(*)
method: 'POST', //請求方式(*)
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存,默認為true,所以一般情況下需要設置一下這個屬性(*)
pagination: true, //是否顯示分頁(*)
sortOrder: "asc", //排序方式
queryParamsType: '',
dataType: 'json',
paginationShowPageGo: true,
showJumpto: true,
pageNumber: 1, //初始化加載第一頁,默認第一頁
queryParams: queryParams,//請求服務器時所傳的參數(shù)
sidePagination: 'server',//指定服務器端分頁
pageSize: 10,//單頁記錄數(shù)
pageList: [10, 20, 30, 40],//分頁步進值
search: false, //是否顯示表格搜索,此搜索是客戶端搜索,不會進服務端,所以,個人感覺意義不大
silent: true,
showRefresh: false, //是否顯示刷新按鈕
showToggle: false,
minimumCountColumns: 2, //最少允許的列數(shù)
uniqueId: "id", //每一行的唯一標識,一般為主鍵列
columns: [{
checkbox: true,
visible: false
}, {
field: 'id',
title: '序號',
align: 'center',
formatter: function (value, row, index) {
return index + 1;
}
},
{
field: 'username',
title: '用戶賬號',
align: 'center',
width: '230px'
},
{
field: 'password',
title: '用戶密碼',
align: 'center'
}, {
field: 'startTime',
title: '開始時間',
align: 'center'
}, {
field: 'endTime',
title: '結(jié)束時間',
align: 'center'
},
{
field: 'roleName',
title: '用戶角色',
align: 'center'
}, {
field: 'operation',
title: '操作',
align: 'center',
events: operateEvents,//給按鈕注冊事件
formatter: addFunctionAlty//表格中增加按鈕
}],
responseHandler: function (res) { //后臺返回的結(jié)果
console.log(res);
if(res.code == "666"){
var userInfo = res.data.list;
var NewData = [];
if (userInfo.length) {
for (var i = 0; i < userInfo.length; i++) {
var dataNewObj = {
'id': '',
"username": '',
'password': '',
"startTime": '',
'endTime': '',
'roleName': '',
'status': ''
};
dataNewObj.id = userInfo[i].id;
dataNewObj.username = userInfo[i].username;
dataNewObj.password = userInfo[i].password;
dataNewObj.startTime = userInfo[i].startTime.replace(/-/g,'/');
dataNewObj.endTime = userInfo[i].endTime.replace(/-/g,'/');
dataNewObj.roleName = userInfo[i].roleName;
dataNewObj.status = userInfo[i].status;
NewData.push(dataNewObj);
}
console.log(NewData)
}
var data = {
total: res.data.total,
rows: NewData
};
return data;
}
}
});
};
// 得到查詢的參數(shù)
function queryParams(params) {
var userName = $("#keyWord").val();
console.log(userName);
var temp = { //這里的鍵的名字和控制器的變量名必須一直,這邊改動,控制器也需要改成一樣的
pageNum: params.pageNumber,
pageSize: params.pageSize,
username: userName
};
return JSON.stringify(temp);
}
return oTableInit;
}
// 表格中按鈕
function addFunctionAlty(value, row, index) {
var btnText = '';
btnText += "<button type=\"button\" id=\"btn_look\" οnclick=\"resetPassword(" + "'" + row.id + "'" + ")\" style='width: 77px;' class=\"btn btn-default-g ajax-link\">重置密碼</button> ";
btnText += "<button type=\"button\" id=\"btn_look\" οnclick=\"openCreateUserPage(" + "'" + row.id + "'" + "," + "'編輯')\" class=\"btn btn-default-g ajax-link\">編輯</button> ";
btnText += "<button type=\"button\" id=\"btn_stop" + row.id + "\" οnclick=\"changeStatus(" + "'" + row.id + "'" + ")\" class=\"btn btn-danger-g ajax-link\">關閉</button> ";
btnText += "<button type=\"button\" id=\"btn_stop" + row.id + "\" οnclick=\"deleteUser(" + "'" + row.id + "'" + ")\" class=\"btn btn-danger-g ajax-link\">刪除</button> ";
return btnText;
}
//刷新表格
function getUserList() {
$("#userTable").bootstrapTable('refresh');
}
PS:關于bootstrap布局,這里再為大家推薦一款本站的在線可視化布局工具供大家參考使用:
在線bootstrap可視化布局編輯工具:
http://tools.jb51.net/aideddesign/layoutit
希望本文所述對大家基于bootstrap的程序設計有所幫助。
- bootstrap table表格插件之服務器端分頁實例代碼
- bootstrap table 服務器端分頁例子分享
- Bootstrap table分頁問題匯總
- 第一次動手實現(xiàn)bootstrap table分頁效果
- bootstrap table插件的分頁與checkbox使用詳解
- BootStrap中Table分頁插件使用詳解
- BootStrap Table前臺和后臺分頁對JSON格式的要求
- bootstrap table分頁模板和獲取表中的ID方法
- 使用bootstraptable插件實現(xiàn)表格記錄的查詢、分頁、排序操作
- bootstrap-table實現(xiàn)服務器分頁的示例 (spring 后臺)
- BootStrap Table后臺分頁時前臺刪除最后一頁所有數(shù)據(jù)refresh刷新后無數(shù)據(jù)問題
- Bootstrap table 服務器端分頁功能實現(xiàn)方法示例
相關文章
JavaScript安全加密之禁止別人調(diào)試自己的前端頁面代碼實現(xiàn)
這篇文章主要為大家介紹了JavaScript安全加密之如何禁止別人調(diào)試自己的前端頁面代碼實現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
JS/jQuery實現(xiàn)獲取時間的方法及常用類完整示例
這篇文章主要介紹了JS/jQuery實現(xiàn)獲取時間的方法及常用類,結(jié)合完整實例形式分析了javascript針對日期時間的獲取、轉(zhuǎn)換、計算與檢測相關操作技巧,需要的朋友可以參考下2019-03-03
JS判斷輸入的字符串是否是數(shù)字的方法(正則表達式)
下面小編就為大家?guī)硪黄狫S判斷輸入的字符串是否是數(shù)字的方法(正則表達式)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
JS中async/await實現(xiàn)異步調(diào)用的方法
這篇文章主要介紹了async/await實現(xiàn)異步調(diào)用的方法,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08

