0

I want to sort table using jQuery where table column intrechange not the rows. I write some code its working but the problem is that it only sort first ten column I don't know know.

Here is jQuery code.

  function sort() {
        var LEFT_ROWS = 1,
                $table = $('table'),
                $sorted = $table.find('tbody tr').last().children().slice(LEFT_ROWS);
        $sorted = $sorted.sort(function(a, b) {

            return parseFloat(a.textContent) - parseFloat(b.textContent);
        });
        $table.find('tr').each(function() {
            var $row = $(this),
                    $rowContent = $row.children().slice(LEFT_ROWS);

            $rowContent.toArray().map(function(t) {
                return $sorted.eq($(t).index() - LEFT_ROWS).index() - LEFT_ROWS
            }).sort(function(a, b) {
                var diff = a - b;
            }).forEach(function(i) {
                $row.append($rowContent.eq(i));
            });
        });
    }

Here is a table.

  <table class="table table-bordered text-center">
    <thead>
    <tr>
        <th style="width: 200px;border-top: solid 1px rgba(255, 255, 255, 1);border-left: solid 1px rgba(255, 255, 255, 1);"></th>
        <th class="text-center yukiko-blue">Average</th>
        <th class="text-center">Baxter CDJR La Vista</th><th class="text-center">Baxter CDJR West Dodge</th><th class="text-center">Baxter Ford West Dodge</th><th class="text-center"> Legends Honda</th><th class="text-center"> Infiniti of Omaha</th><th class="text-center">Legends Toyota</th><th class="text-center"> Lexus of Lincoln</th><th class="text-center"> Lexus of Omaha</th><th class="text-center"> Mercedes-Benz of Omaha</th><th class="text-center">Baxter CDJR Lincoln</th><th class="text-center"> Baxter Ford South</th><th class="text-center">Baxter Toyota La Vista</th><th class="text-center">Baxter Toyota Lincoln</th><th class="text-center">Baxter VW La Vista</th><th class="text-center">Baxter CDJR Bellevue</th><th class="text-center"> Audi Omaha</th><th class="text-center"> Baxter Hyundai</th><th class="text-center"> Baxter Mazda</th><th class="text-center"> Baxter Subaru</th><th class="text-center">Baxter VW Westroads</th>                                         </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">New Car Total Leads</th>
        <td class="yukiko-blue">251</td><td>226</td><td>526</td><td>359</td><td>442</td><td>84</td><td>336</td><td>35</td><td>104</td><td>80</td><td>357</td><td>486</td><td>379</td><td>274</td><td>91</td><td>337</td><td>106</td><td>80</td><td>195</td><td>431</td><td>82</td>                                          </tr>
    <tr>
        <th scope="row">New Car Dupes</th>
        <td class="yukiko-blue">74</td><td>114</td><td>233</td><td>120</td><td>102</td><td>19</td><td>91</td><td>5</td><td>19</td><td>13</td><td>161</td><td>84</td><td>63</td><td>70</td><td>16</td><td>88</td><td>25</td><td>13</td><td>41</td><td>195</td><td>13</td>                                            </tr>
    <tr>
        <th scope="row" style="background:rgba(100, 100, 105, .125);">New Car Net Leads</th>
        <td class="yukiko-blue">176</td><td style="background:rgba(100, 100, 105, .125);">112</td><td style="background:rgba(100, 100, 105, .125);">293</td><td style="background:rgba(100, 100, 105, .125);">239</td><td style="background:rgba(100, 100, 105, .125);">340</td><td style="background:rgba(100, 100, 105, .125);">65</td><td style="background:rgba(100, 100, 105, .125);">245</td><td style="background:rgba(100, 100, 105, .125);">30</td><td style="background:rgba(100, 100, 105, .125);">85</td><td style="background:rgba(100, 100, 105, .125);">67</td><td style="background:rgba(100, 100, 105, .125);">196</td><td style="background:rgba(100, 100, 105, .125);">402</td><td style="background:rgba(100, 100, 105, .125);">316</td><td style="background:rgba(100, 100, 105, .125);">204</td><td style="background:rgba(100, 100, 105, .125);">75</td><td style="background:rgba(100, 100, 105, .125);">249</td><td style="background:rgba(100, 100, 105, .125);">81</td><td style="background:rgba(100, 100, 105, .125);">67</td><td style="background:rgba(100, 100, 105, .125);">154</td><td style="background:rgba(100, 100, 105, .125);">236</td><td style="background:rgba(100, 100, 105, .125);">69</td>                                            </tr>
    <tr>
        <th scope="row">Response Time (Avg. Adj.)</th>
        <td class="yukiko-blue">1.03</td><td>2.57</td><td>0.75</td><td>1.33</td><td>0.47</td><td>0.77</td><td>0.68</td><td>0.67</td><td>0.27</td><td>1.85</td><td>0.08</td><td>0.25</td><td>2.63</td><td>0.22</td><td>0.48</td><td>0.75</td><td>3.10</td><td>0.33</td><td>0.80</td><td>2.52</td><td>0.12</td>                                           </tr>
    <tr>
        <th scope="row">NC Appointments Set %</th>
        <td class="yukiko-blue">17%</td><td>16%</td><td>21%</td><td>19%</td><td>13%</td><td>8%</td><td>15%</td><td>6%</td><td>24%</td><td>16%</td><td>13%</td><td>15%</td><td>18%</td><td>23%</td><td>31%</td><td>26%</td><td>26%</td><td>14%</td><td>7%</td><td>17%</td><td>13%</td>                                           </tr>
    <tr>
        <th scope="row">NC Appointments Shown %</th>
        <td class="yukiko-blue">65%</td><td>65%</td><td>65%</td><td>54%</td><td>80%</td><td>71%</td><td>68%</td><td>50%</td><td>80%</td><td>77%</td><td>51%</td><td>61%</td><td>68%</td><td>74%</td><td>64%</td><td>59%</td><td>64%</td><td>64%</td><td>54%</td><td>75%</td><td>64%</td>                                            </tr>
    <tr>
        <th scope="row">New Cars Sold (Delivered)</th>
        <td class="yukiko-blue">26</td><td>14</td><td>61</td><td>36</td><td>51</td><td>9</td><td>34</td><td>3</td><td>13</td><td>11</td><td>34</td><td>37</td><td>46</td><td>32</td><td>13</td><td>33</td><td>9</td><td>10</td><td>14</td><td>45</td><td>8</td>                                         </tr>
    <tr>
        <th scope="row" style="background:rgba(100, 100, 105, .125);">New Cars Sold %</th>
        <td class="yukiko-blue">14.55%</td><td style="background:rgba(100, 100, 105, .125);">12.5%</td><td style="background:rgba(100, 100, 105, .125);">20.82%</td><td style="background:rgba(100, 100, 105, .125);">15.06%</td><td style="background:rgba(100, 100, 105, .125);">15%</td><td style="background:rgba(100, 100, 105, .125);">13.85%</td><td style="background:rgba(100, 100, 105, .125);">13.88%</td><td style="background:rgba(100, 100, 105, .125);">10%</td><td style="background:rgba(100, 100, 105, .125);">15.29%</td><td style="background:rgba(100, 100, 105, .125);">16.42%</td><td style="background:rgba(100, 100, 105, .125);">17.35%</td><td style="background:rgba(100, 100, 105, .125);">9.2%</td><td style="background:rgba(100, 100, 105, .125);">14.56%</td><td style="background:rgba(100, 100, 105, .125);">15.69%</td><td style="background:rgba(100, 100, 105, .125);">17.33%</td><td style="background:rgba(100, 100, 105, .125);">13.25%</td><td style="background:rgba(100, 100, 105, .125);">11.11%</td><td style="background:rgba(100, 100, 105, .125);">14.93%</td><td style="background:rgba(100, 100, 105, .125);">9.09%</td><td style="background:rgba(100, 100, 105, .125);">19.07%</td><td style="background:rgba(100, 100, 105, .125);">11.59%</td>                                           </tr>
    <tr>
        <th scope="row">&nbsp;</th>
        <td class="yukiko-blue"> </td>
        <td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td>                                            </tr>
    <tr>
        <th scope="row">Used Car Total Leads</th>
        <td class="yukiko-blue">242</td><td>276</td><td>523</td><td>522</td><td>339</td><td>124</td><td>248</td><td>70</td><td>120</td><td>188</td><td>299</td><td>260</td><td>260</td><td>207</td><td>82</td><td>237</td><td>61</td><td>68</td><td>9</td><td>98</td><td>518</td>                                           </tr>
    <tr>
        <th scope="row">Used Car Dupes</th>
        <td class="yukiko-blue">74</td><td>90</td><td>239</td><td>156</td><td>136</td><td>21</td><td>63</td><td>12</td><td>24</td><td>50</td><td>125</td><td>68</td><td>70</td><td>53</td><td>15</td><td>111</td><td>15</td><td>6</td><td>3</td><td>65</td><td>166</td>                                         </tr>
    <tr>
        <th scope="row" style="background:rgba(100, 100, 105, .125);">Used Car Net Leads</th>
        <td class="yukiko-blue">164</td><td style="background:rgba(100, 100, 105, .125);">186</td><td style="background:rgba(100, 100, 105, .125);">284</td><td style="background:rgba(100, 100, 105, .125);">366</td><td style="background:rgba(100, 100, 105, .125);">203</td><td style="background:rgba(100, 100, 105, .125);">103</td><td style="background:rgba(100, 100, 105, .125);">185</td><td style="background:rgba(100, 100, 105, .125);">58</td><td style="background:rgba(100, 100, 105, .125);">96</td><td style="background:rgba(100, 100, 105, .125);">138</td><td style="background:rgba(100, 100, 105, .125);">174</td><td style="background:rgba(100, 100, 105, .125);">192</td><td style="background:rgba(100, 100, 105, .125);">190</td><td style="background:rgba(100, 100, 105, .125);">154</td><td style="background:rgba(100, 100, 105, .125);">67</td><td style="background:rgba(100, 100, 105, .125);">126</td><td style="background:rgba(100, 100, 105, .125);">46</td><td style="background:rgba(100, 100, 105, .125);">62</td><td style="background:rgba(100, 100, 105, .125);">6</td><td style="background:rgba(100, 100, 105, .125);">33</td><td style="background:rgba(100, 100, 105, .125);">352</td>                                            </tr>
    <tr>
        <th scope="row">Response Time (Avg. Adj.)</th>
        <td class="yukiko-blue">0.95</td><td>0.60</td><td>0.37</td><td>0.58</td><td>1.03</td><td>1.00</td><td>0.43</td><td>2.18</td><td>0.47</td><td>0.18</td><td>0.08</td><td>0.25</td><td>0.33</td><td>0.87</td><td>1.37</td><td>1.48</td><td>2.03</td><td>0.12</td><td>0.53</td><td>3.17</td><td>0.22</td>                                           </tr>
    <tr>
        <th scope="row">UC Appointments Set %</th>
        <td class="yukiko-blue">16%</td><td>26%</td><td>14%</td><td>14%</td><td>12%</td><td>21%</td><td>14%</td><td>13%</td><td>17%</td><td>13%</td><td>10%</td><td>20%</td><td>22%</td><td>17%</td><td>27%</td><td>25%</td><td>21%</td><td>1%</td><td>0%</td><td>7%</td><td>13%</td>                                           </tr>
    <tr>
        <th scope="row">UC Appointments Shown %</th>
        <td class="yukiko-blue">60%</td><td>60%</td><td>53%</td><td>40%</td><td>55%</td><td>73%</td><td>74%</td><td>67%</td><td>60%</td><td>67%</td><td>67%</td><td>41%</td><td>60%</td><td>71%</td><td>73%</td><td>47%</td><td>69%</td><td>0%</td><td>0%</td><td>43%</td><td>66%</td>                                          </tr>
    <tr>
        <th scope="row">Used Cars Sold (Delivered)</th>
        <td class="yukiko-blue">21</td><td>23</td><td>24</td><td>25</td><td>20</td><td>22</td><td>21</td><td>7</td><td>11</td><td>10</td><td>21</td><td>21</td><td>24</td><td>20</td><td>13</td><td>16</td><td>3</td><td>0</td><td>1</td><td>3</td><td>29</td>                                          </tr>
    <tr>
        <th scope="row" style="background:rgba(100, 100, 105, .125);">Used Cars Sold %</th>
        <td class="yukiko-blue">12.63%</td><td style="background:rgba(100, 100, 105, .125);">12.37%</td><td style="background:rgba(100, 100, 105, .125);">8.45%</td><td style="background:rgba(100, 100, 105, .125);">6.83%</td><td style="background:rgba(100, 100, 105, .125);">9.85%</td><td style="background:rgba(100, 100, 105, .125);">21.36%</td><td style="background:rgba(100, 100, 105, .125);">11.35%</td><td style="background:rgba(100, 100, 105, .125);">12.07%</td><td style="background:rgba(100, 100, 105, .125);">11.46%</td><td style="background:rgba(100, 100, 105, .125);">7.25%</td><td style="background:rgba(100, 100, 105, .125);">12.07%</td><td style="background:rgba(100, 100, 105, .125);">10.94%</td><td style="background:rgba(100, 100, 105, .125);">12.63%</td><td style="background:rgba(100, 100, 105, .125);">12.99%</td><td style="background:rgba(100, 100, 105, .125);">19.4%</td><td style="background:rgba(100, 100, 105, .125);">12.7%</td><td style="background:rgba(100, 100, 105, .125);">6.52%</td><td style="background:rgba(100, 100, 105, .125);">0%</td><td style="background:rgba(100, 100, 105, .125);">16.67%</td><td style="background:rgba(100, 100, 105, .125);">9.09%</td><td style="background:rgba(100, 100, 105, .125);">8.24%</td>                                          </tr>
    <tr>
        <th scope="row">&nbsp;</th>
        <td class="yukiko-blue"> </td>
        <td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td><td style="border:none;"> </td>                                            </tr>
    <tr>
        <th scope="row">Total Internet Leads</th>
        <td class="yukiko-blue">286</td><td>502</td><td>1049</td><td>881</td><td>781</td><td>208</td><td>584</td><td>105</td><td>224</td><td>268</td><td>656</td><td>746</td><td>639</td><td>481</td><td>173</td><td>574</td><td>167</td><td>148</td><td>204</td><td>529</td><td>600</td>                      </tr>
    <tr>
        <th scope="row">Dupes</th>
        <td class="yukiko-blue">89</td><td>204</td><td>472</td><td>276</td><td>238</td><td>40</td><td>154</td><td>17</td><td>43</td><td>63</td><td>286</td><td>152</td><td>133</td><td>123</td><td>31</td><td>199</td><td>40</td><td>19</td><td>44</td><td>260</td><td>179</td>                      </tr>
    <tr>
        <th scope="row" style="background:rgba(100, 100, 105, .125);">Total Net Leads</th>
        <td class="yukiko-blue">218</td><td style="background:rgba(100, 100, 105, .125);">298</td><td style="background:rgba(100, 100, 105, .125);">577</td><td style="background:rgba(100, 100, 105, .125);">605</td><td style="background:rgba(100, 100, 105, .125);">543</td><td style="background:rgba(100, 100, 105, .125);">168</td><td style="background:rgba(100, 100, 105, .125);">430</td><td style="background:rgba(100, 100, 105, .125);">88</td><td style="background:rgba(100, 100, 105, .125);">181</td><td style="background:rgba(100, 100, 105, .125);">205</td><td style="background:rgba(100, 100, 105, .125);">370</td><td style="background:rgba(100, 100, 105, .125);">594</td><td style="background:rgba(100, 100, 105, .125);">506</td><td style="background:rgba(100, 100, 105, .125);">358</td><td style="background:rgba(100, 100, 105, .125);">142</td><td style="background:rgba(100, 100, 105, .125);">375</td><td style="background:rgba(100, 100, 105, .125);">127</td><td style="background:rgba(100, 100, 105, .125);">129</td><td style="background:rgba(100, 100, 105, .125);">160</td><td style="background:rgba(100, 100, 105, .125);">269</td><td style="background:rgba(100, 100, 105, .125);">421</td>                      </tr>
    <tr>
        <th scope="row">Response Time (Avg. Adj.)</th>
        <td class="yukiko-blue">0.95</td><td>1.37</td><td>0.55</td><td>0.88</td><td>0.68</td><td>0.92</td><td>0.58</td><td>1.67</td><td>0.38</td><td>0.77</td><td>0.08</td><td>0.25</td><td>1.78</td><td>0.48</td><td>0.93</td><td>1.00</td><td>2.72</td><td>0.23</td><td>0.80</td><td>2.62</td><td>0.20</td>                      </tr>
    <tr>
        <th scope="row">Appointments Set %</th>
        <td class="yukiko-blue">16%</td><td>22%</td><td>17%</td><td>16%</td><td>13%</td><td>16%</td><td>15%</td><td>10%</td><td>20%</td><td>14%</td><td>11%</td><td>16%</td><td>20%</td><td>20%</td><td>29%</td><td>25%</td><td>25%</td><td>8%</td><td>6%</td><td>15%</td><td>13%</td>                      </tr>
    <tr>
        <th scope="row">Appointments Shown %</th>
        <td class="yukiko-blue">61%</td><td>61%</td><td>61%</td><td>47%</td><td>70%</td><td>73%</td><td>71%</td><td>64%</td><td>71%</td><td>70%</td><td>57%</td><td>53%</td><td>65%</td><td>73%</td><td>68%</td><td>54%</td><td>66%</td><td>58%</td><td>54%</td><td>73%</td><td>66%</td>                      </tr>
    <tr>
        <th scope="row">Sold (Delivered)</th>
        <td class="yukiko-blue">28</td><td>37</td><td>85</td><td>61</td><td>71</td><td>31</td><td>55</td><td>10</td><td>24</td><td>21</td><td>55</td><td>58</td><td>70</td><td>52</td><td>26</td><td>49</td><td>12</td><td>10</td><td>15</td><td>48</td><td>37</td>                      </tr>
    <tr>
        <th scope="row" style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">Total Sold %</th>
        <td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">12.63%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">12.42%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">14.73%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">10.08%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">13.08%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">18.45%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">12.79%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">11.36%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">13.26%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">10.24%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">14.86%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">9.76%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">13.83%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">14.53%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">18.31%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">13.07%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">9.45%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">7.75%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">9.38%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">17.84%</td><td style="background:rgba(100, 100, 105, 1); color:rgba(255, 255, 255, 1);">8.79%</td>                      </tr>
    </tbody>
