Как я могу отсортировать этот цикл foreach с помощью jQuery? Я буду сортировать по 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>
http://datatables.net/ – это плагин JQuery на стороне клиента, который позволит вам сортировать / paginate и т. д. окончательный HTML-код, который создает ваш PHP.
Я хотел бы использовать серверное решение, хотя, если у вас 1000s на 1000s строк, так как время, затрачиваемое на изначальную визуализацию страницы, будет очень длинным.
<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>-<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>-<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
вот еще одна простая таблица сортировки с использованием 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 = <b>111111111</b></td><td>Still to spend = <b>5555555</b></td></tr></tfoot></br></br> </table> </body> </html>
Мне очень нравится это простое решение от 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() }