Sortable HTML Table with simple jQuery script


Using simple jQuery script to sort the data in the table rows. In this, you sort the data in the separate column. Which column you want to sort just click the table header of the corresponding row the data inside the table ascending and descending formate.

This plugin we do not use any library file only jQuery library and simple jQuery script, CSS and HTML. If you use this code add the query library to your file then only the script will work. I used the Font Awesome icon for the arrow in the table header.

Just copy the code below and paste into your file.


jQuery Script
$('.sortable th').each(function(column) {
    $(this).hover(
      function() {
        $(this).addClass('focus');
      },
      function() {
        $(this).removeClass('focus');
      }
    );
    $(this).click(function() {
      if ($(this).is('.ascending')) {
        $(this).removeClass('ascending');
        $(this).addClass('desc selected');
        sortOrder = -1;
      } else {
        $(this).addClass('ascending selected');
        $(this).removeClass('descending');
        sortOrder = 1;
      }
      $(this).siblings().removeClass('ascending selected');
      $(this).siblings().removeClass('descending selected');
      var arrData = $(this).parent().parent().parent().find('tbody >tr:has(td)').get();

      arrData.sort(function(first, second) {
        var val1 = $(first).children('td').eq(column).text().toUpperCase();
        var val2 = $(second).children('td').eq(column).text().toUpperCase();
        debugger;
        if ($.isNumeric(val1) && $.isNumeric(val2))
          return sortOrder == 1 ? val1 - val2 : val2 - val1;
        else
          return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0;
      });
      $.each(arrData, function(index, row) {
        $(this).parent().parent().parent().find('tbody').append(row);
      });
    });
  });

HTML Code
<table class="sortable">
  <thead>
    <tr>
      <th><span>Name</span></th>
      <th><span>Position</span></th>
      <th><span>Office</span></th>
      <th><span>Age</span></th>
      <th><span>Start date</span></th>
      <th><span>Salary</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>2012/08/06</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>55</td>
      <td>2010/10/14</td>
      <td>$327,900</td>
    </tr>
    <tr>
      <td>Colleen Hurst</td>
      <td>Javascript Developer</td>
      <td>San Francisco</td>
      <td>39</td>
      <td>2009/09/15</td>
      <td>$205,500</td>
    </tr>
    <tr>
      <td>Sonya Frost</td>
      <td>Software Engineer</td>
      <td>Edinburgh</td>
      <td>23</td>
      <td>2008/12/13</td>
      <td>$103,600</td>
    </tr>
    <tr>
      <td>Jena Gaines</td>
      <td>Office Manager</td>
      <td>London</td>
      <td>30</td>
      <td>2008/12/19</td>
      <td>$90,560</td>
    </tr>
    <tr>
      <td>Quinn Flynn</td>
      <td>Support Lead</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2013/03/03</td>
      <td>$342,000</td>
    </tr>
    <tr>
      <td>Charde Marshall</td>
      <td>Regional Director</td>
      <td>San Francisco</td>
      <td>36</td>
      <td>2008/10/16</td>
      <td>$470,600</td>
    </tr>
    <tr>
      <td>Haley Kennedy</td>
      <td>Senior Marketing Designer</td>
      <td>London</td>
      <td>43</td>
      <td>2012/12/18</td>
      <td>$313,500</td>
    </tr>
    <tr>
      <td>Tatyana Fitzpatrick</td>
      <td>Regional Director</td>
      <td>London</td>
      <td>19</td>
      <td>2010/03/17</td>
      <td>$385,750</td>
    </tr>
    <tr>
      <td>Michael Silva</td>
      <td>Marketing Designer</td>
      <td>London</td>
      <td>66</td>
      <td>2012/11/27</td>
      <td>$198,500</td>
    </tr>
    <tr>
      <td>Paul Byrd</td>
      <td>Chief Financial Officer (CFO)</td>
      <td>New York</td>
      <td>64</td>
      <td>2010/06/09</td>
      <td>$725,000</td>
    </tr>
  </tbody>
</table>

CSS Code
.sortable {
    width: 100%;
  }

  .sortable th {
    background-color: #f2f2f2;
    padding: 8px;
  }

  .sortable td {
    border-bottom: 1px solid #ddd;
    padding: 8px;
  }

  .sortable .focus {
    background-color: #e7e7e7;
  }

  .sortable .selected {
    background-color: #e7e7e7;
  }

  .sortable .ascending:after {
    content: "\f107";
    font-family: 'FontAwesome';
    padding: 0 10px
  }

  .sortable .descending:after {
    content: "\f106";
    font-family: 'FontAwesome';
    padding: 0 10px
  }

  .sortable th span:after {
    content: "\f107";
    font-family: 'FontAwesome';
    padding: 0 10px
  }

  .sortable th.selected span:after {
    display: none;
  }
Copyright Labw3