Lightweight Table Sorting Plugin For jQuery - tablesorter

File Size: 885 KB
Views Total: 5348
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Lightweight Table Sorting Plugin For jQuery - tablesorter

Yet another table sorter plugin with jQuery that allows you to implement the asc/desc sorting functionality on a specified column of your html table.

How to use it:

1. Put both jQuery JavaScript library and the jQuery tablesorter plugin's script at the bottom of the html page.

<script src="//code.jquery.com/jquery.min.js"></script> 
<script src="js/tablesorter.js"></script>

2. Call the function on your existing html table and specify the column you wan to sort.

<table class="table">
  <caption>
  Table caption
  </caption>
  <thead>
    <tr class="tsTitles">
      <th>#</th>
      <th>FC</th>
      <th>P</th>
      <th>W</th>
      <th>D</th>
      <th>L</th>
      <th>GD</th>
      <th>Pts</th>
      <th>Pts (%)</th>
    </tr>
  </thead>
  <tbody class="tsGroup">
    <tr>
      <td>1</td>
      <td>Spartak</td>
      <td>30</td>
      <td>22</td>
      <td>3</td>
      <td>5</td>
      <td>19</td>
      <td>69</td>
      <td>76.7</td>
    </tr>
    <tr>
      <td>2</td>
      <td>CSKA</td>
      <td>30</td>
      <td>18</td>
      <td>8</td>
      <td>4</td>
      <td>32</td>
      <td>62</td>
      <td>68.9</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Zenit</td>
      <td>30</td>
      <td>18</td>
      <td>7</td>
      <td>5</td>
      <td>31</td>
      <td>61</td>
      <td>67.8</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Krasnodar</td>
      <td>30</td>
      <td>12</td>
      <td>13</td>
      <td>5</td>
      <td>18</td>
      <td>49</td>
      <td>54.4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Terek</td>
      <td>30</td>
      <td>14</td>
      <td>6</td>
      <td>10</td>
      <td>3</td>
      <td>48</td>
      <td>53.3</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Rostov</td>
      <td>30</td>
      <td>13</td>
      <td>9</td>
      <td>8</td>
      <td>18</td>
      <td>48</td>
      <td>53.3</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Ufa</td>
      <td>30</td>
      <td>12</td>
      <td>7</td>
      <td>11</td>
      <td>-3</td>
      <td>43</td>
      <td>47.8</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Lokomotiv</td>
      <td>30</td>
      <td>10</td>
      <td>12</td>
      <td>8</td>
      <td>12</td>
      <td>42</td>
      <td>46.7</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Rubin</td>
      <td>30</td>
      <td>10</td>
      <td>8</td>
      <td>12</td>
      <td>-4</td>
      <td>38</td>
      <td>42.2</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Amkar</td>
      <td>30</td>
      <td>8</td>
      <td>11</td>
      <td>11</td>
      <td>-4</td>
      <td>35</td>
      <td>38.9</td>
    </tr>
    <tr>
      <td>11</td>
      <td>Ural</td>
      <td>30</td>
      <td>8</td>
      <td>6</td>
      <td>16</td>
      <td>-20</td>
      <td>30</td>
      <td>33.3</td>
    </tr>
    <tr>
      <td>12</td>
      <td>Anzhi</td>
      <td>30</td>
      <td>7</td>
      <td>9</td>
      <td>14</td>
      <td>-14</td>
      <td>30</td>
      <td>33.3</td>
    </tr>
    <tr>
      <td>13</td>
      <td>Orenburg</td>
      <td>30</td>
      <td>7</td>
      <td>9</td>
      <td>14</td>
      <td>-11</td>
      <td>30</td>
      <td>33.3</td>
    </tr>
    <tr>
      <td>14</td>
      <td>Arsenal</td>
      <td>30</td>
      <td>7</td>
      <td>7</td>
      <td>16</td>
      <td>-22</td>
      <td>28</td>
      <td>31.1</td>
    </tr>
    <tr>
      <td>15</td>
      <td>Krylia Sovetov</td>
      <td>30</td>
      <td>6</td>
      <td>10</td>
      <td>14</td>
      <td>-8</td>
      <td>28</td>
      <td>31.1</td>
    </tr>
    <tr>
      <td>16</td>
      <td>Tom</td>
      <td>30</td>
      <td>3</td>
      <td>5</td>
      <td>22</td>
      <td>-47</td>
      <td>14</td>
      <td>15.6</td>
    </tr>
  </tbody>
</table>
$("table").tablesorter({
  tablesorterColumns: [{
    col: 1
  }] 
});

3. Set the default sorting order.

$("table").tablesorter({
  tablesorterColumns: [{
    col: 1,
    order: 'asc'
  }] 
});

Changelog:

v1.0.0 (2019-07-08)

  • Small improvement

2019-07-02

2018-08-23

  • Sorting within groups

This awesome jQuery plugin is developed by xcurveballx. For more Advanced Usages, please check the demo page or visit the official website.