jQuery table sort change the color of sorted by column:

user_5653068 0
Viewed 694

I have a following html table and jQuery function to sort the table by table header columns: 

//sort summary table
$('th').click(function() {
  var table = $(this).parents('table').eq(0)
  var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
  this.asc = !this.asc;
  if (!this.asc) {
    rows = rows.reverse();
  }

  for (var i = 0; i < rows.length; i++) {
    table.append(rows[i]);
  }
});
 
function comparer(index) {
  return function(a, b) {
 var valA = getCellValue(a, index), 
        valB = getCellValue(b, index)
    return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
  }
}
      
function getCellValue(row, index) { 
  return $(row).children('td').eq(index).text();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
 <tr>
   <th>S.No.</th>
   <th>School</th>
   <th>Campus City / State</th>
   <th>Campaign Name</th>
   <th>Work Order</th>
 </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>EL PASO UNIVERSITY</td>
      <td> EL PASO/TX</td>
      <td>Full Campaign</td>
      <td>#10055</td>
    </tr>
    <tr>
      <td>2</td>
      <td>DALLAS UNIVERSITY</td>
      <td> DALLAS/TX</td>
      <td>Mini Campaign</td>
      <td>#10056</td>
    </tr>
    <tr>
    <td>3</td>
          <td>MINNESOTA UNIVERSITY</td>
      <td> MINNEAPOLIS/MN</td>
      <td>Full Campaign</td>
      <td>#10059</td> 
    </tr>
  </tbody>
</table>

All the functionality for sorting table is working fine. But couldn't figure out how to let user know current ordering of table is sorted by which column. I just want to add simple css color to separate the currently clicked column. Any idea?

sorting html jquery javascript
2 Answers

Adding the css colors to all headers except the clicked one will do the trick. This can be achieved by something like:

$('th').css({'background-color' : '#808080'}); 
$('th').css({'color' : '#FFFFFF'});
$(this).css('background-color', '#6f3d3d'); //change the background color
$(this).css({'color' : '#0000FF'});    //change the font color

Just add the above code to your function:

//sort summary table
$('th').click(function(){
  //add your css trick
  $('th').css({'background-color' : '#808080'});
  $('th').css({'color' : '#FFFFFF'});
  $(this).css('background-color', '#6f3d3d');
  $(this).css({'color' : '#0000FF'});

  var table = $(this).parents('table').eq(0)
  var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
  this.asc = !this.asc
  if (!this.asc) {
    rows = rows.reverse();
  }
  for (var i = 0; i < rows.length; i++) {
    table.append(rows[i]);
  }
});
 
function comparer(index) {
  return function(a, b) {
    var valA = getCellValue(a, index), 
        valB = getCellValue(b, index)
      return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
  }
}
      
function getCellValue(row, index) { 
  return $(row).children('td').eq(index).text();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>S.No.</th>
      <th>School</th>
      <th>Campus City / State</th>
      <th>Campaign Name</th>
      <th>Work Order</th>
    </tr>
  </thead>
  <tbody>  
    <tr>  
      <td>1</td>
      <td>EL PASO UNIVERSITY</td>
      <td> EL PASO/TX</td>
      <td>Full Campaign</td>
      <td>#10055</td>
    </tr>
    <tr>
      <td>2</td>
      <td>DALLAS UNIVERSITY</td>
      <td> DALLAS/TX</td>
      <td>Mini Campaign</td>
      <td>#10056</td>
    </tr>
    <tr>
      <td>3</td>
      <td>MINNESOTA UNIVERSITY</td>
      <td> MINNEAPOLIS/MN</td>
      <td>Full Campaign</td>
      <td>#10059</td>
    </tr>
  </tbody>
</table>

user_15782980

You just need to add a condition to your JS that will check if this column is currently the sorted-by column,

$('th').click(function() {
  if (!$(this).hasClass('sort-by')) {
    $('th').removeClass('sort-by');
    $(this).addClass('sort-by');
    // logic for sorting by this column
  }
});

and add a simple rule to your CSS

.sort-by {
  background-color: blue; // or whatever
}
user_59347040
Related