Сортировка таблицы с jQuery

Как я могу сортировать этот цикл с jQuery? Я буду сортировать по id, но я не знаю, как это сделать.Сортировка таблицы с jQuery

<form id="fileForm" action="#" enctype="multipart/form-data" method="get"> 
     <table cellpadding="2" cellspacing="0" width="100%" class="grid"> 
      <tr> 
       <th>ID:</th> 
       <th>Time:</th> 
       <th>Location:</th> 
       <th>From IP:</th> 
       <th>Title (url):</th> 
       <th></th> 
      </tr> 
      <tr> 
       <td>1</td> 
       <td>12:00</td> 
       <td>Utrecht</td> 
       <td>192.019.192.00</td> 
       <td>site</td> 
      </tr> 
     </table> 
    </form>

источник

2012-03-16 Raymond van Os

Сортировка? Если вы используете jQuery, пожалуйста, покажите окончательный HTML, а не PHP –

. Разве не было бы проще отсортировать массив в PHP до генерации HTML? Или вы ищете какую-то функциональность «нажмите здесь, чтобы отсортировать список»? – JJJ

Вы не можете отсортировать цикл 'foreach' PHP с помощью jQuery. Вы либо сортируете его с помощью PHP, либо используете клиентскую сторону jQuery для сортировки строк таблицы, которые были выведены PHP. (Вы все равно не можете сортировать цикл, хотя можете отсортировать массив, а затем перебрать его ...) – nnnnnn

http://datatables.net/ - это на стороне клиента JQuery плагин, который позволит вам сортировать/постраничной и т.д. окончательного HTML, что делает ваш PHP.

Я хотел бы использовать серверное решение, хотя, если у вас 1000s на 1000s строк, так как время, затрачиваемое на изначальную визуализацию страницы, было бы очень длинным.

источник

2012-03-16 12:13:07 Greg

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> 
<table id="myTable" class="tablesorter"> 
     <thead> 
     <tr> 
      <th>Last Name</th> 
      <th>First Name</th> 
      <th>Email</th> 
      <th>Due</th> 
      <th>Web Site</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td>Smith</td> 
      <td>John</td> 
      <td>[email protected]</td> 
      <td>$50.00</td> 
      <td>http://www.jsmith.com</td> 
     </tr> 
     <tr> 
      <td>Bach</td> 
      <td>Frank</td> 
      <td>[email protected]</td> 
      <td>$50.00</td> 
      <td>http://www.frank.com</td> 
     </tr> 
     </tbody> 
    </table> 
<script> 
$(document).ready(function() 
{ 
    $("#myTable").tablesorter({sortList: [[0,0], [1,0]]}); 
}); 
</script>

Вы также можете найти более подробную информацию abbout этого плагина на jQuery TableShorter

источник

2013-03-14 11:16:45

Вот еще один простой стол сортировки, используя PHP код:

сделать свой-file.php, вставьте следующий код , и загрузите в свою папку. (Этот пример очень простой таблицы для сортировки и обработки простых значений, используя этот скрипт sortable.js)

<html><head> 
<script src="sorttable.js"></script> 

<style> 
tbody tr td {color:green;border-right:1px solid;width:200px;} 
</style> 
</head><body> 

<?php 
$First = array('a', 'b', 'c', 'd'); 
$Second = array('1', '2', '3', '4'); 

if (!empty($_POST['myFirstvalues'])) 
{ $First = explode("\r\n",$_POST['myFirstvalues']); $Second = explode("\r\n",$_POST['mySecondvalues']);} 

?> 

</br>Hi User. PUT your values</br></br> 
<form action="" method="POST"> 
projectX</br> 
<textarea cols="20" rows="20" name="myFirstvalues" style="width:200px;background:url(untitled.PNG);position:relative;top:19px;Float:left;"> 
<?php foreach($First as $vv) {echo $vv."\r\n";}?> 
</textarea> 

The due amount</br> 
<textarea cols="20" rows="20" name="mySecondvalues" style="width:200px;background:url(untitled.PNG);Float:left;"> 
<?php foreach($Second as $vv) {echo $vv."\r\n";}?> 
</textarea> 
<input type="submit"> 
</form> 

<table class="sortable" style="padding:100px 0 0 300px;"> 
<thead style="background-color:#999999; color:red; font-weight: bold; cursor: default; position:relative;"> 
    <tr><th>ProjectX</th><th>Due amount</th></tr> 
</thead> 
<tbody> 

<?php 
foreach($First as $indx => $value) { 
    echo '<tr><td>'.$First[$indx].'</td><td>'.$Second[$indx].'</td></tr>'; 
} 
?> 
</tbody> 
<tfoot><tr><td>TOTAL = &nbsp;<b>111111111</b></td><td>Still to spend = &nbsp;<b>5555555</b></td></tr></tfoot></br></br> 
</table> 
</body> 
</html>

источник

2013-04-05 06:59:12 TimeToGiveUpPcForever

Мне очень нравится это простое решение от Nick G на jQuery table sort

$('th').click(function(){ 
    var table = $(this).parents('table').eq(0) 
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index())) 
    this.asc = !this.asc 
    if (!this.asc){rows = rows.reverse()} 
    for (var i = 0; i < rows.length; i++){table.append(rows[i])} 
}) 
function comparer(index) { 
    return function(a, b) { 
     var valA = getCellValue(a, index), valB = getCellValue(b, index) 
     return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB) 
    } 
} 
function getCellValue(row, index){ return $(row).children('td').eq(index).html() }

источник

2014-07-01 13:16:44 mschu

Сортировка таблицы с jQuery

ответ

Смежные вопросы