本文實例講述了bootstrap-table后端分頁功能。分享給大家供大家參考，具體如下：

使用bootstrap-table實現后臺分頁

插件資源點擊此處。

引用以下css

引用以下js

html

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,//請求服務器時所傳的參數

sidepagination: 'server',//指定服務器端分頁

pagesize: 10,//單頁記錄數

pagelist: [10, 20, 30, 40],//分頁步進值

search: false, //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大

silent: true,

showrefresh: false, //是否顯示刷新按鈕

showtoggle: false,

minimumcountcolumns: 2, //最少允許的列數

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: '結束時間',

align: 'center'

},

{

field: 'rolename',

title: '用戶角色',

align: 'center'

}, {

field: 'operation',

title: '操作',

align: 'center',

events: operateevents,//給按鈕注冊事件

formatter: addfunctionalty//表格中增加按鈕

}],

responsehandler: function (res) { //后臺返回的結果

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;

}

}

});

};

// 得到查詢的參數

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 += "重置密碼??";

btntext += "編輯??";

btntext += "關閉??";

btntext += "刪除??";

return btntext;

}

//刷新表格

function getuserlist() {

$("#usertable").bootstraptable('refresh');

}

ps：關于bootstrap布局，這里再為大家推薦一款本站的在線可視化布局工具供大家參考使用：

在線bootstrap可視化布局編輯工具：

希望本文所述對大家基于bootstrap的程序設計有所幫助。

如您對本文有疑問或者有任何想說的，請點擊進行留言回復，萬千網友為您解惑！

總結

以上是生活随笔為你收集整理的bootstraptable控制分页_bootstrap-table后端分页功能完整实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。