Table Sorter JS

Use a table sorter script on a table of info

by Virtual

HTML

<script src="//optechusasite.s3.amazonaws.com/temp/redesign/jquery.tablesorter.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<h2>
See our selection of styles:
</h2>
  <div class="row">
    <div class="col-sm-12">
      <table id="tablesorter-demo" width="100%" class="tablesorter UPC">
        <thead>
          <tr>
            <th>Stock Number</th>
            <th>Style</th>
            <th>MSRP</th>
            <th>Approximate Size</th>
            <th>Color</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>7401014</td>
            <td>D - Micro</td>
            <td>$19.95</td>
            <td>4.5" x 2.5" x 2" (11,4cm x 6,4cm x 5,1cm)</td>
            <td>Black</td>
          </tr>
          <tr class="alt">
            <td>7410014</td>
            <td>D - Micro</td>
            <td>$22.95</td>
            <td>4.5" x 2.5" x 2" (11,4cm x 6,4cm x 5,1cm)</td>
            <td>Nature</td>
          </tr>
          <tr>
            <td>7401024</td>
            <td>D - Mini</td>
            <td>$19.95</td>
            <td>4.5" x 3" x 2" (11,4cm x 7,6cm x 5,1cm)</td>
            <td>Black</td>
          </tr>
          <tr class="alt">
            <td>7410024</td>
            <td>D - Mini</td>
            <td>$22.95</td>
            <td>4.5" x 3" x 2" (11,4cm x 7,6cm x 5,1cm)</td>
            <td>Nature</td>
          </tr>
          <tr>
            <td>7401084</td>
            <td>D - Compact</td>
            <td>$19.95</td>
            <td>4.75" x 3.5" x 3" (12,1cm x 8.9cm x 7.6cm)</td>
            <td>Black</td>
          </tr>
          <tr class="alt">
            <td>7410084</td>
            <td>D - Compact</td>
            <td>$22.95</td>
            <td>4.75" x 3.5" x 3" (12,1cm x 8.9cm x 7.6cm)</td>
            <td>Nature</td>
          </tr>
          <tr>
            <td>7401114</td>
            <td>D - Small</td>
           ...

SCSS

/* Table */

table {
  border: 0;
  border-spacing: 0;
  empty-cells: show;
  font-size: 100%
}

caption,
th,
td {
  padding:3px 4px;
  vertical-align: middle;
  text-align: left;
  font-weight: normal;
  border:1px solid #ccc;
  
}

table tr:nth-child(2n) {
  background-color: #EEEFF1;
}

th {
  font-weight: bold;
  
	cursor: pointer;
}


/* table sorter */
/* tables */
 
table.tablesorter thead tr .header:after {
	//content: 'v'; 
  float:right;
}

table.tablesorter thead tr .headerSortUp,table.tablesorter thead tr .headerSortDown { background:#005a8c; color:#fff}
table.tablesorter thead tr .headerSortUp:after {
  
		content: '^'; 
}
table.tablesorter thead tr .headerSortDown:after {
		content: 'v'; 
}

JavaScript

$(document).ready(function() {
  $("#tablesorter-demo").tablesorter({
    sortList: [
     
      [1, 0], [0,0]
    ]
  });
});