Lightweight Table Sorting Plugin For jQuery - tablesorter
File Size: | 885 KB |
---|---|
Views Total: | 5250 |
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.