html段落自动排序,HTML表格自动排序

jquery-tablesort

table sort

* {

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;

}

ID姓名年龄手机号

1Colin83180714959842Van83134931011853Bryson86139680225554Buzz35133969555435Eve41131629165706May49138276273037Andrew1189724479158Barry81138211800769Zona941820378529910Buddy361382018854911Eve321313652274712Buddy191898883720913Kevin241336979779614Zora581327520771615Hailey161597434989716Bahar951528858646717Bahar601306829633618Joyce711596963042419Angelia161827955486020Lance2715842451834

$(function () {

$("#mytable").tablesort();

$('thead th.number').data('sortBy', function(th, td, sorter) {

return parseInt(td.text(), 10);

});

});

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

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

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

tablesorter

table sort

* {

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;

}

ID姓名年龄手机号

1Colin83180714959842Van83134931011853Bryson86139680225554Buzz35133969555435Eve41131629165706May49138276273037Andrew1189724479158Barry81138211800769Zona941820378529910Buddy361382018854911Eve321313652274712Buddy191898883720913Kevin241336979779614Zora581327520771615Hailey161597434989716Bahar951528858646717Bahar601306829633618Joyce711596963042419Angelia161827955486020Lance2715842451834

$(function () {

$("#mytable").tablesorter();

});

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