jquery - How to style column of datatable who is being sorted dynamically? -
i have created datatable using jquery has 7 column. default applied sorting column 4th, 5th , 1st column. though columns of datatable sortable. means if user click on table header of column, table sorted column.
my requirement that, whenever user click on table header of column, column's border become thick. image:
basically, column being sorted, column header should have thick border.
below 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 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?
you can css if 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 border , avoid captions "jump" when column selected, set general .sorting class transparent same height thick border :
table.datatable thead .sorting { border-bottom: 5px solid transparent; } updated fiddle -> http://jsfiddle.net/mc4swj4n/1/
Comments
Post a Comment