Teddu Teddu - 4 months ago 22
jQuery Question

How to style column of datatable who is being sorted dynamically?

I have created a datatable using jquery which has 7 column. By default I applied sorting by column 4th, 5th and 1st column. Though all columns of datatable are sortable. That means if user will click on any table header of any column, table will be sorted by that column.

My requirement is that, whenever user will click on table header of any column, that column's border will become thick. Something like this image:

This is my image, click here

Basically, which column is being sorted, that column header should have a thick border.

Below is datatable code:

$('#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


Any suggestion?

Answer

You can do it by CSS if you target dataTables sorting classes :

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

demo -> http://jsfiddle.net/mc4swj4n/


To reset the border completely and avoid the captions to "jump" when a column is selected, you could set the general .sorting class to be transparent with the same height as the thick border :

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

updated fiddle -> http://jsfiddle.net/mc4swj4n/1/

Comments