</table>

why this is not sorting all the table what problem is with this code.
Can you please review it and let me know. Thanks

Azeem Haider
  • 1,443
  • 4
  • 23
  • 41

1 Answers1

0

It seems to me that your code is attempting to sort each column individually, which would destroy the integrity of your table, even if the column headers remained in place. For example, that would turn a table like this:

                Cat     Spider     Snake     Ant      Monkey
  CreatureID    5       1          4         2        3
  Legs          4       8          0         6        2
  Population    42      500        123       1024     16

Into this:

                Cat     Spider     Snake     Ant      Monkey          
  CreatureID    1       2          3         4        5
  Legs          0       2          4         6        8
  Population    16      42         123       500      1024


Clearly, the above would be incorrect because (for example), a cat has 4 legs, not zero.

I'm guessing that what you really want to do is sort the entire table by the values in one particular column, while maintaining the integrity of the table. This can be accomplished by first transposing the table, then sorting by rows, then transposing the table once again. For a working example of that process, see this jsfiddle.

A few notes on the fiddle:

  1. I am assuming the "Average" column should not be included in the sort, and should be "frozen" in place along with the row-header column. If that's not desirable, see the comments in the sortTable function.
  2. Your table formatting will not be preserved, but for that you should be using CSS instead of inline styles anyway. I'll leave those changes up to you.
  3. I removed some spaces before the values in your column header row so that column will sort properly (Column Number: 1)
  4. Most importantly, please note that the majority of the work on this fiddle had already been done by others. Much credit goes to @svinto (How to invert (transpose) the rows and columns of an HTML table?) and @rob-w (Sort a table fast by its first column with Javascript or jQuery) for their excellent SO answers, and to the author of tinysort, which is handling the entire sorting process via a single line of code.


