javascript - html table sort function is not working properly -

javascript - html table sort function is not working properly -

html table sorting not working properly, have demo on below link. please focus columns names - row count , sl.no.

jsfiddle demo

html:

<table> <thead> <tr height=50> <th>sl.no</th> <th>database name</th> <th>table name</th> <th>table size in mb</th> <th>table size in gb</th> <th>unused space in mb</th> <th>engine type</th> <th>row count</th> <th>time</th> </tr></thead> <tbody> <tr height=30><td align='center' valign='middle'>1</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>attractions</td><td align='center' valign='middle'>0.42</td><td align='center' valign='middle'>0.00041015625</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>726</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>2</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>attractionstype</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>11</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>3</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>attractionstype_lang</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>43</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>4</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>attractions_lang</td><td align='center' valign='middle'>1.52</td><td align='center' valign='middle'>0.001484375</td><td align='center' valign='middle'>4</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>2359</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>5</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>category</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>4</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>6</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>category_lang</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>16</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>7</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>city</td><td align='center' valign='middle'>0.3</td><td align='center' valign='middle'>0.00029296875</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>1596</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>8</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>cityhotelcategorymaping</td><td align='center' valign='middle'>0.06</td><td align='center' valign='middle'>5.859375e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>5</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>9</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>city_lang</td><td align='center' valign='middle'>0.42</td><td align='center' valign='middle'>0.00041015625</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>374</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>10</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>cloudinaryphoto</td><td align='center' valign='middle'>0.22</td><td align='center' valign='middle'>0.00021484375</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>397</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>11</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>country</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>myisam</td><td align='center' valign='middle'>4</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>12</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>country_lang</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>12</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>13</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>currency</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>2</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>14</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>currency_lang</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>8</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>15</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>homeblockpackages</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>12</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>16</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>homeblocks</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>3</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>17</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>homeblocks_lang</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>9</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>18</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>homefront</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>5</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>19</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>homefronttype</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>6</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>20</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>homefront_lang</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>15</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>21</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>homepagefooterlinks</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>2</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>22</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>homepagepkglinks</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>8</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>23</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>homepagepkglinkspackages</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>48</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>24</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>homepagepkglinks_lang</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>25</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>25</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>hotel</td><td align='center' valign='middle'>0.19</td><td align='center' valign='middle'>0.000185546875</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>320</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>26</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>hotel_lang</td><td align='center' valign='middle'>1.52</td><td align='center' valign='middle'>0.001484375</td><td align='center' valign='middle'>4</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>715</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>27</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>image</td><td align='center' valign='middle'>0.06</td><td align='center' valign='middle'>5.859375e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>28</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>language</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>7</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>29</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>newsletter</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>81</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>30</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>package</td><td align='center' valign='middle'>0.2</td><td align='center' valign='middle'>0.0001953125</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>50</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>31</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>packageattractions</td><td align='center' valign='middle'>0.03</td><td align='center' valign='middle'>2.9296875e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>32</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>packagecity</td><td align='center' valign='middle'>0.31</td><td align='center' valign='middle'>0.000302734375</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>394</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>33</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>packagecity_lang</td><td align='center' valign='middle'>0.47</td><td align='center' valign='middle'>0.000458984375</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>602</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>34</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>packagehotel</td><td align='center' valign='middle'>0.09</td><td align='center' valign='middle'>8.7890625e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>507</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>35</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>packagemapdisplay</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>7</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>36</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>packagepricing</td><td align='center' valign='middle'>0.05</td><td align='center' valign='middle'>4.8828125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>37</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>packagerouting</td><td align='center' valign='middle'>0.05</td><td align='center' valign='middle'>4.8828125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>323</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>38</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>packagetheme</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>125</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>39</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>package_lang</td><td align='center' valign='middle'>1.52</td><td align='center' valign='middle'>0.001484375</td><td align='center' valign='middle'>4</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>196</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>40</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>pricing</td><td align='center' valign='middle'>0.03</td><td align='center' valign='middle'>2.9296875e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>41</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>pricingamount</td><td align='center' valign='middle'>0.05</td><td align='center' valign='middle'>4.8828125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>601</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>42</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>pricingdaterange</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>122</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>43</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>query</td><td align='center' valign='middle'>0.16</td><td align='center' valign='middle'>0.00015625</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>207</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>44</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>seo</td><td align='center' valign='middle'>0.05</td><td align='center' valign='middle'>4.8828125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>59</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>45</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>state</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>myisam</td><td align='center' valign='middle'>16</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>46</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>state_lang</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>48</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>47</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>staticcontent</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>2</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>48</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>theme</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>12</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>49</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>theme_lang</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>36</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr><tr height=30><td align='center' valign='middle'>50</td><td align='center' valign='middle'>holidayindia</td><td align='center' valign='middle'>user</td><td align='center' valign='middle'>0.02</td><td align='center' valign='middle'>1.953125e-05</td><td align='center' valign='middle'>0</td><td align='center' valign='middle'>innodb</td><td align='center' valign='middle'>17</td><td align='center' valign='middle'>2014-10-26 23:11:15</td></tr></tbody></table>

javascript:

function sorttable(table, col, reverse) { var tb = table.tbodies[0], // utilize `<tbody>` ignore `<thead>` , `<tfoot>` rows tr = array.prototype.slice.call(tb.rows, 0), // set rows array i; reverse = -((+reverse) || -1); tr = tr.sort(function (a, b) { // sort rows homecoming reverse // `-1 *` if want opposite order * (a.cells[col].textcontent.trim() // using `.textcontent.trim()` test .localecompare(b.cells[col].textcontent.trim()) ); }); for(i = 0; < tr.length; ++i) tb.appendchild(tr[i]); // append each row in order } function makesortable(table) { var th = table.thead, i; th && (th = th.rows[0]) && (th = th.cells); if (th) = th.length; else return; // if no `<thead>` nil while (--i >= 0) (function (i) { var dir = 1; th[i].addeventlistener('click', function () {sorttable(table, i, (dir = 1 - dir))}); }(i)); } function makeallsortable(parent) { parent = parent || document.body; var t = parent.getelementsbytagname('table'), = t.length; while (--i >= 0) makesortable(t[i]); } window.onload = function () {makeallsortable();};

css:

table {width: 100%;font: 12px arial;} th, td {min-width: 40px;text-align: center;} th {font-weight: bold;cursor:pointer;}

your values sorted text. should convert numeric values int. utilize parsefloat convert string values numeric , sort them.

tr = tr.sort(function (a, b) { // sort rows str_a = a.cells[col].textcontent.trim() str_b = b.cells[col].textcontent.trim() val_a = parsefloat(str_a) val_b = parsefloat(str_b) if(!isnan(val_a) && !isnan(val_b)){ var compar; if(val_a < val_b){ compar = -1; }else if(val_a > val_b){ compar = 1; }else{ compar = 0; } homecoming reverse*compar; } ... ... ...

http://jsfiddle.net/46xndqfp/1/

javascript html