js中使用表格控件與偽元素實現表格排序

偽元素樣式

.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();
                }