jQuery气泡在表上排序

Question

I have got this table that has rows of numbers. Now I want to create a jQuery function that'll sort this table once th is clicked and I want to do that using Bubble Sort. Here is what I've done so far:

var elements_ar = $(this).parent().parent().siblings('tbody').children('tr').toArray();
for (var i = 0; i < elements_ar.length - 1; i++) {
    for (var j = 0; j < elements_ar.length - i - 1; j++) {
        var element = elements_ar[j],
            next_element = elements_ar[j + 1],
            popularity = $(element).children('td:eq(3)').text(),
            next = $(next_element).children('td:eq(3)').text();
        if (popularity > next) {
            $(element).before(next_element);
        }
    }
};

Now this works normal, but not perfect. Some rows are not where they should be as you can see in this full working example:

 $("body").on('click', '.ppl_avp', function(event) { var elements_ar = $(this).parent().parent().siblings('tbody').children('tr').toArray(); for (var i = 0; i < elements_ar.length - 1; i++) { for (var j = 0; j < elements_ar.length - i - 1; j++) { var element = elements_ar[j], next_element = elements_ar[j + 1], popularity = $(element).children('td:eq(3)').text(), next = $(next_element).children('td:eq(3)').text(); if (popularity > next) { $(element).before(next_element); } } }; }); 

 table { font-family: Zona; font-size: 23px; margin-top: 100px; border: 1px solid gray; } table>tbody>tr>td { width: 400px !important; cursor: pointer; } table { margin-bottom: 100px; } td { background: #FFFFFF; padding: 15px; text-align: left; border-right: 1px solid #C1C3D1; } tr:nth-child(odd) td { background: #EBEBEB; } tr:nth-child(odd):hover td { background: #4E5066; } tr:hover td { background: #4E5066; color: #FFFFFF; } tr { border-top: 1px solid #C1C3D1; border-bottom-: 1px solid #C1C3D1; color: #666B85; } th, td { text-align: center; width: 170px; } th { padding: 15px; color: white; background: #1b1e24; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table cellspacing="0" cellpadding="0" class="pl_by_species_table"><tbody><tr><th class="pl_by_sp_th">Id</th> <th class="pl_by_sp_th">Specie</th> <th class="pl_by_sp_th">Number of languages created by species</th> <th class="pl_by_sp_th ppl_avp">Average Popularity</th></tr></tbody><tbody class="languages_row2"><tr class="pl_languages_row2"><td>6</td> <td>Homo Sapiens</td> <td>3</td> <td>802</td></tr> <tr class="pl_languages_row2"><td>32</td> <td>Chrolainee</td> <td>2</td> <td>152</td></tr> <tr class="pl_languages_row2"><td>33</td> <td>Greochovese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>35</td> <td>Eotacenes</td> <td>1</td> <td>157</td></tr> <tr class="pl_languages_row2"><td>36</td> <td>Ochlandinian</td> <td>3</td> <td>263</td></tr> <tr class="pl_languages_row2"><td>37</td> <td>Phibate</td> <td>1</td> <td>191</td></tr> <tr class="pl_languages_row2"><td>39</td> <td>Astrasnern</td> <td>1</td> <td>272</td></tr> <tr class="pl_languages_row2"><td>43</td> <td>Ukohansian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>44</td> <td>Cuhin</td> <td>2</td> <td>153</td></tr> <tr class="pl_languages_row2"><td>45</td> <td>Ninnaine</td> <td>1</td> <td>32</td></tr> <tr class="pl_languages_row2"><td>46</td> <td>Pheopsulian</td> <td>1</td> <td>767</td></tr> <tr class="pl_languages_row2"><td>47</td> <td>Upravvelese</td> <td>1</td> <td>267</td></tr> <tr class="pl_languages_row2"><td>48</td> <td>Aikymdute</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>50</td> <td>Brifeosh</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>52</td> <td>Cridlalian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>53</td> <td>Cujoino</td> <td>2</td> <td>16</td></tr> <tr class="pl_languages_row2"><td>54</td> <td>Ecloileorn</td> <td>1</td> <td>783</td></tr> <tr class="pl_languages_row2"><td>56</td> <td>Eobrycurn</td> <td>3</td> <td>257</td></tr> <tr class="pl_languages_row2"><td>57</td> <td>Istrostino</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>59</td> <td>Jolnensian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>63</td> <td>Nimsish</td> <td>2</td> <td>88</td></tr> <tr class="pl_languages_row2"><td>64</td> <td>Eoqarreate</td> <td>3</td> <td>215</td></tr> <tr class="pl_languages_row2"><td>74</td> <td>Tydnaigian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>77</td> <td>Vacreanin</td> <td>2</td> <td>110</td></tr> <tr class="pl_languages_row2"><td>79</td> <td>Fomsoinin</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>84</td> <td>Crainainan</td> <td>1</td> <td>315</td></tr> <tr class="pl_languages_row2"><td>85</td> <td>Drevonee</td> <td>2</td> <td>293</td></tr> <tr class="pl_languages_row2"><td>86</td> <td>Gaitynee</td> <td>1</td> <td>21</td></tr> <tr class="pl_languages_row2"><td>90</td> <td>Coidevian</td> <td>1</td> <td>691</td></tr> <tr class="pl_languages_row2"><td>91</td> <td>Ocheoklote</td> <td>1</td> <td>325</td></tr> <tr class="pl_languages_row2"><td>93</td> <td>Streangones</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>98</td> <td>Kukrur</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>99</td> <td>Sleohoigian</td> <td>1</td> <td>749</td></tr> <tr class="pl_languages_row2"><td>100</td> <td>Qyphyvian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>101</td> <td>Seakkanes</td> <td>2</td> <td>114</td></tr> <tr class="pl_languages_row2"><td>104</td> <td>Mevlurn</td> <td>1</td> <td>369</td></tr> <tr class="pl_languages_row2"><td>105</td> <td>Preblen</td> <td>1</td> <td>139</td></tr> <tr class="pl_languages_row2"><td>107</td> <td>Cliclonee</td> <td>3</td> <td>295</td></tr> <tr class="pl_languages_row2"><td>111</td> <td>Sulain</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>113</td> <td>Troivveogian</td> <td>4</td> <td>281</td></tr> <tr class="pl_languages_row2"><td>114</td> <td>Jinesh</td> <td>1</td> <td>13</td></tr> <tr class="pl_languages_row2"><td>116</td> <td>Milsat</td> <td>1</td> <td>115</td></tr> <tr class="pl_languages_row2"><td>119</td> <td>Caintavian</td> <td>4</td> <td>250</td></tr> <tr class="pl_languages_row2"><td>120</td> <td>Sujynan</td> <td>1</td> <td>620</td></tr> <tr class="pl_languages_row2"><td>121</td> <td>Vujote</td> <td>1</td> <td>628</td></tr> <tr class="pl_languages_row2"><td>124</td> <td>Dumdesh</td> <td>1</td> <td>31</td></tr> <tr class="pl_languages_row2"><td>125</td> <td>Boirtanin</td> <td>2</td> <td>249</td></tr> <tr class="pl_languages_row2"><td>127</td> <td>Ucrewose</td> <td>1</td> <td>203</td></tr> <tr class="pl_languages_row2"><td>128</td> <td>Shecaise</td> <td>2</td> <td>645</td></tr> <tr class="pl_languages_row2"><td>129</td> <td>Braintene</td> <td>2</td> <td>351</td></tr> <tr class="pl_languages_row2"><td>131</td> <td>Chrilun</td> <td>1</td> <td>145</td></tr> <tr class="pl_languages_row2"><td>133</td> <td>Klaivnino</td> <td>1</td> <td>653</td></tr> <tr class="pl_languages_row2"><td>135</td> <td>Flyner</td> <td>1</td> <td>493</td></tr> <tr class="pl_languages_row2"><td>136</td> <td>Nimnearn</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>138</td> <td>Puwenes</td> <td>1</td> <td>80</td></tr> <tr class="pl_languages_row2"><td>140</td> <td>Icreadluse</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>141</td> <td>Duginin</td> <td>2</td> <td>106</td></tr> <tr class="pl_languages_row2"><td>145</td> <td>Umyfnyvese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>146</td> <td>Recnugian</td> <td>2</td> <td>540</td></tr> <tr class="pl_languages_row2"><td>149</td> <td>Phideolese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>151</td> <td>Ufansteonsian</td> <td>2</td> <td>227</td></tr> <tr class="pl_languages_row2"><td>154</td> <td>Slagrese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>155</td> <td>Oixivneoc</td> <td>2</td> <td>88</td></tr> <tr class="pl_languages_row2"><td>157</td> <td>Uchloklase</td> <td>2</td> <td>642</td></tr> <tr class="pl_languages_row2"><td>158</td> <td>Jesnunee</td> <td>1</td> <td>218</td></tr> <tr class="pl_languages_row2"><td>159</td> <td>Omacynin</td> <td>4</td> <td>321</td></tr> <tr class="pl_languages_row2"><td>161</td> <td>Treshtylese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>163</td> <td>Ugriwut</td> <td>2</td> <td>180</td></tr> <tr class="pl_languages_row2"><td>166</td> <td>Zeadlogian</td> <td>1</td> <td>277</td></tr> <tr class="pl_languages_row2"><td>167</td> <td>Ploigneate</td> <td>1</td> <td>235</td></tr> <tr class="pl_languages_row2"><td>168</td> <td>Sepsyrn</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>170</td> <td>Rimolese</td> <td>2</td> <td>324</td></tr> <tr class="pl_languages_row2"><td>171</td> <td>Grovnane</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>172</td> <td>Chluphesh</td> <td>2</td> <td>279</td></tr> <tr class="pl_languages_row2"><td>173</td> <td>Oiwybur</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>174</td> <td>Blylilian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>175</td> <td>Vlowean</td> <td>6</td> <td>263</td></tr> <tr class="pl_languages_row2"><td>178</td> <td>Walanan</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>181</td> <td>Shutrilian</td> <td>1</td> <td>174</td></tr> <tr class="pl_languages_row2"><td>182</td> <td>Upovnesh</td> <td>2</td> <td>34</td></tr> <tr class="pl_languages_row2"><td>184</td> <td>Qeggose</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>185</td> <td>Stramsenian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>187</td> <td>Eawernenes</td> <td>1</td> <td>150</td></tr> <tr class="pl_languages_row2"><td>188</td> <td>Keslair</td> <td>2</td> <td>265</td></tr> <tr class="pl_languages_row2"><td>191</td> <td>Strobivese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>192</td> <td>Dreolmainee</td> <td>3</td> <td>151</td></tr> <tr class="pl_languages_row2"><td>195</td> <td>Diput</td> <td>1</td> <td>660</td></tr> <tr class="pl_languages_row2"><td>197</td> <td>Ochlislaite</td> <td>2</td> <td>664</td></tr> <tr class="pl_languages_row2"><td>198</td> <td>Bivvir</td> <td>2</td> <td>344</td></tr> <tr class="pl_languages_row2"><td>199</td> <td>Lyglino</td> <td>1</td> <td>114</td></tr> <tr class="pl_languages_row2"><td>200</td> <td>Kejinee</td> <td>2</td> <td>302</td></tr> <tr class="pl_languages_row2"><td>201</td> <td>Vleortunes</td> <td>2</td> <td>314</td></tr> <tr class="pl_languages_row2"><td>202</td> <td>Mulmer</td> <td>4</td> <td>593</td></tr> <tr class="pl_languages_row2"><td>209</td> <td>Judain</td> <td>4</td> <td>675</td></tr> <tr class="pl_languages_row2"><td>210</td> <td>Ubuldugian</td> <td>2</td> <td>271</td></tr> <tr class="pl_languages_row2"><td>211</td> <td>Fripdat</td> <td>1</td> <td>250</td></tr></tbody></table> 

To test it click on the "Average popularity".

Answer 1

The main problem is that you're working from an array, but modifying the DOM when you need to swap. That means that the array and the DOM get out of sync. Instead, sort the array, then update the DOM from the array.

A secondary problem is that you were sorting textually , not numerically . If you sort textually ( lexicographically to be precise, eg, sorting strings), "10" comes before "2" , which you don't want. :-) Instead, coerce or convert the text to number (in any of the several ways you might do that; in the below, I've used a unary + when setting popularity and next to do it).

