bootstrap-table后端分页功能完整实例
作者:二萌偏 时间:2024-04-29 13:11:44
本文实例讲述了bootstrap-table后端分页功能。分享给大家供大家参考,具体如下:
使用bootstrap-table实现后台分页
插件资源点击此处本站下载。
引用以下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,//请求服务器时所传的参数
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 += "<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');
}
希望本文所述对大家基于bootstrap的程序设计有所帮助。
来源:https://blog.csdn.net/weixin_39735923/article/details/82496527
标签:bootstrap-table,后端分页
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
pytorch中的transforms模块实例详解
2022-04-25 19:50:58
PyTorch 对应点相乘、矩阵相乘实例
2021-10-23 16:33:29
Python运维开发之psutil库的使用详解
2023-10-24 14:22:55
详细解读Python中解析XML数据的方法
2021-08-18 11:56:24
SqlServer 实用操作小技巧集合第1/2页
2024-01-28 13:19:33
MySQL获取系统性能和状态代码
2024-01-13 10:56:18
python 打印完整异常问题
2022-11-04 16:04:11
Python中的异常处理相关语句基础学习笔记
2021-10-18 00:54:50
golang gorm更新日志执行SQL示例详解
2024-04-23 09:46:24
python自动化测试工具Helium使用示例
2022-09-26 22:59:05
![](https://img.aspxhome.com/file/2023/9/134459_0s.png)
Python pandas实现excel工作表合并功能详解
2021-05-23 01:33:40
![](https://img.aspxhome.com/file/2023/4/70064_0s.png)
详解DeBug Python神级工具PySnooper
2022-12-14 15:44:31
百度UEditor编辑器使用教程与使用方法(图文)
2023-03-31 14:07:53
![](https://img.aspxhome.com/file/2023/9/70629_0s.png)
div中class与id的区别及应用
2007-09-22 08:37:00
怎样在不同版本SQL Server中存储数据
2009-01-20 13:11:00
发一个数字拼图网页游戏
2008-10-12 10:02:00
Bootstrap Table 删除和批量删除
2024-05-25 15:17:21
![](https://img.aspxhome.com/file/2023/4/123724_0s.png)
交互设计模式(三)-Tagging(标签)
2009-10-19 20:46:00
![](https://img.aspxhome.com/file/UploadPic/200910/19/tag-cloud-lastfm-73s.png)
PHP session有效期session.gc_maxlifetime
2023-11-14 17:01:45
用户体验 保守的使用下拉菜单
2008-01-15 20:00:00