HTML表格自动排序

jquery-tablesort

jquery-tablesort下载地址

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>table sort</title><style type="text/css">* {margin: 0;padding: 0;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;color: #4f6b72;background: #E6EAE9;}#container {display: flex;align-items: center;justify-content: center;width: 100vw;margin: 0 auto;}table {width: 90%;max-width: 500px;font-size: 18px;text-align: center;margin-top: 50px;}th {color: white;font-size: 20px;border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;border-top: 1px solid #C1DAD7;text-transform: uppercase;background:#b6b6f0;;}tr{height: 45px;}tr:nth-child(odd){background: #e6e6fa;}tr:nth-child(even){background:#fff0f5;}td {border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;color: #4f6b72;}</style>
</head><body><div id="container"><table id="mytable" class="tablesorter"><thead><tr><th class="number">ID</th><th>姓名</th><th class="number">年龄</th><th>手机号</th></tr></thead><tbody><tr><td>1</td><td>Colin</td><td>83</td><td>18071495984</td></tr><tr><td>2</td><td>Van</td><td>83</td><td>13493101185</td></tr><tr><td>3</td><td>Bryson</td><td>86</td><td>13968022555</td></tr><tr><td>4</td><td>Buzz</td><td>35</td><td>13396955543</td></tr><tr><td>5</td><td>Eve</td><td>41</td><td>13162916570</td></tr><tr><td>6</td><td>May</td><td>49</td><td>13827627303</td></tr><tr><td>7</td><td>Andrew</td><td>1</td><td>18972447915</td></tr><tr><td>8</td><td>Barry</td><td>81</td><td>13821180076</td></tr><tr><td>9</td><td>Zona</td><td>94</td><td>18203785299</td></tr><tr><td>10</td><td>Buddy</td><td>36</td><td>13820188549</td></tr><tr><td>11</td><td>Eve</td><td>32</td><td>13136522747</td></tr><tr><td>12</td><td>Buddy</td><td>19</td><td>18988837209</td></tr><tr><td>13</td><td>Kevin</td><td>24</td><td>13369797796</td></tr><tr><td>14</td><td>Zora</td><td>58</td><td>13275207716</td></tr><tr><td>15</td><td>Hailey</td><td>16</td><td>15974349897</td></tr><tr><td>16</td><td>Bahar</td><td>95</td><td>15288586467</td></tr><tr><td>17</td><td>Bahar</td><td>60</td><td>13068296336</td></tr><tr><td>18</td><td>Joyce</td><td>71</td><td>15969630424</td></tr><tr><td>19</td><td>Angelia</td><td>16</td><td>18279554860</td></tr><tr><td>20</td><td>Lance</td><td>27</td><td>15842451834</td></tr>                </tbody></table></div>
</body>
</html>
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.tablesort.min.js"></script>
<script type="text/javascript">$(function () {$("#mytable").tablesort();$('thead th.number').data('sortBy', function(th, td, sorter) {return parseInt(td.text(), 10);});});
</script>

tablesort默认是使用字符串排序，可以通过将某列转换为具体的类型来实现自定义排序。

例如，上面例子中将指定的列转换为int类型再进行排序。

注意：必须包含THEAD和TBODY，否则表头也会参与排序。

tablesorter

tablesorter文档
tablesorter下载
tablesorter示例

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>table sort</title><style type="text/css">* {margin: 0;padding: 0;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;color: #4f6b72;background: #E6EAE9;}#container {display: flex;align-items: center;justify-content: center;width: 100vw;margin: 0 auto;}table {width: 90%;max-width: 500px;font-size: 18px;text-align: center;margin-top: 50px;}th {color: white;font-size: 20px;border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;border-top: 1px solid #C1DAD7;text-transform: uppercase;background: #b6b6f0;;}tr {height: 45px;}tr:nth-child(odd) {background: #e6e6fa;}tr:nth-child(even) {background: #fff0f5;}td {border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;color: #4f6b72;}</style>
</head><body><div id="container"><table id="mytable" class="tablesorter"><thead><tr><th class="number">ID</th><th>姓名</th><th class="number">年龄</th><th>手机号</th></tr></thead><tbody><tr><td>1</td><td>Colin</td><td>83</td><td>18071495984</td></tr><tr><td>2</td><td>Van</td><td>83</td><td>13493101185</td></tr><tr><td>3</td><td>Bryson</td><td>86</td><td>13968022555</td></tr><tr><td>4</td><td>Buzz</td><td>35</td><td>13396955543</td></tr><tr><td>5</td><td>Eve</td><td>41</td><td>13162916570</td></tr><tr><td>6</td><td>May</td><td>49</td><td>13827627303</td></tr><tr><td>7</td><td>Andrew</td><td>1</td><td>18972447915</td></tr><tr><td>8</td><td>Barry</td><td>81</td><td>13821180076</td></tr><tr><td>9</td><td>Zona</td><td>94</td><td>18203785299</td></tr><tr><td>10</td><td>Buddy</td><td>36</td><td>13820188549</td></tr><tr><td>11</td><td>Eve</td><td>32</td><td>13136522747</td></tr><tr><td>12</td><td>Buddy</td><td>19</td><td>18988837209</td></tr><tr><td>13</td><td>Kevin</td><td>24</td><td>13369797796</td></tr><tr><td>14</td><td>Zora</td><td>58</td><td>13275207716</td></tr><tr><td>15</td><td>Hailey</td><td>16</td><td>15974349897</td></tr><tr><td>16</td><td>Bahar</td><td>95</td><td>15288586467</td></tr><tr><td>17</td><td>Bahar</td><td>60</td><td>13068296336</td></tr><tr><td>18</td><td>Joyce</td><td>71</td><td>15969630424</td></tr><tr><td>19</td><td>Angelia</td><td>16</td><td>18279554860</td></tr><tr><td>20</td><td>Lance</td><td>27</td><td>15842451834</td></tr></tbody></table></div>
</body></html>
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript">$(function () {$("#mytable").tablesorter();});
</script>

tablesorter可以看作是jquery-tablesort的升级版，最重要的就是可以自动探测数据类型。

HTML表格自动排序相关推荐

JS实现点击表头表格自动排序（含数字、字符串、日期）
<!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h ...
NetTiers学习笔记09---RADGrid + EntityDataSource设置默认排序, 及表格自动排序,分页的方法...
前段时间虽然解决了排序和分页的问题,但始终没有解决默认排序的问题, 起初一直把焦点放在EntityDataSource的排序默认值上,但始终搞不定, 今天又花了不少时间Google和研究,终于通过设置 ...
html 表格自动排序,jQuery html表格排序插件tablesorter使用方法详解
tablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载j ...
html自动排序数字,JS实现点击表头表格自动排序（含数字、字符串、日期）
效果图如下: Demo演示地址:点击这里主要的JS代码如下: var tbody = document.querySelector('#tableSort').tBodies[0]; var th ...
elemet-ui后台表格自动排序解决办法
加上sortable="custom" <el-table-column prop="fdcName" label="组合名称" wi ...
办公软件小技巧:Excel表格自动排序
转自:http://www.pinlue.com/article/2020/12/0610/5111389475030.html
angular ts 表格_Angular2表格/可排序/table
Angular2表格 1. 官网下载Angular2开发环境,以及给出的quickstart代码示例demo(地址如下),具体步骤不在详述. https://github.com/angular/qu ...
vba 自动排序_学会这个Excel表格技巧之后，立刻实现自动排序，太牛了
怎么实现自动排序呢?老师从网上下载的2018年各大城市最新平均工资排行表当我改动其中一个城市的平均工资时,比如广州由7965改为10000,整个表格的顺序会自动调整: 是不是很神奇的样子,怎么做到的 ...
php表格单元格怎么实现排序,excel表格数据怎么自动排列-excel表格如何实现自动排序...
excel表格如何实现自动排序 1.首先打excel表格,在第一个单中输入星期,如图所示. 2.在单元格下面的单元入星期一,鼠标放在星期一单元格的右下角. 3.完成以上步骤后,鼠标不放,即自动排序出现 ...

HTML表格自动排序

jquery-tablesort

tablesorter

HTML表格自动排序相关推荐

最新文章

热门文章