jquery实现表格本地排序步骤详解（附代码）
这次给大家带来jquery实现表格本地排序步骤详解（附代码），jquery实现表格本地排序的注意事项有哪些，下面就是实战案例，一起来看一下。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jquery 表格排序</title>
<style type="text/css">
thead
{
background-color
: Blue;
color: White;
}
tr.odd
{
background-color: #ddd;
}
tr.even
{
background-color: #eee;
}
.clickable
{
text-decoration: underline;
}
.hover
{
background-color: #5dd354;
}
.sorted
{
background-color: #ded070;
}
.page-number
{
color: Black;
margin:2px 10px;
padding:2px 5px;
}
.active
{
border:solid 1px red;
background-color:#76a7d2;
}
.pager
{
margin-bottom:10px;
margin-left:20px;
}
</style>
<script type="text/javascript" language="javascript" src="js/jquery1.3.2.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
jQuery.fn.alternateRowColors = function() { //做成插件的形式
$('tbody tr:odd', this).removeClass('even').addClass('odd'); //隔行变色 奇数行
$('tbody tr:even', this).removeClass('odd').addClass('even'); //隔行变色 偶数行
return this;
};
$('table.myTable').each(function() {
var $table = $(this); //将table存储为一个jquery对象
$table.alternateRowColors($table); //在排序时隔行变色
$('th', $table).each(function(column) {
var findSortKey;
if ($(this).is('.sort-alpha')) { //按字母排序
findSortKey = function($cell) {
return $cell.find('sort-key').text().toUpperCase() + '' + $cell.text().toUpperCase();
};
} else if ($(this).is('.sort-numeric')) { //按数字排序
findSortKey = function($cell) {
var key = parseFloat($cell.text().replace(/^[^\d.]*/, ''));
return isNaN(key) ? 0 : key;
};
} else if ($(this).is('.sort-date')) { //按日期排序
findSortKey = function($cell) {
return Date.parse('1 ' + $cell.text());
};
}
if (findSortKey) {
$(this).addClass('clickable').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }).click(function() {
//反向排序状态声明
var newDirection = 1;
if ($(this).is('.sorted-asc')) {
newDirection = -1;
}
var rows = $table.find('tbody>tr').get(); //将数据行转换为数组
$.each(rows, function(index, row) {
row.sortKey = findSortKey($(row).children('td').eq(column));
});
rows.sort(function(a, b) {
if (a.sortKey < b.sortKey) return -newDirection;
if (a.sortKey > b.sortKey) return newDirection;
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
row.sortKey = null;
});
$table.find('th').removeClass('sorted-asc').removeClass('sorted-desc');
var $sortHead = $table.find('th').filter(':nth-child(' + (column + 1) + ')');
//实现反向排序
if (newDirection == 1) {
$sortHead.addClass('sorted-asc');
} else {
$sortHead.addClass('sorted-desc');
}
//调用隔行变色的函数
$table.alternateRowColors($table);
//移除已排序的列的样式,添加样式到当前列
$table.find('td').removeClass('sorted').filter(':nth-child(' + (column + 1) + ')').addClass('sorted');
$table.trigger('repaginate');
});
}
});
});
});
//分页
$(function() {
$('table.paginated').each(function() {
var currentPage = 0;
var numPerPage = 10;
var $table = $(this);
$table.bind('repaginate', function() {
$table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
});
var numRows = $table.find('tbody tr').leng
th;
var numPages = Math.ceil(numRows / numPerPage);
var $pager = $('<p class="pager"></p>');
for (var page = 0; page < numPages; page++) {
$('<span class="page-number"></span>').text(page + 1)
.bind('click', { newPage: page }, function(event) {
currentPage = event.data['newPage'];
$table.trigger('repaginate');
$(this).addClass('active').siblings().removeClass('active');
}).appendTo($pager).addClass('clickable');
}
$pager.insertBefore($table);
$table.trigger('repaginate');
$pager.find('span.page-number:first').addClass('active');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<p>
<table class="myTable paginated">
<thead>
<tr>
<th class="sort-alpha">
Last Name
</th>
<th class="sort-alpha">
First Name
</th>
<th>
Email
</th>
<th class="sort-numeric">
Due
</th>
<th class="sort-date">
Date
</th>
<th>
Web Site
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
tmith
</td>
<td>
erthn
</td>
<td>
PHP
</td>
<td>
$34.00
</td>
<td>
14 2009
</td>
<td>
PHP
</td>
</tr>
<tr>
<td>
TTmith
</td>
<td>
BJohn
</td>
<td>
PHP
</td>
<td>
$50.00
</td>
<td>
Mar 2009
</td>
<td>
PHP
</td>
</tr>
<tr>
<td>
CSmith
</td>
<td>
John
</td>
<td>
PHP
</td>
<td>
$50.00
</td>
<td>
Mar 2009
</td>
<td>
PHP
</td>
</tr>
<tr>
<td>
Smith
</td>
<td>
John
</td>
<td>
PHP
</td>
<td>
$50.00
</td>
<td>
f32 2009
</td>
<td>
PHP
</td>
</tr>
</tbody>
</table>
</p>
</form>
</body>
</html>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是jquery实现表格本地排序步骤详解（附代码）的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
jQuery中如何使用PUT请求方式？
Feb 28, 2024 pm 03:12 PM
jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u
wps怎么排序成绩高低
Mar 20, 2024 am 11:28 AM
在我们的工作中，经常会用到wps软件，wps软件处理数据的方式方法是非常多的，而且函数功能也是非常强大的，我们经常用函数来求平均值，求汇总等，可以说只要是统计数据能用的方法，wps软件库里都已经为大家准备好了，下面我们要介绍的是wps怎么排序成绩高低的操作步骤，看完以后大家可以借鉴一下经验。1、首先打开需要排名的表格。如下图所示。 2、然后输入公式＝rank（B2，B2：B5，0），一定要输入0。如下图所示。 3、输入完公式以后，按下电脑键盘上的F4键，这步操作是为了让相对引用变为绝对引用。
jQuery小技巧：快速修改页面所有a标签的文本
Feb 28, 2024 pm 09:06 PM
标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：<
excel怎么排序
Mar 05, 2024 pm 04:12 PM
excel的排序方法：1、单列排序；2、多列排序；3、自定义排序。详细介绍：1、单列排序，是最常见的排序方式，它按照选定的某一列进行排序；2、多列排序，是指按照多个列的数据进行排序，通常是在先按照某一列排序的基础上，再按照另一列进行排序；3、自定义排序，允许用户根据自己的需要定义排序顺序。
WPS表格怎么排序方便数据统计
Mar 20, 2024 pm 04:31 PM
WPS是一款功能非常完善的办公软件，其中包括文字编辑、数据表格、PPT演示、PDF格式、流程图等功能。其中我们使用最多的就是文字、表格、演示，也是我们最熟悉的。我们在学习工作中，有时会使用WPS表格制作一些数据统计，比如学校里会对每个学生的成绩进行统计，那么多的学生如果我们要通过手动进行学生成绩排序的话，那真是让人头疼，其实我们可以不必烦心，因为我们的WPS表格中有排序这个功能为我们解决这一问题。接下来我们就一起学习一下WPS怎么排序的方法。方法步骤：第一步：首先我们需要打开需要排序的WPS表格
如何通过拖放在Power Query中对多列进行重新排序
Mar 14, 2024 am 10:55 AM
在这篇文章中，我们将向你展示如何通过拖放在PowerQuery中对多列进行重新排序。通常，从各种来源导入数据时，列可能不是所需的顺序。重新排序列不仅允许您按照符合您的分析或报告需求的逻辑顺序排列它们，还可以提高数据的可读性，并加快过滤、排序和执行计算等任务。如何在Excel中重新排列多个列？在Excel中，重新排列列的方法有多种。您可以简单地选择列标题，然后将其拖动到所需位置。但是，当处理包含许多列的大表时，这种方法可能会变得繁琐。为了更高效地重新排列列，您可以使用增强查询编辑器。通过增强查询编
使用jQuery修改所有a标签的文本内容
Feb 28, 2024 pm 05:42 PM
标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：
PHP如何对数组中的值进行大小排序
Mar 22, 2024 pm 05:24 PM
PHP是一种常用的服务器端脚本语言，广泛应用于网站开发和数据处理领域。在PHP中，对数组中的值进行大小排序是很常见的需求。通过使用内置的排序函数，可以很方便地实现对数组的排序操作。下面将介绍如何使用PHP对数组中的值进行大小排序，并附上具体的代码示例：1.对数组中的值进行升序排序：
