【发布时间】：2016-02-12 08:57:43
【问题描述】：
在使用了各种表格排序 jQuery 插件之后，我遇到了一个完美的工作，因为它满足以下要求：
- 正确排序日期
- 正确排序数字
- 正确排序数字单词（例如：一、二、三）
- 它以 DOM 感知方式排序。这意味着如果您更新表格单元格的内容，当您单击表格标题以对该列进行排序时，它会识别新值，而不是根据第一次加载页面时的值进行排序。 （这个功能特别难找到，因为流行的表格排序器在排序时无法识别运行时的变化）
我遇到的唯一问题是它似乎只对可见的行进行排序。我希望它对整个表格进行排序，而不仅仅是可见的表格，同时保持所有上述功能（尤其是 DOM 感知部分），因为这将用于用户可能更新数据的表格，然后进行排序。
我将开源这个 jQuery 插件，所以我在这里共享代码没有问题。这里的 jQuery 代码是我的，我用于排序部分的插件在这里：http://www.kryogenix.org/code/browser/sorttable.
以下代码演示了该问题。您可以单击任何单元格以进行内联编辑，并可以通过这种方式对 DOM 部分进行更改。
(function($) {
$.fn.tables = function(options) {
var settings = $.extend({
page: 0,
pageCount: 10,
}, options);
$thead = this.find('thead');
$tbody = this.find('tbody');
$tfoot = this.find('tfoot > tr > td').attr('colspan', $tbody.find('tr')[0].cells.length);
var align = '';
for (var content_align = 0; content_align < $thead.find('tr')[0].cells.length; content_align++) {
align = $($thead.find('tr')[0].cells[content_align]).attr('data-align');
if (align === undefined) {
} else {
$tbody.find('tr > td:nth-child(' + (content_align + 1) + ')').each(function() {
$(this).addClass(align);
});
}
}
var numRows = $tbody.find('tr').length;
var numPages = Math.ceil(numRows / settings.pageCount);
this.bind('repaginate', function() {
$tbody.find('tr').removeClass('visible').slice(settings.page * settings.pageCount, (settings.page + 1) * settings.pageCount).addClass('visible');
});
this.trigger('repaginate');
$tfoot.find('td').html('');
for (var page = 0; page < numPages; page++) {
$('<a></a>').text(page + 1).bind('click', {
newPage: page
}, function(event) {
settings.page = event.data['newPage'];
$(this).trigger('repaginate');
$(this).addClass('active').siblings().removeClass('active');
if (options.pageChanged !== undefined) {
options.pageChanged(this);
}
}).appendTo($tfoot); //.addClass('clickable');
}
$tbody.find('td').click(function() {
if (options.cellClick !== undefined) {
if ($(this).hasClass('editing') == false) {
var col = $(this).parent().children().index($(this));
var row = $(this).parent().parent().children().index($(this).parent())
var type = $($thead.find('tr')[0].cells[col]).attr('data-type');
var typevalues = $($thead.find('tr')[0].cells[col]).attr('data-values');
var align = $($thead.find('tr')[0].cells[col]).attr('data-align');
console.log(type);
$(this).addClass('editing');
options.cellClick(this, true, col, row);
switch (type) {
case 'text':
$(this).html('<input type="text" value="' + $(this).text() + '">');
$(this).find('input').focus().blur(function() {
$(this).parent().removeClass('editing');
options.cellClick($(this).parent(), false, col, row);
$(this).parent().html($(this).prop('value'));
});
break;
case 'textarea':
_html = $(this).html();
$(this).html('<textarea type="text">' + $(this).html().replace(/\<br\\?>/g, "\n") + '</textarea>');
$(this).find('textarea').focus().blur(function() {
$(this).parent().removeClass('editing');
options.cellClick($(this).parent(), false, col, row);
$(this).parent().html($(this).prop('value').replace(/\n/g, "<br>"));
});
break;
case 'number':
$(this).html('<input type="number" value="' + $(this).text() + '">');
$(this).find('input').focus().blur(function() {
$(this).parent().removeClass('editing');
options.cellClick($(this).parent(), false, col, row);
$(this).parent().html($(this).prop('value'));
});
break;
case 'currency':
$(this).html('<input type="currency" value="' + $(this).text() + '">');
$(this).find('input').focus().blur(function() {
$(this).parent().removeClass('editing');
options.cellClick($(this).parent(), false, col, row);
$(this).parent().html($(this).prop('value'));
});
break;
case 'select':
if (typevalues === undefined) {
console.log('You must define both \'data-type\' and \'data-values\' for select elements. \'data-values\' should be a comma delimited array of the items to be displayed in the drop-down');
} else {
typevalues = typevalues.split(',');
_html = '<select>';
for (var i = 0; i < typevalues.length; i++) {
if (typevalues[i] == $(this).text()) {
_html = _html + '<option value="' + typevalues[i] + '" selected>' + typevalues[i] + '</option>';
} else {
_html = _html + '<option value="' + typevalues[i] + '">' + typevalues[i] + '</option>';
}
}
_html = _html + '</select>';
$(this).html(_html);
$(this).find('select').focus().change(function() {
$(this).parent().removeClass('editing');
options.cellClick($(this).parent(), false, col, row);
$(this).parent().html($(this).prop('value'));
}).blur(function() {
$(this).parent().removeClass('editing');
options.cellClick($(this).parent(), false, col, row);
$(this).parent().html($(this).prop('value'));
});
}
break;
case 'checkbox':
if (typevalues === undefined) {
$($thead.find('tr')[0].cells[col]).attr('data-values', 'T,F');
typevalues = $($thead.find('tr')[0].cells[col]).attr('data-values');
console.log('You can define the \'data-values\' parameter for checkbox elements. \'data-values\' should be a comma delimited array of two items. The first item is the \'checked\' value, and the second item is the \'unchecked\' value. Defaults to \'T,F\'');
}
typevalues = typevalues.split(',');
_html = '';
if (typevalues[0] == $(this).text()) {
_html = '<input type="checkbox" checked="checked">';
} else {
_html = '<input type="checkbox">';
}
$(this).html(_html);
$(this).find('input').focus().click(function() {
$(this).parent().removeClass('editing');
options.cellClick($(this).parent(), false, col, row);
typevalues = $($thead.find('tr')[0].cells[col]).attr('data-values').split(',');
if (this.checked) {
$(this).parent().html(typevalues[0]);
} else {
$(this).parent().html(typevalues[1]);
}
})
.blur(function() {
$(this).parent().removeClass('editing');
options.cellClick($(this).parent(), false, col, row);
typevalues = $($thead.find('tr')[0].cells[col]).attr('data-values').split(',');
if (this.checked) {
$(this).parent().html(typevalues[0]);
} else {
$(this).parent().html(typevalues[1]);
}
});
break;
}
}
}
})
this.addClass('sortable');
$tfoot.find('a:first-child').addClass('active');
return this;
};
}(jQuery));:root {
--tables-even-color: #CDEDF7;
--tables-odd-color: #90C3D4;
}
.tables {
border-collapse: collapse;
}
/* Header */
.tables thead > tr {
background: #3E8096;
color: #CDEDF7;
}
.tables thead > tr > td {
padding: 4px;
padding-left: 8px;
padding-right: 10px;
}
.tables thead > tr > td:hover {
background: #CDEDF7 !important;
color: #3E8096 !important;
}
/* Footer */
.tables tfoot > tr {
background: #3E8096;
color: #CDEDF7;
}
.tables tfoot > tr > td > a {
border: 1px solid #3E8096;
padding: 4px;
cursor: pointer;
display: inline-block;
}
.tables tfoot > tr > td > a:hover {
border: 1px solid #CDEDF7;
}
.tables tfoot > tr > td > a.active {
background: #CDEDF7;
color: #3E8096;
}
/* Rows */
.tables tbody > tr:nth-child(even) {
background: #CDEDF7;
color: #90C3D4;
}
.tables tbody > tr:nth-child(even):hover {
background: #18EAF5;
color: #90C3D4;
}
.tables tbody > tr:nth-child(odd) {
background: #90C3D4;
color: #CDEDF7;
}
.tables tbody > tr:nth-child(odd):hover {
background: #18EAF5;
color: #90C3D4;
}
.tables tbody > tr {
display: none;
}
.tables tbody > tr.visible {
display: table-row !important;
}
.tables tbody > tr > td {
padding: 5px;
cursor: default;
}
/* Cell Content */
.tables tbody > tr > td.center {
text-align: center;
}
.tables tbody > tr > td.center > input {
text-align: center;
}
.tables tbody > tr > td.center > textarea {
text-align: center;
}
.tables tbody > tr > td.right {
text-align: right;
}
.tables tbody > tr > td.right > input {
text-align: right;
}
.tables tbody > tr > td.right > textarea {
text-align: right;
}<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jquery.tables.css">
<script type="text/javascript">
$(document).ready(function() {
$table = $('.tables').tables({
pageChanged: function(item) {
console.log($(item).text());
},
cellClick: function(item, focused, column, row) {
console.log('COLUMN: ' + column + ', ROW: ' + row);
}
});
})
</script>
</head>
<body>
<table class="tables">
<thead>
<tr>
<td data-type="textarea">Column 1</td>
<td data-type="checkbox" data-align="center">Column 2</td>
<td data-type="select" data-values="Apples,Oranges,Bananas">Column 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>aa</td>
<td>ab</td>
<td>Apples</td>
</tr>
<tr>
<td>ac</td>
<td>ad</td>
<td>Oranges</td>
</tr>
<tr>
<td>bb
<br>ccc<b>newline</b>
</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>aaa</td>
<td>T</td>
<td>Apples</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="1"></td>
</tr>
</tfoot>
</table>
</body>
</html>奖励：如果您能弄清楚如何在排序后纠正 css 交替行颜色，那就太棒了（无需向每个 TD 添加任何内容......基本上，只是以某种方式“刷新”css）
【问题讨论】：
标签： jquery html css sorting sorttable.js