基于jquery实现table内部数据排序-优快云博客

本文介绍了一种通过客户端实现表格数据排序的方法，相较于服务器端排序，该方法效率更高。通过使用jQuery.tablesorter插件，实现了HTML表格数据的动态排序功能，并提供了一个具体的测试示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚写的，资源连接http://d.download.youkuaiyun.com/down/1012531/lihan6415151528

关键意义在于这种排序方式比服务器代码排序要效率高的多，比同种客户端flex排序也不错

测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <mce:script src="jquery.js" mce_src="jquery.js" type="text/javascript"></mce:script> <mce:script src="custom.js" mce_src="custom.js" type="text/javascript"></mce:script> <mce:script src="jquery.tablesorter.js" mce_src="jquery.tablesorter.js" type="text/javascript"></mce:script> </head> <mce:script language="javascript"></mce:script> <body> <div align="center">李晗jquery测试sort talbe数据</div> <table align="center" id="large" width="453" height="414" border="1"> <tr bgcolor="#009933"> <td nowrap="nowrap" width="43">编号</td> <td nowrap="nowrap" width="51">姓名</td> <td nowrap="nowrap" width="65">邮编</td> <td nowrap="nowrap" width="81">email</td> <td nowrap="nowrap" width="98">数量</td> <td nowrap="nowrap" width="75">手机</td> </tr> <tr> <td>1</td> <td>李晗</td> <td>050001</td> <td>asddsaf@163.com</td> <td>213</td> <td>13273191079</td> </tr> <tr> <td>2</td> <td>李三</td> <td>343243</td> <td>fdgdfgdf@132.com</td> <td>435</td> <td>13373191079</td> </tr> <tr> <td>3</td> <td>礼物</td> <td>453453</td> <td>rytrytr@163.com</td> <td>54645</td> <td>13789083772</td> </tr> <tr> <td>4</td> <td>张涵</td> <td>234567</td> <td>aaaaaa@126.com</td> <td>324</td> <td>13457765432</td> </tr> <tr> <td>5</td> <td>张思</td> <td>123455</td> <td>lihan@132.com</td> <td>123</td> <td>13578990843</td> </tr> <tr> <td>6</td> <td>张武</td> <td>457899</td> <td>lihan@163.com</td> <td>234</td> <td>15643222445</td> </tr> <tr> <td>7</td> <td>张六</td> <td>998</td> <td>lihan@126.com</td> <td>4654</td> <td>12134564332</td> </tr> <tr> <td>8</td> <td>吴飞</td> <td>787565</td> <td>lihan@gmail.com</td> <td>888</td> <td>13784322457</td> </tr> <tr> <td>9</td> <td>无一</td> <td>324324</td> <td>sadsf@gmail.com</td> <td>666</td> <td>15973228990</td> </tr> <tr> <td>10</td> <td>无误</td> <td>234345</td> <td>a</td> <td>324</td> <td>15294738929</td> </tr> <tr> <td>11</td> <td>李晗</td> <td>5765778</td> <td>bssfdfd</td> <td>23</td> <td>13585939002</td> </tr> <tr> <td>12</td> <td>李梦</td> <td>7969999</td> <td>fdgfhfg</td> <td>1</td> <td>14245678897</td> </tr> <tr> <td>13</td> <td>李飞</td> <td>324324</td> <td>hddhg</td> <td>9789</td> <td>13245677885</td> </tr> <tr> <td>14</td> <td>理想</td> <td>3244546</td> <td>dfhg</td> <td>213</td> <td>13134556778</td> </tr> <tr> <td>15</td> <td>远大</td> <td>546578</td> <td>retert</td> <td>43534</td> <td>13097655332</td> </tr> <tr> <td>16</td> <td>是吗</td> <td>000887</td> <td>dfgdfgdf</td> <td>657</td> <td>13985543324</td> </tr> <tr> <td>17</td> <td>是的</td> <td>67634543</td> <td>lihan</td> <td>234</td> <td>13245468065</td> </tr> <tr> <td>18</td> <td>阿门</td> <td>3242356</td> <td>lihan</td> <td>234</td> <td>13245565768</td> </tr> <tr> <td>19</td> <td>测试</td> <td>3543543</td> <td>lihan</td> <td>123</td> <td>13457789900</td> </tr> </table> </body> </html>