使用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排序表

回答

相关问题