2014-10-28 79 views
1

Html表格排序工作不正常,我在下面的链接上有一个演示。请关注列名 - 行数和sl.no.html表格排序功能不能正常工作

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], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows 
     tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array 
     i; 
    reverse = -((+reverse) || -1); 
    tr = tr.sort(function (a, b) { // sort rows 
     return reverse // `-1 *` if want opposite order 
      * (a.cells[col].textContent.trim() // using `.textContent.trim()` for test 
       .localeCompare(b.cells[col].textContent.trim()) 
       ); 
    }); 
    for(i = 0; i < 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) i = th.length; 
    else return; // if no `<thead>` then do nothing 
    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'), i = 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;} 

回答

2

你的价值观排序为文本。你应该将数值转换为int。使用parseFloat将字符串值转换为数字并对它们进行排序。

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; 
     } 
     return reverse*compar; 
    } 
    ... 
    ... 
... 

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

+0

非常感谢你,它的正常工作..还有一件事是如何添加上下箭头来表示排序点击 – askm3 2014-10-28 06:48:17

+0

这个演示是太复杂了。简而言之:如果比较字符串,“5”将大于“12”,因为“5”>“1”。如果您想正确排序数字项目,则应在比较之前将其转换为数字。 – Heavy 2014-10-28 06:51:49

+0

感谢您的命令,如何在标题上添加上下箭头 – askm3 2014-10-28 06:56:27