偽元素樣式
.custom-column::before {
bottom: 50%;
content: "▲";
position: absolute;
display: block;
opacity: .125;
right: 10px;
line-height: 9px;
font-size: .8em;
}
.custom-column1::after {
top: 50%;
content: "▼";
position: absolute;
display: block;
opacity: .125;
right: 10px;
line-height: 9px;
font-size: .8em;
}
.custom-opacity::before{
bottom: 50%;
content: "▲";
position: absolute;
display: block;
opacity: .6;
right: 10px;
line-height: 9px;
font-size: .8em;
}
.custom-opacity1::after{
top: 50%;
content: "▼";
position: absolute;
display: block;
opacity: .6;
right: 10px;
line-height: 9px;
font-size: .8em;
}
.lifeNormal{
height:18px;
background:#93E988;
/*width:20%;*/
border-radius:5px;
}
js中的表格
rReportTable = $("#hisRecords").DataTable({
data: tableData,
destroy: true,
'info': true,
'fixedHeader': true,
scrollX: true,
'scrollY': "580px",
drawCallback: function( settings ) {
//移除伪元素
$('.dataTables_scroll thead th:nth-child(7) .custom-column, .dataTables_scroll thead th:nth-child(7) .custom-column1').remove();
// 添加:befor伪元素
$('.dataTables_scroll thead th:nth-child(7)').css('position', 'relative').addClass('custom-column');
// 添加:after伪元素
$('.dataTables_scroll thead th:nth-child(7)').css('position', 'relative').addClass('custom-column1');
},
"columnDefs": [
{
"targets": [0, 5, 7, 8, 9, 10],
"visible": false,
},
{
"targets": 1,
"data": null,
"render": function (data, type, row) {
var len = data[1].length;
var html = '';
if (len > 6) {
var text = data[2].slice(0, 6)
html = '<div title="' + data[1] + '">' + text + '...' + '</div>'
}
else {
html = '<div title="' + data[1] + '">' + data[1] + '</div>'
}
return html;
},
},
{
"targets": 2,
"data": null,
"render": function (data, type, row) {
var len = data[2].length;
var html = '';
if (len > 6) {
var text = data[2].slice(0, 6)
html = '<div title="' + data[2] + '">' + text + '...' + '</div>'
}
else {
html = '<div title="' + data[2] + '">' + data[2] + '</div>'
}
return html;
},
},
{
"targets": 3,
"data": null,
"render": function (data, type, row) {
var len = data[3].length;
var html = '';
if (len > 6) {
var text = data[3].slice(0, 6)
html = '<div title="' + data[3] + '">' + text + '...' + '</div>'
}
else {
html = '<div title="' + data[3] + '">' + data[3] + '</div>'
}
return html;
},
},
{
"targets": 4,
"data": null,
"render": function (data, type, row) {
var len = data[4].length;
var html = '';
if (len > 6) {
var text = data[4].slice(0, 6)
html = '<div title="' + data[4] + '">' + text + '...' + '</div>'
}
else {
html = '<div title="' + data[4] + '">' + data[4] + '</div>'
}
return html;
},
},
{
"targets": 6,
"data": null,
"render": function (data, type, row) {
var len = data[6].length;
var html = '';
if (len > 6) {
var text = data[6].slice(0, 6)
html = '<div title="' + data[6] + '">' + text + '...' + '</div>'
}
else {
html = '<div title="' + data[6] + '">' + data[6] + '</div>'
}
return html;
},
},
{ "orderData": [10], "targets": 12 }, // 第12列根据第10列的数据排序
{
'targets': 11,
"data": null,
"visible": visi,
"render": function (data, type, row) {
var situation = row[8] + '/' + row[7]
var html = '<div>' + situation + '</div>'
return html
},
"width": '10%',
},
{
"targets": 12,
"data": null,
"width": '20%',
"orderable": false,
"visible": visi,
"render": function (data, type, row) {
var Color = 'lifeNormal'
var Character = 'CharColor'
if (row[10] > 3600) {
Color = 'lifeNormal'
Character = 'norCharColor'
}
else if (row[10] >= 1800 && row[10] <= 3600) {
Color = 'lifePreAlam'
Character = 'norCharColor'
}
else if(row[10]<1800){
Color = 'lifeRemain'
}
if (row[7] != '0' && row[7] != '') {
var rate = ((row[9] / row[7]).toFixed(2)) * 100
}
else {
var rate = 0
}
var html = "<div class='lifeCon'><div class='" + Color + "' style='width:" + rate + "%'></div></div><div class='lifeMin" + ' ' + Character + "'>" + row[11] + "</div>"
return html
}
},
{
"targets": [1,2,3,4,6,11],
width: '4%'
},
{
"targets": [13, 14],
width: '9%'
},
{
"targets": [15],
width: '15%'
},
{
"targets": 17,
"data": null,
"render": function (data, type, row) {
var len = data[17].length;
var html = '';
if (len > 10) {
var text = data[17].slice(0, 10)
html = '<div title="' + data[17] + '">' + text + '...' + '</div>'
}
else {
html = '<div title="' + data[17] + '">' + data[17] + '</div>'
}
return html;
},
},
{
"targets": '_all',
width: '5%'
},
],
columns: tableHead,
language: {
url: '../../css/DataTables-1.13.6/zh-Traditional.json',
},
});
js中的實現方法
var columnIndices = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 13, 14, 15, 16, 17];
columnIndices.forEach(function (colIndex) {
rReportTable.column(colIndex).header().onclick = function () {
// 在這裡根據列索引 colIndex 來處理 sortFlag
sortFlag = 1;
isClicked = false;
$('.custom-column').removeClass('custom-opacity');
$('.custom-column1').removeClass('custom-opacity1');
};
});
rReportTable.column(12).header().onclick = function () {
rReportTable.order([0,'asc']).draw();
var x, y;
tableData1.sort(function (a, b) {
switch (a[16]) {
case '高': x = 100 * sortFlag;
break;
case '中': x = 200 * sortFlag;
break;
case '低': x = 300 * sortFlag;
break;
case '': x = 400 * sortFlag;
break;
case '已完成': x = 1000;
break;
};
switch (b[16]) {
case '高': y = 100 * sortFlag;
break;
case '中': y = 200 * sortFlag;
break;
case '低': y = 300 * sortFlag;
break;
case '': y = 400 * sortFlag;
break;
case '已完成': y = 1000;
break;
};
var value1 = parseFloat(a[10]);
var value2 = parseFloat(b[10]);
if (sortFlag == -1) {
if (value1 > value2) {
x -= 10;
} else {
y -= 10;
}
} else if (sortFlag == 1) {
if (value1 > value2) {
x += 10;
} else {
y += 10;
}
}
return x - y;
});
tableData1 = tableData1.map((row, index) => { row[0] = index; return row; });
isClicked = !isClicked;
if (isClicked) {
$('.custom-column').addClass('custom-opacity');
$('.custom-column1').removeClass('custom-opacity1');
} else {
$('.custom-column').removeClass('custom-opacity');
$('.custom-column1').addClass('custom-opacity1');
}
sortFlag = -sortFlag;
rReportTable.clear().draw();
rReportTable.rows.add(tableData1).draw();
}