如何设置动态排序的数据表列的样式？

Question

我使用 7 列的 jquery 创建了一个数据表。默认情况下，我按第 4 列、第 5 列和第 1 列应用排序。尽管数据表的所有列都是可排序的。这意味着如果用户单击任何列的任何表头，表将按该列排序。

我的要求是，每当用户单击任何列的表头时，该列的边框都会变粗。像这样的图像：

This is my image, click here

基本上，哪一列被排序，那列标题应该有一个粗边框。

以下是数据表代码：

 $('#multiple-account-table').dataTable({
       "data": [
           {"accountNumber":"034-202553701","name":"Account 1","alias":"dummy1","dueDate":"10/19/2016","statementBalance":"34.60"},
           {"accountNumber":"678-202553702","name":"Account 2","alias":"dummy 2","dueDate":"10/19/2015","statementBalance":"14.50"},
           {"accountNumber":"989-202553703","name":"Account 3","alias":"Atlanta 3","dueDate":"10/19/2015","statementBalance":"15.50"},
           {"accountNumber":"131-202553704","name":"Account 4","alias":"dummy4","dueDate":"10/19/2015","statementBalance":"15.50"},
           {"accountNumber":"131-202553705","name":"Account 5","alias":"Atlanta 5","dueDate":"09/19/2016","statementBalance":"100.50"}, 
           {"accountNumber":"131-202553706","name":"Account 6","alias":"Atlanta 6","dueDate":"12/19/2017","statementBalance":"18.50"},
           {"accountNumber":"131-202553707","name":"Account 7","alias":"Atlanta 7","dueDate":"01/01/2015","statementBalance":"105.50"},
           {"accountNumber":"131-202553708","name":"Account 8","alias":"Atlanta 8","dueDate":"10/19/2015","statementBalance":"15.50"},
           {"accountNumber":"131-202553709","name":"Account 9","alias":"Atlanta 9","dueDate":"10/07/2015","statementBalance":"15.50"},
           {"accountNumber":"131-202553710","name":"Account 10","alias":"Atlanta 10","dueDate":"10/19/2016","statementBalance":"15.50"},
           {"accountNumber":"131-202553711","name":"Account 11","alias":"Atlanta 11","dueDate":"10/19/2015","statementBalance":"15.50"},
           {"accountNumber":"131-202553712","name":"Account 12","alias":"Atlanta 12","dueDate":"04/04/2016","statementBalance":"115.50"},
           {"accountNumber":"131-202553713","name":"Account 13","alias":"Atlanta 13","dueDate":"05/19/2015","statementBalance":"25.50"},
           {"accountNumber":"131-202553714","name":"Account 14","alias":"Atlanta 14","dueDate":"03/19/2015","statementBalance":"135.50"},
           {"accountNumber":"131-202553715","name":"Account 15","alias":"Atlanta 15","dueDate":"10/19/2017","statementBalance":"15.50"},
           {"accountNumber":"131-202553716","name":"Account 16","alias":"Atlanta 16","dueDate":"10/19/2015","statementBalance":"08.50"},
           {"accountNumber":"131-202553717","name":"Account 17","alias":"Atlanta 17","dueDate":"10/08/2015","statementBalance":"10.50"},
           {"accountNumber":"131-202553718","name":"Account 18","alias":"Atlanta 18","dueDate":"09/19/2015","statementBalance":"15.50"},
           {"accountNumber":"131-202553719","name":"Account 19","alias":"Atlanta 19","dueDate":"10/05/2015","statementBalance":"15.80"},
           {"accountNumber":"131-202553720","name":"Account 20","alias":"Atlanta 20","dueDate":"10/19/2015","statementBalance":"39.50"},
           {"accountNumber":"131-202553721","name":"Account 21","alias":"Atlanta 21","dueDate":"10/21/2015","statementBalance":"15.50"},
           {"accountNumber":"131-202553722","name":"Account 22","alias":"Atlanta 22","dueDate":"10/19/2016","statementBalance":"15.50"},
           {"accountNumber":"131-202553723","name":"Account 23","alias":"Atlanta 23","dueDate":"10/19/2015","statementBalance":"32.50"},
           {"accountNumber":"131-202553724","name":"Account 24","alias":"Atlanta 24","dueDate":"12/29/2016","statementBalance":"105.50"}
           ],
       "dom": 'it',
       "pageLength": 8,
       "language": {
           "info": "Viewing accounts 1 - _END_ of _TOTAL_ ",
           "emptyTable": "No records are available",
       },
       "columns": [
           {"data": null},
           {"data": "accountNumber"},
           {"data": "name"},
           {"data": "alias"},
           {"data": "dueDate"},
           {"data": "statementBalance"},
           {"data": null}

       ],
       "columnDefs": [
           {className: "pad-md-left-p-10 pad-top-bottom-p-10 white-active-bg mouse-link", "targets": [0,1,2,3,4,5,6]},
           {
             'targets':   0,
             'orderable': false,
                'render': function(data, type, full, meta) {
                    ++index;
                     return '<input type="checkbox" id="select-checkbox'+index+'" name="payment-checkbox" class="multi-checkbox"/>';
                }
           },
           {
                'targets': 1,
                'render': function(data, type, full, meta) {
                        return  '<span id="pdf" class="stmt-identifier">'+data+'</span>';
                }
            },
           {
                'targets': 4,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                $(nTd).text(sData); 
             }
            },
           {
               'targets': 5,
               'orderable': false,
               "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html('<span class="total-due-class">$'+sData+'</span>');
                }
            },
            {
               'targets': 6,
               'searchable':false,
               'orderable':false,
               "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html('<span class="dollar-font">$<input type="number" id="payement-textbox" class="payment" value="" name="payment-textbox" /></span>');

                }
            }
           ],
       "aaSorting": [[4, 'asc'], [5,'desc'],  [1,'asc'] ]

   }); //End of datatable function 

有什么建议吗？

Answer 1

如果你以 dataTables 排序类为目标，你可以通过 CSS 来实现：

table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  border-bottom: 5px solid red;
}

演示 -> http://jsfiddle.net/mc4swj4n/

---

要完全重置边框并避免在选择一列时标题“跳转”，您可以将一般.sorting 类设置为transparent，与粗边框高度相同：

table.dataTable thead .sorting {
  border-bottom: 5px solid transparent;
}

更新小提琴 -> http://jsfiddle.net/mc4swj4n/1/