Jquery排序表数据

我使用jquery对表中的tds进行了排序。

我的演示小提琴

如何在我的项目中为任何具有id的表调用它？

var $sort = this; var $table = $('#mytable'); var $rows = $('tbody > tr',$table); $rows.sort(function(a, b) { var keyA = $('td:eq(0)',a).text(); var keyB = $('td:eq(0)',b).text(); if($($sort).hasClass('asc')) { return (keyA > keyB) ? 1 : 0; } else { return (keyA < keyB) ? 1 : 0; } }); 

Answer 1

像这样的东西

 function sortTable(table, order) { var asc = order === 'asc', tbody = table.find('tbody'); tbody.find('tr').sort(function(a, b) { if (asc) { return $('td:first', a).text().localeCompare($('td:first', b).text()); } else { return $('td:first', b).text().localeCompare($('td:first', a).text()); } }).appendTo(tbody); } 

可以在任何这样的表上调用

 sortTable($('#mytable'),'asc'); 

小提琴

Answer 2

我认为你错过了最后的“重置”function来排序表。 desc代码不起作用，因为必须切换顺序。

码：

 $('.sort').click(function (e) { var $sort = this; var $table = $('#mytable'); var $rows = $('tbody > tr', $table); $rows.sort(function (a, b) { var keyA = $('td', a).text(); var keyB = $('td', b).text(); if ($($sort).hasClass('asc')) { return (keyA > keyB) ? 1 : 0; } else { return (keyA > keyB) ? 0 : 1; } }); $.each($rows, function (index, row) { $table.append(row); }); e.preventDefault(); }); 

演示： http ： //jsfiddle.net/7wwvL/

UPDATE

更一般来说，您的function可以是：

 function sortTable($table,order){ var $rows = $('tbody > tr', $table); $rows.sort(function (a, b) { var keyA = $('td', a).text(); var keyB = $('td', b).text(); if (order=='asc') { return (keyA > keyB) ? 1 : 0; } else { return (keyA > keyB) ? 0 : 1; } }); $.each($rows, function (index, row) { $table.append(row); }); } sortTable($('#mytable'),'asc') 

演示： http ： //jsfiddle.net/d7Kbx/

Answer 3

这将通过使用jquery和bootstrap与搜索filter完成，只需使用id调用jquery。 例如，我使用这个id #example你可以使用它作为你的表id并包含jquery和datatable jquery。

 $(document).ready(function() { $('#example').DataTable(); } ); 

在这里演示

Answer 4

以下是Adeneo答案的修改版本。 这将根据指定列中的文本而不是仅第一列对表进行排序。 这也将在第二列中查找“Name”一词，并确保该行保持在顶部（标题行）。

 function SortTable(table, order, nr) { var asc = order === 'asc', tbody = table.find('tbody'); tbody.find('tr').sort(function (a, b) { if ($('td:nth-child('+ nr +')', a).text() == "Name") return $('td:nth-child('+ nr +')', a).text(); else if (asc) { return $('td:nth-child('+ nr +')', a).text().localeCompare($('td:nth-child('+ nr +')', b).text()); } else { return $('td:nth-child('+ nr +')', b).text().localeCompare($('td:nth-child('+ nr +')', a).text()); } }).appendTo(tbody);} 

Answer 5

这是一个使用jquery进行表排序的修改版本，对我来说可以作为一个简单的内部升序行 排序 function

 var $tbody = $('#mytable tbody'); $tbody.find('tr').sort(function(a, b) { var tda = $(a).attr('data-order'); // target order attribute var tdb = $(b).attr('data-order'); // target order attribute // 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); 

  
 
 
 
d
 
 
 
b
 
 
 
a
 
 
 
c
 
  

Answer 6

如果您有超过10行，则该function不再正常工作。 这是@ irvin-dominin的更新版本

  $('.js_sortme').click(function (e) { var $sort = this; var $table = $('#floorplan-table-list'); var $rows = $('tbody > tr', $table); var $type = $($sort).attr('data-type'); if ($($sort).hasClass('asc')) { $('.js_sortme', $table).removeClass('desc'); $('.js_sortme', $table).removeClass('asc'); $('.js_sortme', $table).removeClass('active'); $($sort).addClass('desc'); $($sort).addClass('active'); } else { $('.js_sortme', $table).removeClass('desc'); $('.js_sortme', $table).removeClass('asc'); $('.js_sortme', $table).removeClass('active'); $($sort).addClass('asc'); $($sort).addClass('active'); } $rows.sort(function (a, b) { var keyA = parseInt($('td.'+$type+'', a).attr('data-position')); var keyB = parseInt($('td.'+$type+'', b).attr('data-position')); if ($($sort).hasClass('asc')) { var result = keyA - keyB; if (result !== 0) { return result; } // Fetch secondary keys keyA = parseInt( $('td.'+$type+'', a).attr('data-position') ); keyB = parseInt( $('td.'+$type+'', b).attr('data-position') ); return keyA - keyB; } else { var result = keyB - keyA; if (result !== 0) { return result; } // Fetch secondary keys keyA = parseInt( $('td.'+$type+'', a).attr('data-position') ); keyB = parseInt( $('td.'+$type+'', b).attr('data-position') ); return keyB - keyA; } }); $.each($rows, function (index, row) { $table.append(row); }); e.preventDefault(); }); 

表行将如下所示，使用类名作为类型：使每个kolom可以自行排序;

   a-value-1 b-value-3   a-value-2 b-value-2   a-value-3 b-value-1