這篇文章主要為大家展示了實(shí)現(xiàn)bootstrap-table后端分頁(yè)功能代碼示例,內(nèi)容簡(jiǎn)而易懂,希望大家可以學(xué)習(xí)一下,學(xué)習(xí)完之后肯定會(huì)有收獲的,下面讓小編帶大家一起來(lái)看看吧。
貴陽(yáng)網(wǎng)站制作公司哪家好,找創(chuàng)新互聯(lián)建站!從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項(xiàng)目制作,到程序開發(fā),運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)建站于2013年創(chuàng)立到現(xiàn)在10年的時(shí)間,我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn),來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。
本文實(shí)例講述了bootstrap-table后端分頁(yè)功能。分享給大家供大家參考,具體如下:
使用bootstrap-table實(shí)現(xiàn)后臺(tái)分頁(yè)
插件資源點(diǎn)擊此處本站下載。
引用以下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', //請(qǐng)求后臺(tái)的URL(*) method: 'POST', //請(qǐng)求方式(*) striped: true, //是否顯示行間隔色 cache: false, //是否使用緩存,默認(rèn)為true,所以一般情況下需要設(shè)置一下這個(gè)屬性(*) pagination: true, //是否顯示分頁(yè)(*) sortOrder: "asc", //排序方式 queryParamsType: '', dataType: 'json', paginationShowPageGo: true, showJumpto: true, pageNumber: 1, //初始化加載第一頁(yè),默認(rèn)第一頁(yè) queryParams: queryParams,//請(qǐng)求服務(wù)器時(shí)所傳的參數(shù) sidePagination: 'server',//指定服務(wù)器端分頁(yè) pageSize: 10,//單頁(yè)記錄數(shù) pageList: [10, 20, 30, 40],//分頁(yè)步進(jìn)值 search: false, //是否顯示表格搜索,此搜索是客戶端搜索,不會(huì)進(jìn)服務(wù)端,所以,個(gè)人感覺意義不大 silent: true, showRefresh: false, //是否顯示刷新按鈕 showToggle: false, minimumCountColumns: 2, //最少允許的列數(shù) uniqueId: "id", //每一行的唯一標(biāo)識(shí),一般為主鍵列 columns: [{ checkbox: true, visible: false }, { field: 'id', title: '序號(hào)', align: 'center', formatter: function (value, row, index) { return index + 1; } }, { field: 'username', title: '用戶賬號(hào)', align: 'center', width: '230px' }, { field: 'password', title: '用戶密碼', align: 'center' }, { field: 'startTime', title: '開始時(shí)間', align: 'center' }, { field: 'endTime', title: '結(jié)束時(shí)間', align: 'center' }, { field: 'roleName', title: '用戶角色', align: 'center' }, { field: 'operation', title: '操作', align: 'center', events: operateEvents,//給按鈕注冊(cè)事件 formatter: addFunctionAlty//表格中增加按鈕 }], responseHandler: function (res) { //后臺(tái)返回的結(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 = { //這里的鍵的名字和控制器的變量名必須一直,這邊改動(dòng),控制器也需要改成一樣的 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'); }
以上就是關(guān)于實(shí)現(xiàn)bootstrap-table后端分頁(yè)功能代碼示例的內(nèi)容,如果你們有學(xué)習(xí)到知識(shí)或者技能,可以把它分享出去讓更多的人看到。