Tabelle in jQuery sortieren

Ich möchte die Tabelle mit jQuery sortieren, wobei die Tabellenspalte die Zeilen nicht ändert. Ich schreibe etwas Code, es funktioniert, aber das Problem ist, dass es nur die ersten zehn Spalten sortieren, die ich nicht kenne.Tabelle in jQuery sortieren

Hier ist 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)); 
      }); 
     }); 
    }

Hier ist eine Tabelle.

<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>

warum dies nicht die ganze Tabelle sortiert, welches Problem mit diesem Code ist.
Können Sie es bitte überprüfen und lassen Sie es mich wissen. Danke

Quelle

2016-09-08 Azeem Haider

Es scheint mir, dass Ihr Code versucht, jede Spalte einzeln zu sortieren, die die Integrität Ihrer Tabelle zerstören würde, auch wenn die Spaltenüberschriften an Ort und Stelle blieben. Zum Beispiel würde wiederum, dass eine Tabelle wie folgt aus:

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

In diese:

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

Natürlich wäre die oben falsch sein, weil sie (zum Beispiel) , eine Katze hat 4 Beine, nicht Null.

Ich vermute, dass Sie wirklich die gesamte Tabelle durch die Werte in einer bestimmten Spalte sortieren möchten, während die Integrität der Tabelle beibehalten wird. Dies kann erreicht werden, indem zuerst die Tabelle transponiert wird, dann nach Zeilen sortiert wird und dann die Tabelle erneut transponiert wird. Ein praktisches Beispiel für diesen Prozess finden Sie unter jsfiddle.

Ein paar Noten auf der Geige:

ich die Spalte „Durchschnitt“ gehe davon sollte nicht in der Art enthalten sein und sollte zusammen mit der Zeilenkopfspalte „eingefroren“ an Ort und Stelle sein. Wenn das nicht erwünscht ist, sehen Sie sich die Kommentare in der sortTable Funktion an.
Ihre Tabellenformatierung wird nicht beibehalten, aber dafür sollten Sie trotzdem CSS anstelle von Inline-Stilen verwenden. Ich werde diese Änderungen Ihnen überlassen.
Ich habe einige Leerzeichen vor den Werten in der Spaltenüberschrift entfernt, damit die Spalte richtig sortiert wird (Spaltennummer: 1)
Am wichtigsten ist, dass die meisten Arbeiten an dieser Geige bereits von anderen durchgeführt wurden . Ein großer Dank geht an @svinto (How to invert (transpose) the rows and columns of an HTML table?) und @ rob-w (Sort a table fast by its first column with Javascript or jQuery) für ihre ausgezeichneten SO-Antworten und an den Autor von tinysort, der den gesamten Sortierprozess über eine einzige Codezeile abwickelt.

als Referenz verwendet die Geige ursprüngliche HTML-Tabelle, ohne Modifikationen.Es macht auch die Verwendung dieser Skripte:

<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>

Und diese zusätzlichen 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());" />

diesen 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; 
}

Quelle

2016-09-08 22:53:10 MJH

Tabelle in jQuery sortieren

Antwort

Verwandte Themen