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');
}
bootstrap-table 前端分页,刷新事件代码实例
原创禅与计算机程序设计艺术 ©著作权
©著作权归作者所有:来自51CTO博客作者禅与计算机程序设计艺术的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
bootstrap-table插件实现分页(服务端分页)
前端html部分<%--商品列表显示--%> <div class="ibox-content table
bootstrap springmvc spring mybatis ajax -
bootstrap-table基本使用
bootstrap-table的基本使用
bootstrap table -
bootstrap-table源码解读
1.使用简单场景:Js代码 <table id="table"></table> $("#table").bootstrapTable({ url: options.url, meth
bootstrap-table 标题栏 配置项 构造函数 -
Bootstrap-table插件使用之ajax-定时刷新
项目中使用了Bootstrap-table来呈现数据,但是在我用传统的setTimeout或者setInt
Bootstrap-table bootstrap Bootstrap 系统资源 -
BootStrap-table刷新按钮与搜索框高度问题
一、问题描述二、解决方案:在文档开头加一句:<!DOCTYPE html>三、最终效果:
bootstrap html html5 jsp bootstrap-table -
Bootstrap-table的客户端分页渲染表格
文章目录一、前言:1、服务端分页地址:2、下载地址:二、客户端分页步骤:1、table标签:2、js渲染:2.1、表格初始化2.2、页脚格式化处理:3、后端处理:4、前端页面渲染效果:一、前言:具有单选,复选框,排序,分页,扩展和其他添加功能的扩展Bootstrap表
bootstrap javascript jquery bootstrap-table 前端