使用javascript或jquery根据表头列对表行进行排序
Posted
技术标签:
【中文标题】使用javascript或jquery根据表头列对表行进行排序【英文标题】：Sorting table rows according to table header column using javascript or jquery 【发布时间】：2014-07-24 20:36:47 【问题描述】：我有这样的事情
<table>
<thead>
<tr>
<th>S.L.</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ronaldo</td>
</tr>
<tr>
<td>2</td>
<td>Messi</td>
</tr>
<tr>
<td>3</td>
<td>Ribery</td>
</tr>
<tr>
<td>4</td>
<td>Bale</td>
</tr>
</tbody>
</table>
我想要的是在单击th 时按照以下th 单击时按升序和降序对<tbody> 的<tr> 进行排序。
-
所以如果有人点击
S.L th 那么它会显示表格行
每次点击时，按降序和升序交替排列。
当点击Nameth时，它应该以降序显示名称
顺序然后升序而不改变它们各自的
S.L
这里是fiddle
【问题讨论】：
Working Fiddle... The original question here. @Bhavik 你的“工作小提琴”不起作用。 @RyanBrewer here you go, my "Working Fiddle" has started working 你能用我的解决方案在 jquery 中实现它吗因为我在 javascript @Bhavik 方面有点弱 @user3508453here you go
【参考方案1】：
您可能想查看此页面：http://blog.niklasottosson.com/?p=1914
我猜你可以这样做：
演示：http://jsfiddle.net/g9eL6768/2/
html：
<table id="mytable"><thead>
<tr>
<th id="sl">S.L.</th>
<th id="nm">name</th>
</tr>
....
JS：
// sortTable(f,n)
// f : 1 ascending order, -1 descending order
// n : n-th child(<td>) of <tr>
function sortTable(f,n)
var rows = $('#mytable tbody tr').get();
rows.sort(function(a, b)
var A = getVal(a);
var B = getVal(b);
if(A < B)
return -1*f;
if(A > B)
return 1*f;
return 0;
);
function getVal(elm)
var v = $(elm).children('td').eq(n).text().toUpperCase();
if($.isNumeric(v))
v = parseInt(v,10);
return v;
$.each(rows, function(index, row)
$('#mytable').children('tbody').append(row);
);
var f_sl = 1; // flag to toggle the sorting order
var f_nm = 1; // flag to toggle the sorting order
$("#sl").click(function()
f_sl *= -1; // toggle the sorting order
var n = $(this).prevAll().length;
sortTable(f_sl,n);
);
$("#nm").click(function()
f_nm *= -1; // toggle the sorting order
var n = $(this).prevAll().length;
sortTable(f_nm,n);
);
希望这会有所帮助。
【讨论】：
你为什么用sortTable(variable,0) & sortTable(variable,1)？
@user3508453，我在上面的答案中附加了sortTable 参数的解释。在 sortTable(f,n) 、 f 上：1 个升序、-1 个降序和 n ：td 的 n ？ @naota
@user3508453，谢谢。你能解释一下“关于第 n 个未知”的更多信息吗？你会考虑什么样的案例？
我考虑在google forms 中添加table headers 未知数量的时间然后我不知道我的用户创建了多少表头.....
使用Javascript sort()函数
var $tbody = $('table tbody');
$tbody.find('tr').sort(function(a,b)
var tda = $(a).find('td:eq(1)').text(); // can replace 1 with the column you want to sort on
var tdb = $(b).find('td:eq(1)').text(); // this will sort on the second column
// if a < b return 1
return tda < tdb ? 1
// else if a > b return -1
: tda > tdb ? -1
// else they are equal - return 0
: 0;
).appendTo($tbody);
如果你想上升，你只需要把 > 和
为您相应地更改逻辑。
FIDDLE
【讨论】：
这个也不能正确排序 > jsfiddle.net/8kp2vjm3/59 要使数字工作只需将代码 tda 请参阅更新的小提琴>> jsfiddle.net/vishal_vash/8kp2vjm3/131 我喜欢这个。解决我的小数问题。我通过更改错误使其上升和下降。谢谢 SharmaPattar【参考方案3】：提供处理多列的交互式排序并非易事。
除非你想为多行点击编写大量代码处理逻辑、编辑和刷新页面内容、管理大表的排序算法……那么你真的最好采用插件。
tablesorter，（Mottie 更新）是我的最爱。它很容易上手并且非常可定制。只需将 tablesorter 类添加到要排序的表中，然后在文档加载事件中调用 tablesorter 插件：
$(function()
$("#myTable").tablesorter();
);
您可以浏览the documentation了解高级功能。
【讨论】：
这个插件运行良好，除非在运行时修改了表。它不考虑对单元格内容所做的更改。即使修改后再次运行 .tablesorter() ，也无法看到新数据。 function() 调用会去哪里？不明显。【参考方案4】：我认为这可能会对您有所帮助： 这是JSFiddle demo：
这里是代码：
var stIsIE = /*@cc_on!@*/ false;
sorttable =
init: function()
if (arguments.callee.done) return;
arguments.callee.done = true;
if (_timer) clearInterval(_timer);
if (!document.createElement || !document.getElementsByTagName) return;
sorttable.DATE_RE = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/;
forEach(document.getElementsByTagName('table'), function(table)
if (table.className.search(/\bsortable\b/) != -1)
sorttable.makeSortable(table);
);
,
makeSortable: function(table)
if (table.getElementsByTagName('thead').length == 0)
the = document.createElement('thead');
the.appendChild(table.rows[0]);
table.insertBefore(the, table.firstChild);
if (table.tHead == null) table.tHead = table.getElementsByTagName('thead')[0];
if (table.tHead.rows.length != 1) return;
sortbottomrows = [];
for (var i = 0; i < table.rows.length; i++)
if (table.rows[i].className.search(/\bsortbottom\b/) != -1)
sortbottomrows[sortbottomrows.length] = table.rows[i];
if (sortbottomrows)
if (table.tFoot == null)
tfo = document.createElement('tfoot');
table.appendChild(tfo);
for (var i = 0; i < sortbottomrows.length; i++)
tfo.appendChild(sortbottomrows[i]);
delete sortbottomrows;
headrow = table.tHead.rows[0].cells;
for (var i = 0; i < headrow.length; i++)
if (!headrow[i].className.match(/\bsorttable_nosort\b/))
mtch = headrow[i].className.match(/\bsorttable_([a-z0-9]+)\b/);
if (mtch)
override = mtch[1];
if (mtch && typeof sorttable["sort_" + override] == 'function')
headrow[i].sorttable_sortfunction = sorttable["sort_" + override];
else
headrow[i].sorttable_sortfunction = sorttable.guessType(table, i);
headrow[i].sorttable_columnindex = i;
headrow[i].sorttable_tbody = table.tBodies[0];
dean_addEvent(headrow[i], "click", sorttable.innerSortFunction = function(e)
if (this.className.search(/\bsorttable_sorted\b/) != -1)
sorttable.reverse(this.sorttable_tbody);
this.className = this.className.replace('sorttable_sorted',
'sorttable_sorted_reverse');
this.removeChild(document.getElementById('sorttable_sortfwdind'));
sortrevind = document.createElement('span');
sortrevind.id = "sorttable_sortrevind";
sortrevind.innerHTML = stIsIE ? ' <font face="webdings">5</font>' : ' ▴';
this.appendChild(sortrevind);
return;
if (this.className.search(/\bsorttable_sorted_reverse\b/) != -1)
sorttable.reverse(this.sorttable_tbody);
this.className = this.className.replace('sorttable_sorted_reverse',
'sorttable_sorted');
this.removeChild(document.getElementById('sorttable_sortrevind'));
sortfwdind = document.createElement('span');
sortfwdind.id = "sorttable_sortfwdind";
sortfwdind.innerHTML = stIsIE ? ' <font face="webdings">6</font>' : ' ▾';
this.appendChild(sortfwdind);
return;
theadrow = this.parentNode;
forEach(theadrow.childNodes, function(cell)
if (cell.nodeType == 1)
cell.className = cell.className.replace('sorttable_sorted_reverse', '');
cell.className = cell.className.replace('sorttable_sorted', '');
);
sortfwdind = document.getElementById('sorttable_sortfwdind');
if (sortfwdind)
sortfwdind.parentNode.removeChild(sortfwdind);
sortrevind = document.getElementById('sorttable_sortrevind');
if (sortrevind)
sortrevind.parentNode.removeChild(sortrevind);
this.className += ' sorttable_sorted';
sortfwdind = document.createElement('span');
sortfwdind.id = "sorttable_sortfwdind";
sortfwdind.innerHTML = stIsIE ? ' <font face="webdings">6</font>' : ' ▾';
this.appendChild(sortfwdind);
row_array = [];
col = this.sorttable_columnindex;
rows = this.sorttable_tbody.rows;
for (var j = 0; j < rows.length; j++)
row_array[row_array.length] = [sorttable.getInnerText(rows[j].cells[col]), rows[j]];
row_array.sort(this.sorttable_sortfunction);
tb = this.sorttable_tbody;
for (var j = 0; j < row_array.length; j++)
tb.appendChild(row_array[j][1]);
delete row_array;
);
,
guessType: function(table, column)
sortfn = sorttable.sort_alpha;
for (var i = 0; i < table.tBodies[0].rows.length; i++)
text = sorttable.getInnerText(table.tBodies[0].rows[i].cells[column]);
if (text != '')
if (text.match(/^-?[£$¤]?[\d,.]+%?$/))
return sorttable.sort_numeric;
possdate = text.match(sorttable.DATE_RE)
if (possdate)
first = parseInt(possdate[1]);
second = parseInt(possdate[2]);
if (first > 12)
return sorttable.sort_ddmm;
else if (second > 12)
return sorttable.sort_mmdd;
else
sortfn = sorttable.sort_ddmm;
return sortfn;
,
getInnerText: function(node)
if (!node) return "";
hasInputs = (typeof node.getElementsByTagName == 'function') &&
node.getElementsByTagName('input').length;
if (node.getAttribute("sorttable_customkey") != null)
return node.getAttribute("sorttable_customkey");
else if (typeof node.textContent != 'undefined' && !hasInputs)
return node.textContent.replace(/^\s+|\s+$/g, '');
else if (typeof node.innerText != 'undefined' && !hasInputs)
return node.innerText.replace(/^\s+|\s+$/g, '');
else if (typeof node.text != 'undefined' && !hasInputs)
return node.text.replace(/^\s+|\s+$/g, '');
else
switch (node.nodeType)
case 3:
if (node.nodeName.toLowerCase() == 'input')
return node.value.replace(/^\s+|\s+$/g, '');
case 4:
return node.nodeValue.replace(/^\s+|\s+$/g, '');
break;
case 1:
case 11:
var innerText = '';
for (var i = 0; i < node.childNodes.length; i++)
innerText += sorttable.getInnerText(node.childNodes[i]);
return innerText.replace(/^\s+|\s+$/g, '');
break;
default:
return '';
,
reverse: function(tbody)
// reverse the rows in a tbody
newrows = [];
for (var i = 0; i < tbody.rows.length; i++)
newrows[newrows.length] = tbody.rows[i];
for (var i = newrows.length - 1; i >= 0; i--)
tbody.appendChild(newrows[i]);
delete newrows;
,
sort_numeric: function(a, b)
aa = parseFloat(a[0].replace(/[^0-9.-]/g, ''));
if (isNaN(aa)) aa = 0;
bb = parseFloat(b[0].replace(/[^0-9.-]/g, ''));
if (isNaN(bb)) bb = 0;
return aa - bb;
,
sort_alpha: function(a, b)
if (a[0] == b[0]) return 0;
if (a[0] < b[0]) return -1;
return 1;
,
sort_ddmm: function(a, b)
mtch = a[0].match(sorttable.DATE_RE);
y = mtch[3];
m = mtch[2];
d = mtch[1];
if (m.length == 1) m = '0' + m;
if (d.length == 1) d = '0' + d;
dt1 = y + m + d;
mtch = b[0].match(sorttable.DATE_RE);
y = mtch[3];
m = mtch[2];
d = mtch[1];
if (m.length == 1) m = '0' + m;
if (d.length == 1) d = '0' + d;
dt2 = y + m + d;
if (dt1 == dt2) return 0;
if (dt1 < dt2) return -1;
return 1;
,
sort_mmdd: function(a, b)
mtch = a[0].match(sorttable.DATE_RE);
y = mtch[3];
d = mtch[2];
m = mtch[1];
if (m.length == 1) m = '0' + m;
if (d.length == 1) d = '0' + d;
dt1 = y + m + d;
mtch = b[0].match(sorttable.DATE_RE);
y = mtch[3];
d = mtch[2];
m = mtch[1];
if (m.length == 1) m = '0' + m;
if (d.length == 1) d = '0' + d;
dt2 = y + m + d;
if (dt1 == dt2) return 0;
if (dt1 < dt2) return -1;
return 1;
,
shaker_sort: function(list, comp_func)
var b = 0;
var t = list.length - 1;
var swap = true;
while (swap)
swap = false;
for (var i = b; i < t; ++i)
if (comp_func(list[i], list[i + 1]) > 0)
var q = list[i];
list[i] = list[i + 1];
list[i + 1] = q;
swap = true;
t--;
if (!swap) break;
for (var i = t; i > b; --i)
if (comp_func(list[i], list[i - 1]) < 0)
var q = list[i];
list[i] = list[i - 1];
list[i - 1] = q;
swap = true;
b++;
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", sorttable.init, false);
/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function()
if (this.readyState == "complete")
sorttable.init(); // call the onload handler
;
/*@end @*/
/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) // sniff
var _timer = setInterval(function()
if (/loaded|complete/.test(document.readyState))
sorttable.init(); // call the onload handler
, 10);
/* for other browsers */
window.onload = sorttable.init;
function dean_addEvent(element, type, handler)
if (element.addEventListener)
element.addEventListener(type, handler, false);
else
if (!handler.$$guid) handler.$$guid = dean_addEvent.guid++;
if (!element.events) element.events = ;
var handlers = element.events[type];
if (!handlers)
handlers = element.events[type] = ;
if (element["on" + type])
handlers[0] = element["on" + type];
handlers[handler.$$guid] = handler;
element["on" + type] = handleEvent;
;
dean_addEvent.guid = 1;
function removeEvent(element, type, handler)
if (element.removeEventListener)
element.removeEventListener(type, handler, false);
else
if (element.events && element.events[type])
delete element.events[type][handler.$$guid];
;
function handleEvent(event)
var returnValue = true;
event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
var handlers = this.events[event.type];
for (var i in handlers)
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false)
returnValue = false;
return returnValue;
;
function fixEvent(event)
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
;
fixEvent.preventDefault = function()
this.returnValue = false;
;
fixEvent.stopPropagation = function()
this.cancelBubble = true;
if (!Array.forEach)
Array.forEach = function(array, block, context)
for (var i = 0; i < array.length; i++)
block.call(context, array[i], i, array);
;
Function.prototype.forEach = function(object, block, context)
for (var key in object)
if (typeof this.prototype[key] == "undefined")
block.call(context, object[key], key, object);
;
String.forEach = function(string, block, context)
Array.forEach(string.split(""), function(chr, index)
block.call(context, chr, index, string);
);
;
var forEach = function(object, block, context)
if (object)
var resolve = Object;
if (object instanceof Function)
resolve = Function;
else if (object.forEach instanceof Function)
object.forEach(block, context);
return;
else if (typeof object == "string")
resolve = String;
else if (typeof object.length == "number")
resolve = Array;
resolve.forEach(object, block, context);
table.sortable thead
background-color: #eee;
color: #666666;
font-weight: bold;
cursor: default;
<table class="sortable">
<thead>
<tr>
<th>S.L.</th>
<th>name</th>
<th>Goal</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ronaldo</td>
<td>120</td>
</tr>
<tr>
<td>2</td>
<td>Messi</td>
<td>66</td>
</tr>
<tr>
<td>3</td>
<td>Ribery</td>
<td>10</td>
</tr>
<tr>
<td>4</td>
<td>Bale</td>
<td>22</td>
</tr>
</tbody>
</table>这里使用 JS，没有任何其他 JQuery 插件。
【讨论】：
js 代码与kryogenix.org/code/browser/sorttable/sorttable.js 看起来很相似。使用方法请访问kryogenix.org/code/browser/sorttable。【参考方案5】：您可以使用 jQuery DataTables 插件以所需的方式应用列排序。
Column Sorting using DataTable
【讨论】：
【参考方案6】：我一直在为客户开发一个在库中工作的函数，并且在排序期间保持 UI 响应时遇到了很多麻烦（即使只有几百个结果）。
该函数必须在每次 AJAX 分页时使用整个表，因为新数据可能需要进一步向上注入。这是我到目前为止所拥有的：
需要 jQuery 库。table 是正在排序的表的 ID。
表属性sort-attribute、sort-direction和列属性column都是预先设置好的。
使用上面的一些细节，我设法提高了一点性能。
function sorttable(table)
var context = $('#' + table), tbody = $('#' + table + ' tbody'), sortfield = $(context).data('sort-attribute'), c, dir = $(context).data('sort-direction'), index = $(context).find('thead th[data-column="' + sortfield + '"]').index();
if (!sortfield)
sortfield = $(context).data('id-attribute');
;
switch (dir)
case "asc":
tbody.find('tr').sort(function (a, b)
var sortvala = parseFloat($(a).find('td:eq(' + index + ')').text());
var sortvalb = parseFloat($(b).find('td:eq(' + index + ')').text());
// if a < b return 1
return sortvala < sortvalb ? 1
// else if a > b return -1
: sortvala > sortvalb ? -1
// else they are equal - return 0
: 0;
).appendTo(tbody);
break;
case "desc":
default:
tbody.find('tr').sort(function (a, b)
var sortvala = parseFloat($(a).find('td:eq(' + index + ')').text());
var sortvalb = parseFloat($(b).find('td:eq(' + index + ')').text());
// if a < b return 1
return sortvala > sortvalb ? 1
// else if a > b return -1
: sortvala < sortvalb ? -1
// else they are equal - return 0
: 0;
).appendTo(tbody);
break;
原则上代码运行良好，但速度慢得令人痛苦……有什么方法可以提高性能吗？
【讨论】：
【参考方案7】：var TableIDvalue = "myTable";
var TableLastSortedColumn = -1;
function SortTable()
var sortColumn = parseInt(arguments[0]);
var type = arguments.length > 1 ? arguments[1] : 'T';
var dateformat = arguments.length > 2 ? arguments[2] : '';
var table = document.getElementById(TableIDvalue);
var tbody = table.getElementsByTagName("tbody")[0];
var rows = tbody.getElementsByTagName("tr");
var arrayOfRows = new Array();
type = type.toUpperCase();
dateformat = dateformat.toLowerCase();
for (var i = 0, len = rows.length; i < len; i++)
arrayOfRows[i] = new Object;
arrayOfRows[i].oldIndex = i;
var celltext = rows[i].getElementsByTagName("td")[sortColumn].innerHTML.replace(/<[^>]*>/g, "");
if (type == 'D')
arrayOfRows[i].value = GetDateSortingKey(dateformat, celltext);
else
var re = type == "N" ? /[^\.\-\+\d]/g : /[^a-zA-Z0-9]/g;
arrayOfRows[i].value = celltext.replace(re, "").substr(0, 25).toLowerCase();
if (sortColumn == TableLastSortedColumn)
arrayOfRows.reverse();
else
TableLastSortedColumn = sortColumn;
switch (type)
case "N":
arrayOfRows.sort(CompareRowOfNumbers);
break;
case "D":
arrayOfRows.sort(CompareRowOfNumbers);
break;
default:
arrayOfRows.sort(CompareRowOfText);
var newTableBody = document.createElement("tbody");
for (var i = 0, len = arrayOfRows.length; i < len; i++)
newTableBody.appendChild(rows[arrayOfRows[i].oldIndex].cloneNode(true));
table.replaceChild(newTableBody, tbody);
function CompareRowOfText(a, b)
var aval = a.value;
var bval = b.value;
return (aval == bval ? 0 : (aval > bval ? 1 : -1));
function deleteRow(i)
document.getElementById('myTable').deleteRow(i)
<table id="myTable" border="1">
<thead>
<tr>
<th>
<input type="button" onclick="javascript: SortTable(0, 'T');" value="SORT" /></th>
</tr>
</thead>
<tbody>
<tr>
<td>Shaa</td>
<td>ABC</td>
<td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
</tr>
<tr>
<td>cnubha</td>
<td>XYZ</td>
<td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
</tr>
<tr>
<td>Fine</td>
<td>MNO</td>
<td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
</tr>
<tr>
<td>Amit</td>
<td>PQR</td>
<td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
</tr>
<tr>
<td>Sultan</td>
<td>FGH</td>
<td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
</tr>
<tr>
<td>Hello</td>
<td>UST</td>
<td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
</tr>
</tbody>
</table>【讨论】：
【参考方案8】：我发现@naota 的解决方案很有用，并将其扩展到使用日期
//taken from ***:
//https://***.com/questions/3880615/how-can-i-determine-whether-a-given-string-represents-a-date
function isDate(val)
var d = new Date(val);
return !isNaN(d.valueOf());
var getVal = function(elm, n)
var v = $(elm).children('td').eq(n).text().toUpperCase();
if($.isNumeric(v))
v = parseFloat(v,10);
return v;
if (isDate(v))
v = new Date(v);
return v;
return v;
【讨论】：
以上是关于使用javascript或jquery根据表头列对表行进行排序的主要内容，如果未能解决你的问题，请参考以下文章
使用 pandas groupby 根据另一个分类列对两个分类列应用 sum & count