1. 技术文章
  2. HTML表格自动排序

HTML表格自动排序

由 [亡魂溺海] 提交于 2020-12-08 21:55:05

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的升级版，最重要的就是可以自动探测数据类型。

相关资源下载

标签
tablesorter
tablesort
github
eve
jquery
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!