bootstrap-table 前端分页,刷新事件代码实例
时间:2022-06-10
本文章向大家介绍bootstrap-table 前端分页,刷新事件代码实例,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
function renderIssueTable(){
$('#issueTable').bootstrapTable({
detailView: false,//父子表
//分页方式:client 客户端分页,server服务端分页(*)
sidePagination: "client",
pageNumber: 1,
pageSize: 50,
pageList: [50, 100, 200, 300],
paginationHAlign: 'right', //right, left
paginationVAlign: 'bottom', //bottom, top, both
paginationDetailHAlign: 'left', //right, left
paginationPreText: '‹',
paginationNextText: '›',
searchOnEnterKey: false,
strictSearch: false,
searchAlign: 'right',
selectItemName: 'btSelectItem',
//是否显示搜索
search: true,
url: 'listIssueOfRecent6Month',
method: 'GET',
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
paginationLoop: false,
silent: true,
//是否启用排序
sortable: true,
sortName: 'deptName',
//排序方式
sortOrder: "asc",
contentType: 'application/json',
dataType: 'json',
// dataField: 'departmentIssueQualityDataList', //server 后端 : json 对应的表格数据 key
responseHandler: function (res) {
console.log(res)
$('#issueTable').bootstrapTable('getOptions').data = res.result;
return res;
},
// 缺陷创建时间(年月日)、缺陷ID、缺陷解决者、项目名称、所属产品线、深度、reopen次数、缺陷修复时长(取fixed_duration )、严重程度、缺陷状态、缺陷标题
columns: [
{
title: 'ID',
field: 'aoneIssueId',
align: 'left',
valign: 'middle',
sortable : true,
formatter: (value, row, index) => {
var url = `https://aone.com/issue/${value}`;
return `<a href="${url}" target="_blank">${value}</a>`;
}
},
{
title: '标题',
field: 'subject',
align: 'center',
valign: 'middle',
sortable : true,
formatter: (value, row, index) => {
return value;
}
},
{
title: '状态',
field: 'status',
align: 'center',
valign: 'middle',
sortable : true,
formatter: (value, row, index) => {
return value;
}
},
{
title: '项目',
field: 'aoneProjectId',
align: 'center',
valign: 'middle',
sortable : true,
formatter: (value, row, index) => {
var url = `https://aone.com/project/${value}`;
return `<a href="${url}" target="_blank">${value}</a>`;
}
},
{
title: '产品线',
field: 'aoneProductId',
align: 'center',
valign: 'middle',
sortable : true,
formatter: (value, row, index) => {
var url = `https://aone.com/project/${value}`;
return `<a href="${url}" target="_blank">${value}</a>`;
}
},
{
title: '修复时长(天)',
field: 'fixedDuration',
align: 'center',
valign: 'middle',
sortable : true,
formatter: (value, row, index) => {
if (value && value !== 0) {
value = (value/(60*60*24)).toFixed(2)
}
return value;
}
},
{
title: '解决者',
field: 'assignedToWorkno',
align: 'center',
valign: 'middle',
sortable : true,
formatter: (value, row, index) => {
var url = `https://aone.com/${value}`;
return `<a href="${url}" target="_blank">${value}</a>`;
}
}, {
title: '严重程度',
field: 'seriousLevel',
align: 'center',
valign: 'middle',
sortable : true,
formatter: (value, row, index) => {
return value;
}
}, {
title: 'reopen次数',
field: 'reopenTimes',
align: 'center',
valign: 'middle',
sortable : true,
formatter: (value, row, index) => {
return value
}
}, {
title: '发现深度',
field: 'depth',
align: 'center',
valign: 'middle',
sortable : true,
formatter: (value, row, index) => {
return value
}
}, {
title: '部门',
field: 'deptFullName',
align: 'center',
valign: 'middle',
sortable : true,
cellStyle: function (value, row, index) {
return {
css: {
"min-width": "100px",
"word-wrap": "break-word",
"word-break": "normal"
}
};
},
formatter: (value, row, index) => {
return value
}
}
],
queryParams: function (params) {
params.deptNo = $("#searchDept").select2("val");
return params
},
// 当表格加载完毕才可以绑定的事件
onPostBody: (rows) => {
}
});
$('#issueTable').bootstrapTable('refresh');
}
参考文档: http://bootstrap-table.wenzhixin.net.cn/
- Javascript基础回顾 之(三) 面向对象
- Javascript基础回顾 之(二) 作用域
- 一不小心写了个WEB服务器
- 遍历算法(1)
- Membership三步曲之入门篇 - Membership基础示例
- Java-String.intern的深入研究
- 从Membership 到 .NET4.5 之 ASP.NET Identity
- Membership三步曲之进阶篇 - 深入剖析Provider Model
- java finally深入探究
- 背后的故事之 - 快乐的Lambda表达式(一)
- 背后的故事之 - 快乐的Lambda表达式(二)
- JVM GC杂谈之理论入门
- 线程池定制初探
- 由浅入深表达式树(二)遍历表达式树
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- python删除列表元素
- PHP中file_get_contents的使用方法
- PHP中的 fastcgi_finish_request();
- PHP超实用的函数总结整理
- R语言使用Rasch模型分析学生答题能力
- PHP中的const
- Python贝叶斯回归分析住房负担能力数据集
- PHP异常处理
- np.argsort函数
- PHP中this,self,parent的区别
- R语言基于协方差的SEM结构方程模型中的拟合指数
- Stata中的治疗效果:RA:回归调整、 IPW:逆概率加权、 IPWRA、 AIPW
- R语言在不同样本量下的Littles MCAR检验
- PHP10段常用功能代码
- MySQL中group_concat()函数用法总结