Question

如何使用jQuery对此foreach循环进行排序？我将对id进行排序，但我现在不知道如何做到这一点。

   <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>

Answer 1

http://datatables.net/ - 是一个客户端JQuery插件，它允许您对PHP呈现的最终HTML进行排序/分页等。

我倾向于使用服务器端解决方案，但如果在1000行上有1000个，因为最初渲染页面所需的时间会非常长。

Answer 2

<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>jsmith@gmail.com</td> 
            <td>$50.00</td> 
            <td>http://www.jsmith.com</td> 
        </tr> 
        <tr> 
            <td>Bach</td> 
            <td>Frank</td> 
            <td>fbach@yahoo.com</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>

您还可以在jQuery TableShorter

上找到有关此插件的更多信息

Answer 3

这是另一个使用php 代码的简单排序表：

制作你的文件.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 =  <b>111111111</b></td><td>Still to spend =  <b>5555555</b></td></tr></tfoot></br></br> </table> </body> </html>

Answer 4

我非常喜欢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() }

用jQuery对表进行排序

4 个答案: