Lightweight Table Sorting Plugin For jQuery - tablesorter
| File Size: | 885 KB |
|---|---|
| Views Total: | 5371 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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
- JS & CSS updated
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.










