HTML表格自动排序

最新推荐文章于 2022-03-31 15:59:42 发布
最新推荐文章于 2022-03-31 15:59:42 发布
阅读量3.7k 收藏 9
点赞数
分类专栏： 前端 文章标签： tablesorter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/trayvontang/article/details/110879975
版权

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

相关资源下载

trayvontang
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html代码自动排列,实现HTML自动排版的法则_html
weixin_30518613的博客
05-30 3246
简介：我们将网页或html应用程序国际化时，需要将它们翻译成多种语言版本。如何做到文本在转化后，自动调整页面中各个单元位置，间距和尺寸呢？这听起来似乎很难，但是如果按照本文讲述的几条法则去建立HTML页面，你就会相信这是事实，这几条法则能够省去本地化工作人员的很多麻烦。注：本文中的对话框是指包含基本交互控件的web页面，由于其风格与WIN32的对话框非常相似所以也称之为对话框。引言：不久前大多数在...
html排序类型,JS HTML TABLE 排序
weixin_36002026的博客
06-07 292
介绍一个非常使用的table排序JS// 排序 tableId: 表的id;iCol: 第几列;dataType：iCol对应的列显示数据的数据类型，神奇的排序 JS 插件// 使用该 js 前提 , 所有的数据类型 即 dataType 一定要正确， iCol是从 0 开始的这点需要注意 , 另外排序行一定要是 thead , 数据一定要使用 tbody// dataType 可用来扩展支持各种...
HTML中的table里面的元素排序
热门推荐
yangxin_blog的专栏
10-14 1万+
我们在上网中都能看到很多能够排序的，如大小，时间等 现在我们也试一下排序功能： 排序的函数代码：里面含有点击之后排序--还原，和排升序和降序 function sortAge(){ //对年龄进行排序，要先进行获得每一行对象，然后对象对象中的第一个（从0 开始）的大小进行排序 var tabNode = document.getElementById("tabid");
element控件table的排序功能(sortable=“custom“远程排序即在后台排序)
yigeboke的博客
02-18 6044
首先在el-table标签内添加监听事件 @sort-change="SortChange" 然后再要排序的列标签上添加参数 sortable="custom" 页面上只需要改动这两处 js方法 这是排序箭头触发的事件(即table中添加的监听事件) // table排序箭头变化时触发 SortChange(column, prop, order){ // 在方法触发时先获取并保存接口需要的字段,调用分页方法,分页方法中掉用了获取列表数据方法...
HTML表格自动排序「HTML Table Auto Sort」-crx插件
03-21
点击<th>标记按照升序/降序重新排列HTML表的行数。 ###重要内容###启用后，点击表格标题（“ 支持语言:English
tablesorter实现HTML表格点击表头排序
04-01
`tablesorter`是一个非常实用的JavaScript库，它为HTML表格提供了强大的排序功能，不仅适用于纯HTML页面，也兼容JSP、PHP等服务器端渲染技术。 `tablesorter`的核心功能在于它能够监听表格的表头（thead）点击事件...
原生js table表格自动排序效果
06-29
在给定的资源中，“原生js table表格自动排序效果”提供了一个无需依赖任何外部库（如jQuery或lodash）的解决方案。下面我们将详细探讨这个功能的实现原理和相关知识点。 首先，`index.html`文件是网页的结构部分，...
漂亮的表格css+html
03-20
1. **HTML表格基础**： - `<table>`标签：用于定义表格，是构建表格的基本元素。 - `<thead>`：定义表格的表头部分，通常包含列的标题。 - `<tbody>`：定义表格的主体部分，包含表格的数据行。 - `<tr>`：定义...
原生js table表格插件制作表格自动排序效果
11-11
原生JS实现的table表格插件能够提供丰富的功能，比如表格数据的自动排序。这个插件可以帮助开发者为用户提供更加直观、高效的体验，无需依赖任何外部库，如jQuery或其他重型框架。下面将详细介绍如何利用原生...
JavaScript html js Table排序
yangdayin的专栏
12-13 1159
JavaScript html js Table排序   2009-06-15 12:08:06|  分类： JS |  标签： |字号大中小 订阅 程序的实现的是在客户端对表格进行排序，有以下特点： 1.自定义排序列、排序属性（例如innerHTML）、排序数据类型（包括int、float、date、string）、排序顺序（顺序和倒序）； 2.自定义排序函数；
html表格table的表头排序，js代码fastunit使用案例
02-16
html表格table的表头排序，js代码fastunit使用案例
页面上实现表格数据排序
BEYOND的博客
03-21 2717
源码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;style&gt; .table{ width: 400px; height: 180px; margin: auto; text-align: center; } .table th, .table td { width: 50px; height: 60p...
在HTML中实现table表头点击升序/降序排序
不二的博客
09-11 9739
题目：如下图，请实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。 姓名 力量 敏捷 智力 德鲁伊 17 24 13 月之骑士 15 22 16 众神之王 19 15 20 流浪剑客 23 15 14 基本思路： ...
使用 JavaScript 对 HTML 表格进行排序
allway2的博客
03-31 527
我们经常遇到希望使表格具有交互性的情况。我们可能只想通过单击列或任何其他方法对它们进行排序。HTML 没有任何编程能力，因此我们必须使用 JavaScript 对 HTML 表格进行排序。不幸的是，没有内置的方法可以帮助我们对数组进行排序。因此，我们编写了利用 DOM 操作功能和比较功能的自定义方法。本教程教授如何使用 JavaScript 对 HTML 表格进行排序。 用户定义的方法使用以下两个辅助函数对数组进行排序。 getCellValue() 一个从给定表格行和列索引的单元格中获取内.
html 表格自动排序,jQuery html表格排序插件tablesorter使用方法详解
weixin_31880471的博客
06-03 475
tablesort是一款很好用的jQuery表格排序插件。 支持多种数据类型排序，会自动识别表格内容数据类型，使用也非常方便。使用jQuery tablesort实现html表格方法:1. 下载jQuery和tablesort脚本，并在html中引用该脚本文件：2. 格式化需要排序的html表格：a. 给需要排序的表格指定CCS类：class="sort-table"b. 使用thead和tbod...
实现html中table数据的排序
weixin_30454481的博客
08-05 725
最近应项目要求，需要对table中的数据进行升序或降序排列，于是研究了一下js，希望对大家有帮助。对了，注意那个innerText和innerHTML 1 function sortCells(event) { 2 var obj = event.target; 3 var count = 0; count是记录点击次数的，根据奇偶进行升序或降序 4 5 if...
js表格排序
weida11179的专栏
05-27 204
无标题文档 *{font-family:Arial, Helvetica, sans-serif;font-size:14px;border:none;} body{text-align:center;} table{margin:100px auto;} td{width:100px;height:24px;text-align:center;l...
html jquery 控制 table 排序
张佳美的专栏
09-26 707
Document                     div               {                   width: 1024px;                   margin: 0 auto; /*div相对屏幕左右居中*/               }               table               {    
HTML实现有序排列和无序排列
monologuezjp的博客
05-29 9673
一、HTML实现有序排列 有序序列标签都是成组出现的 <ol> <li>这是一号</li> <li>这是2号</li> <li>可以有很多li标签</li> </ol> 在<ol>标签中，可以定义有序序列的样式。有序序列默认排列方式是数字序列，顺序排列。如下图...
table表格自动轮播
最新发布
05-15
实现表格自动轮播可以使用 jQuery 插件，例如 DataTables 或 SlickGrid。 DataTables： 1. 引入 DataTables 的 CSS 和 JavaScript 文件。 2. 在 HTML 中创建表格，并为其添加 id 属性。 3. 在 JavaScript 中使用 DataTables 初始化表格，并设置自动轮播选项。 示例代码如下： HTML： ``` <table id="myTable"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> <tr> <td>Row 3, Column 1</td> <td>Row 3, Column 2</td> <td>Row 3, Column 3</td> </tr> </tbody> </table> ``` JavaScript： ``` $(document).ready(function() { $('#myTable').DataTable({ "autoWidth": false, // 禁用自动列宽调整 "scrollX": true, // 启用水平滚动 "scrollCollapse": true, // 允许表格高度小于容器高度时自动收缩 "paging": false, // 禁用分页 "ordering": false, // 禁用排序 "info": false, // 禁用信息展示 "searching": false, // 禁用搜索 "scrollY": "200px", // 设置表格高度 "scrollCollapse": true, // 允许表格高度小于容器高度时自动收缩 "autoScroll": true, // 启用自动滚动 "scrollXInner": "110%", // 设置水平滚动区域大小 "scrollYInner": false // 禁用垂直滚动 }); }); ``` SlickGrid： 1. 引入 SlickGrid 的 CSS 和 JavaScript 文件。 2. 在 HTML 中创建表格，并为其添加 id 属性。 3. 在 JavaScript 中使用 SlickGrid 初始化表格，并设置自动轮播选项。 示例代码如下： HTML： ``` <div id="myGrid" style="width: 100%; height: 200px;"></div> ``` JavaScript： ``` var columns = [ {id: "id", name: "ID", field: "id"}, {id: "name", name: "Name", field: "name"}, {id: "value", name: "Value", field: "value"} ]; var data = [ {id: 1, name: "Name 1", value: "Value 1"}, {id: 2, name: "Name 2", value: "Value 2"}, {id: 3, name: "Name 3", value: "Value 3"} ]; var options = { enableCellNavigation: true, // 启用单元格导航 enableColumnReorder: false, // 禁用列重排序 forceFitColumns: true, // 强制适应容器宽度 autoHeight: true, // 自动适应容器高度 autoEdit: false, // 禁用自动编辑 editable: false, // 禁用编辑 rowHeight: 30, // 设置行高 enableAddRow: false, // 禁用添加行 enableCellRangeSelection: false, // 禁用单元格范围选择 enableTextSelectionOnCells: false, // 禁用单元格文本选择 enableAsyncPostRender: true, // 启用异步后处理 asyncPostRenderDelay: 0, // 异步后处理延迟时间 syncColumnCellResize: true, // 同步列和单元格大小调整 autoScroll: true, // 启用自动滚动 autoScrollSpeed: 50, // 自动滚动速度 autoScrollInterval: 20, // 自动滚动间隔时间 autoScrollMargin: 50 // 自动滚动边缘距离 }; var grid = new Slick.Grid("#myGrid", data, columns, options); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值