For reference, the fiddle uses your original HTML table, with no modifications. It also makes use of these scripts:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.6/tinysort.min.js"></script>
</head>

And this extra HTML:

<span>Column Number:&nbsp;</span><input type="text" id="columnNumber" style="width: 42px;">
<input type="button" id="btnSort1" value="Sort by Column" onclick="sortTableByColumnNumber($('table'), $('#columnNumber').val());" />

And this code:

function sortTableByColumnNumber($table, columnNumber) {
    var $table = $('table');

    transposeTable($table);

    // tinysort($('tr', $table), 'td:nth-of-type(' + columnNumber + ')'); // include "Average" column in sort
    tinysort($('tr', $table).slice(2), 'td:nth-of-type(' + columnNumber + ')'); // exclude "Average" column from sort

    transposeTable($table);

    $('tr:nth-of-type(' + columnNumber + ')').css('background-color', 'lightgreen').css('color', 'black'); // highlight sorted row
}

// source: https://stackoverflow.com/questions/6297591/how-to-invert-transpose-the-rows-and-columns-of-an-html-table
function transposeTable($table) {
    $table.each(function() {
        var $this = $(this);
        var newrows = [];
        $this.find("tr").each(function(){
            var i = 0;
            $(this).find("td, th").each(function(){
                i++;
                if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
                if(i == 1)
                    newrows[i].append("<th>" + this.innerHTML  + "</th>");
                else
                    newrows[i].append("<td>" + this.innerHTML  + "</td>");
            });
        });
        $this.find("tr").remove();
        $.each(newrows, function(){
            $this.append(this);
        });
    });
}

// source: https://stackoverflow.com/questions/7558182/sort-a-table-fast-by-its-first-column-with-javascript-or-jquery
function sortTable(tableId, columnNumber){
    var tbl = document.getElementById(tableId).tBodies[0];
    var store = [];
    for(var i=0, len=tbl.rows.length; i<len; i++){
        var row = tbl.rows[i];

        // var sortnr = parseFloat(row.cells[0].textContent || row.cells[0].innerText);
        // MOD: specify column number, and sort percentages by numberical value instead of by text value
        var sortnr = parseFloat(row.cells[columnNumber].textContent || row.cells[columnNumber].innerText).replace('%', '');

        if(!isNaN(sortnr)) store.push([sortnr, row]);
    }
    store.sort(function(x,y){
        return x[0] - y[0];
    });
    for(var i=0, len=store.length; i<len; i++){
        tbl.appendChild(store[i][1]);
    }
    store = null;
}
Community
  • 1
  • 1
MJH
  • 2,301
  • 7
  • 18
  • 20