使用jQuery排序表

如何使用jQuery將此foreach循環排序？我將排序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 – 2012-03-16 11:06:50

在生成HTML之前在PHP中對數組進行排序不是更容易嗎？或者你在尋找某種「點擊此處排序列表」功能？ – JJJ 2012-03-16 11:13:00

你不能用jQuery對PHP的foreach循環進行排序。您可以使用PHP進行排序，也可以使用jQuery客戶端對PHP輸出的表格行進行排序。（雖然你可以對數組進行排序然後遍歷它，但是你無法真正地對循環進行排序......） – nnnnnn 2012-03-16 11:29:29

http://datatables.net/ - 是一個客戶端的jQuery插件，讓您排序/分頁等你的PHP呈現最終的HTML。

我傾向於使用服務器端解決方案，儘管如果1000行之後有1000個，因爲初始渲染頁面所需的時間會很長。

來源

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

我很喜歡從尼克處的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排序表

回答

相關問題