So:

// *** Get the table body and remember it as we'll want it later
var tbody = $(this).parent().parent().siblings('tbody');
var elements_ar = tbody.children('tr').toArray();
for (var i = 0; i < elements_ar.length - 1; i++) {
    for (var j = 0; j < elements_ar.length - i - 1; j++) {
        var element = elements_ar[j],
            next_element = elements_ar[j + 1],
            popularity = +$(element).children('td:eq(3)').text(),
// Note -----------------^
            next = +$(next_element).children('td:eq(3)').text();
// Note -----------^
        if (popularity > next) {
            // *** Swap them in the array
            elements_ar[j] = next_element;
            elements_ar[j + 1] = element;
        }
    }
};
// *** Update the table body
tbody.html(elements_ar);

Updated snippet:

 $("body").on('click', '.ppl_avp', function(event) { // *** Get the table body and remember it as we'll want it later var tbody = $(this).parent().parent().siblings('tbody'); var elements_ar = tbody.children('tr').toArray(); for (var i = 0; i < elements_ar.length - 1; i++) { for (var j = 0; j < elements_ar.length - i - 1; j++) { var element = elements_ar[j], next_element = elements_ar[j + 1], popularity = +$(element).children('td:eq(3)').text(), // Note -----------------^ next = +$(next_element).children('td:eq(3)').text(); // Note -----------^ if (popularity > next) { // *** Swap them in the array elements_ar[j] = next_element; elements_ar[j + 1] = element; } } }; // *** Update the table body tbody.html(elements_ar); }); 

 table { font-family: Zona; font-size: 23px; margin-top: 100px; border: 1px solid gray; } table>tbody>tr>td { width: 400px !important; cursor: pointer; } table { margin-bottom: 100px; } td { background: #FFFFFF; padding: 15px; text-align: left; border-right: 1px solid #C1C3D1; } tr:nth-child(odd) td { background: #EBEBEB; } tr:nth-child(odd):hover td { background: #4E5066; } tr:hover td { background: #4E5066; color: #FFFFFF; } tr { border-top: 1px solid #C1C3D1; border-bottom-: 1px solid #C1C3D1; color: #666B85; } th, td { text-align: center; width: 170px; } th { padding: 15px; color: white; background: #1b1e24; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table cellspacing="0" cellpadding="0" class="pl_by_species_table"><tbody><tr><th class="pl_by_sp_th">Id</th> <th class="pl_by_sp_th">Specie</th> <th class="pl_by_sp_th">Number of languages created by species</th> <th class="pl_by_sp_th ppl_avp">Average Popularity</th></tr></tbody><tbody class="languages_row2"><tr class="pl_languages_row2"><td>6</td> <td>Homo Sapiens</td> <td>3</td> <td>802</td></tr> <tr class="pl_languages_row2"><td>32</td> <td>Chrolainee</td> <td>2</td> <td>152</td></tr> <tr class="pl_languages_row2"><td>33</td> <td>Greochovese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>35</td> <td>Eotacenes</td> <td>1</td> <td>157</td></tr> <tr class="pl_languages_row2"><td>36</td> <td>Ochlandinian</td> <td>3</td> <td>263</td></tr> <tr class="pl_languages_row2"><td>37</td> <td>Phibate</td> <td>1</td> <td>191</td></tr> <tr class="pl_languages_row2"><td>39</td> <td>Astrasnern</td> <td>1</td> <td>272</td></tr> <tr class="pl_languages_row2"><td>43</td> <td>Ukohansian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>44</td> <td>Cuhin</td> <td>2</td> <td>153</td></tr> <tr class="pl_languages_row2"><td>45</td> <td>Ninnaine</td> <td>1</td> <td>32</td></tr> <tr class="pl_languages_row2"><td>46</td> <td>Pheopsulian</td> <td>1</td> <td>767</td></tr> <tr class="pl_languages_row2"><td>47</td> <td>Upravvelese</td> <td>1</td> <td>267</td></tr> <tr class="pl_languages_row2"><td>48</td> <td>Aikymdute</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>50</td> <td>Brifeosh</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>52</td> <td>Cridlalian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>53</td> <td>Cujoino</td> <td>2</td> <td>16</td></tr> <tr class="pl_languages_row2"><td>54</td> <td>Ecloileorn</td> <td>1</td> <td>783</td></tr> <tr class="pl_languages_row2"><td>56</td> <td>Eobrycurn</td> <td>3</td> <td>257</td></tr> <tr class="pl_languages_row2"><td>57</td> <td>Istrostino</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>59</td> <td>Jolnensian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>63</td> <td>Nimsish</td> <td>2</td> <td>88</td></tr> <tr class="pl_languages_row2"><td>64</td> <td>Eoqarreate</td> <td>3</td> <td>215</td></tr> <tr class="pl_languages_row2"><td>74</td> <td>Tydnaigian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>77</td> <td>Vacreanin</td> <td>2</td> <td>110</td></tr> <tr class="pl_languages_row2"><td>79</td> <td>Fomsoinin</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>84</td> <td>Crainainan</td> <td>1</td> <td>315</td></tr> <tr class="pl_languages_row2"><td>85</td> <td>Drevonee</td> <td>2</td> <td>293</td></tr> <tr class="pl_languages_row2"><td>86</td> <td>Gaitynee</td> <td>1</td> <td>21</td></tr> <tr class="pl_languages_row2"><td>90</td> <td>Coidevian</td> <td>1</td> <td>691</td></tr> <tr class="pl_languages_row2"><td>91</td> <td>Ocheoklote</td> <td>1</td> <td>325</td></tr> <tr class="pl_languages_row2"><td>93</td> <td>Streangones</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>98</td> <td>Kukrur</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>99</td> <td>Sleohoigian</td> <td>1</td> <td>749</td></tr> <tr class="pl_languages_row2"><td>100</td> <td>Qyphyvian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>101</td> <td>Seakkanes</td> <td>2</td> <td>114</td></tr> <tr class="pl_languages_row2"><td>104</td> <td>Mevlurn</td> <td>1</td> <td>369</td></tr> <tr class="pl_languages_row2"><td>105</td> <td>Preblen</td> <td>1</td> <td>139</td></tr> <tr class="pl_languages_row2"><td>107</td> <td>Cliclonee</td> <td>3</td> <td>295</td></tr> <tr class="pl_languages_row2"><td>111</td> <td>Sulain</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>113</td> <td>Troivveogian</td> <td>4</td> <td>281</td></tr> <tr class="pl_languages_row2"><td>114</td> <td>Jinesh</td> <td>1</td> <td>13</td></tr> <tr class="pl_languages_row2"><td>116</td> <td>Milsat</td> <td>1</td> <td>115</td></tr> <tr class="pl_languages_row2"><td>119</td> <td>Caintavian</td> <td>4</td> <td>250</td></tr> <tr class="pl_languages_row2"><td>120</td> <td>Sujynan</td> <td>1</td> <td>620</td></tr> <tr class="pl_languages_row2"><td>121</td> <td>Vujote</td> <td>1</td> <td>628</td></tr> <tr class="pl_languages_row2"><td>124</td> <td>Dumdesh</td> <td>1</td> <td>31</td></tr> <tr class="pl_languages_row2"><td>125</td> <td>Boirtanin</td> <td>2</td> <td>249</td></tr> <tr class="pl_languages_row2"><td>127</td> <td>Ucrewose</td> <td>1</td> <td>203</td></tr> <tr class="pl_languages_row2"><td>128</td> <td>Shecaise</td> <td>2</td> <td>645</td></tr> <tr class="pl_languages_row2"><td>129</td> <td>Braintene</td> <td>2</td> <td>351</td></tr> <tr class="pl_languages_row2"><td>131</td> <td>Chrilun</td> <td>1</td> <td>145</td></tr> <tr class="pl_languages_row2"><td>133</td> <td>Klaivnino</td> <td>1</td> <td>653</td></tr> <tr class="pl_languages_row2"><td>135</td> <td>Flyner</td> <td>1</td> <td>493</td></tr> <tr class="pl_languages_row2"><td>136</td> <td>Nimnearn</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>138</td> <td>Puwenes</td> <td>1</td> <td>80</td></tr> <tr class="pl_languages_row2"><td>140</td> <td>Icreadluse</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>141</td> <td>Duginin</td> <td>2</td> <td>106</td></tr> <tr class="pl_languages_row2"><td>145</td> <td>Umyfnyvese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>146</td> <td>Recnugian</td> <td>2</td> <td>540</td></tr> <tr class="pl_languages_row2"><td>149</td> <td>Phideolese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>151</td> <td>Ufansteonsian</td> <td>2</td> <td>227</td></tr> <tr class="pl_languages_row2"><td>154</td> <td>Slagrese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>155</td> <td>Oixivneoc</td> <td>2</td> <td>88</td></tr> <tr class="pl_languages_row2"><td>157</td> <td>Uchloklase</td> <td>2</td> <td>642</td></tr> <tr class="pl_languages_row2"><td>158</td> <td>Jesnunee</td> <td>1</td> <td>218</td></tr> <tr class="pl_languages_row2"><td>159</td> <td>Omacynin</td> <td>4</td> <td>321</td></tr> <tr class="pl_languages_row2"><td>161</td> <td>Treshtylese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>163</td> <td>Ugriwut</td> <td>2</td> <td>180</td></tr> <tr class="pl_languages_row2"><td>166</td> <td>Zeadlogian</td> <td>1</td> <td>277</td></tr> <tr class="pl_languages_row2"><td>167</td> <td>Ploigneate</td> <td>1</td> <td>235</td></tr> <tr class="pl_languages_row2"><td>168</td> <td>Sepsyrn</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>170</td> <td>Rimolese</td> <td>2</td> <td>324</td></tr> <tr class="pl_languages_row2"><td>171</td> <td>Grovnane</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>172</td> <td>Chluphesh</td> <td>2</td> <td>279</td></tr> <tr class="pl_languages_row2"><td>173</td> <td>Oiwybur</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>174</td> <td>Blylilian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>175</td> <td>Vlowean</td> <td>6</td> <td>263</td></tr> <tr class="pl_languages_row2"><td>178</td> <td>Walanan</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>181</td> <td>Shutrilian</td> <td>1</td> <td>174</td></tr> <tr class="pl_languages_row2"><td>182</td> <td>Upovnesh</td> <td>2</td> <td>34</td></tr> <tr class="pl_languages_row2"><td>184</td> <td>Qeggose</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>185</td> <td>Stramsenian</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>187</td> <td>Eawernenes</td> <td>1</td> <td>150</td></tr> <tr class="pl_languages_row2"><td>188</td> <td>Keslair</td> <td>2</td> <td>265</td></tr> <tr class="pl_languages_row2"><td>191</td> <td>Strobivese</td> <td>0</td> <td>0</td></tr> <tr class="pl_languages_row2"><td>192</td> <td>Dreolmainee</td> <td>3</td> <td>151</td></tr> <tr class="pl_languages_row2"><td>195</td> <td>Diput</td> <td>1</td> <td>660</td></tr> <tr class="pl_languages_row2"><td>197</td> <td>Ochlislaite</td> <td>2</td> <td>664</td></tr> <tr class="pl_languages_row2"><td>198</td> <td>Bivvir</td> <td>2</td> <td>344</td></tr> <tr class="pl_languages_row2"><td>199</td> <td>Lyglino</td> <td>1</td> <td>114</td></tr> <tr class="pl_languages_row2"><td>200</td> <td>Kejinee</td> <td>2</td> <td>302</td></tr> <tr class="pl_languages_row2"><td>201</td> <td>Vleortunes</td> <td>2</td> <td>314</td></tr> <tr class="pl_languages_row2"><td>202</td> <td>Mulmer</td> <td>4</td> <td>593</td></tr> <tr class="pl_languages_row2"><td>209</td> <td>Judain</td> <td>4</td> <td>675</td></tr> <tr class="pl_languages_row2"><td>210</td> <td>Ubuldugian</td> <td>2</td> <td>271</td></tr> <tr class="pl_languages_row2"><td>211</td> <td>Fripdat</td> <td>1</td> <td>250</td></tr></tbody></table> 

Answer 2

You can use sort() on a jQuery collection and then append that whole collection after sorting. Following is only configured for numeric sort but will also reverse each time heading is clicked by checking for a toggled class on the heading

$("body").on('click', '.ppl_avp', function(event) {
  var $th = $(this),
    $tbody = $th.closest('table').find('tbody.languages_row2'),
    $rows = $tbody.children(),
    colIdx = $(this).index(),
    isAscending = $th.hasClass('ascend');
  // only configured for numeric sort    
  $rows.sort(function(rowA, rowB) {
    var valA = $(rowA).find('td').eq(colIdx).text().trim(),
        valB = $(rowB).find('td').eq(colIdx).text().trim();
    return isAscending ? valB - valA : valA - valB;
  });
  // append sorted collection
  $tbody.append($rows);
  $th.toggleClass('ascend')
});

DEMO