使用 PHP 对表格进行排序答案

【问题标题】：Sorting of Table using PHP使用 PHP 对表格进行排序
【发布时间】：2016-04-10 05:19:10
【问题描述】：

输入正确的代码后，表格的排序完全没有出现。请帮我。我确实包含了我的 CSS 样式和 PHP 编码。谢谢！

下面是当前结果的图片：

这是我的 PHP 编码：

<html>
    <head>
        <link rel="stylesheet" href="thead.css"/>

    <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script> 
    <script type="text/javascript" src="scripts/jquery.tablesorter.js"></script> 
    <script type ="text/javascript">

        $(document).ready(function() 
            { 
                $("#myTable").tablesorter(); 
            } 
        ); 
    </script>
</head> 
<body>  

    <?php

    if ($_SESSION ['role_id'] == 1) {   ?>
    <table border="1" cellpadding="0" cellspacing="0">

    <table border='1' width='78%' id='myTable' class='tablesorter'>
                    <thead>
                    <tr class= 'header'>
                        <th>  Booking ID  </th>
                        <th>  Staff ID     </th>
                        <th>   Asset ID    </th>
                        <th>  Start Date    </th>
                        <th>  End Date      </th>
                       <th>Collection Date </th>
                        <th> Actual Return Date </th>

                    </tr> 
                    </thead> 
                        <tbody>
         <?php 
                while ($fetchSelect = mysqli_fetch_assoc($result)) {
                $id = $fetchSelect['booking_id'];
                $staffid = $fetchSelect['user_id'];
                $assetid = $fetchSelect['asset_id'];
                $startdate = $fetchSelect['start_date'];
                $duedate = $fetchSelect['due_date'];
                $collectiondate = $fetchSelect['collection_date'];
                $returndate = $fetchSelect['return_date'];
                ?>

                        <tr>
                            <td><?php echo $id; ?></td>
                            <td><?php echo $staffid; ?></td>
                            <td><?php echo $assetid; ?></td>
                            <td><?php echo $startdate; ?></td>
                            <td><?php echo $duedate; ?></td>
                            <td><?php echo $collectiondate; ?></td>
                            <td><?php echo $returndate; ?></td>


    <?php
         } ?>
            </tbody>
            </table>
    <?php
    }else{ 
        exit;
    }
    </body>
    </html>

我的 CSS 样式：

    table.sortable thead {
        background-color:#eee;
        color:#666666;
        font-weight: bold;
        cursor: default;
    }

    table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
        content: " \25B4\25BE" 
    }

【问题讨论】：

使用数据表来显示表格。它提供了多种功能，如排序分页等
为什么要开始 2 table tag 。只是想知道<table border="1" cellpadding="0" cellspacing="0"> <table border='1' width='78%' id='myTable' class='tablesorter'>
初始化了两张表，只保留一张。另外，您忘记在循环中关闭</tr>。
tablesorter.com/docs这个文档例子很清楚
请查看我的 JSFiddle 以供参考：jsfiddle.net/983fwq38

标签： php html sorting html-table

【解决方案1】：

如果您想使用 php 对表进行排序，只需在查询中添加 ACS 或 DESC 的顺序作为查询的结尾。它将显示您想要的排序。

不需要任何排序表...只关注你的查询。

e。 G。从学生顺序中选择 * 按标记 desc；

它会在排序记录中首先显示最高分。

你可以吗..或者你想用表格排序来排序。

【讨论】：

【解决方案2】：

某些情况可能会导致错误

你没有关闭 php 结束标签

<?php }else{ exit; } ?> // '?>' is missed </body> </html>
$_SESSION ['role_id'] 不包含 1（可能是）。
如果上述两种情况都不是解决方案，请尝试我尝试过的示例link

【讨论】：

【解决方案3】：

为了排序，我使用这个：

在我的表头中我只是添加了

<th onclick='sortTable(this)'>[HeaderTextHere]</th>

Javascipt 代码：

var tableId;
// Gets the table by its id
var $ = function( id ) {  return document.getElementById( id ); },
  $$ = function( query , base ) {
    return ( base||document).querySelectorAll( query );
  },
  table = $(tableId),
  rows = [], 
  cellClassArray = [];
//populates the row array and the class array
function getSortable(columnClicked){
  var trows = document.getElementById(tableId).rows , //the unmodified rows
    rows =[], //the rowdata from start to end '<tr>...</tr>'
    cells =[], //innerHTML of selected cell
    cellClassArray =[]; //class names from the cells

  for( var i = 1; i< trows.length; i++ ) {
    //contains the class of the working cell
    var cellClass = trows[i].cells[0].className;
    //adding the cell values to the cell array
    cells.push(trows[i].cells[columnClicked].innerHTML);
    //if a new cellclass comes up then add it to the cellClassArray 
    //later I should also make an array for rowClass so this script also would work on tables where the class is set rowbased
    if(cellClassArray.indexOf(cellClass) == -1)
      cellClassArray.push(cellClass);
    //going through all the cells and deleting all class data
    for(z = 0; trows[i].cells.length > z; z++)
      trows[i].cells[z].className = '';
    //adding the working row to the rows array
    rows.push( trows[i] );
  }
  //creating and returning the multidim array, could maybe be improved
  var rowsAndClassArrays = [rows, cellClassArray, cells];
  return rowsAndClassArrays;
}

//Deletes and re-inserting the table
function updateRows( rows, tableId, cellClassArray) {
  //getting the table element
  var table = document.getElementById(tableId);
  //Deleting all rows in the table(except the header)
  while (table.rows.length > 1) {
    table.removeChild(table.lastChild);
  }

  //z shoud be changed to an int later on, to make it possible to have more than 2 row classes
  var z = true;
  //Re-inserting the rows
  for ( var i =0; i< rows.length ;i++ ){
    //Seemed better to put it into a var at time of writing
    var workRow = rows[i];
    //when changing z to int remember to also change this if to a switch
    //Giving the cells a classname if the had any
    if(z) {
      for(q = 0; rows[i].cells.length > q; q++)
        workRow.cells[q].className = cellClassArray[0];
    }
    else {
      for(q = 0; rows[i].cells.length > q; q++)
        workRow.cells[q].className = cellClassArray[1];
    }
    z = !z;
    //appending the rows to the table
    table.appendChild( workRow );
  }
}

function sortAlphabetically( el, tableId, columnClicked){
  //el i a bool for sort direction
  el.sort = ! el.sort;
  //array contaning row clases, rows, and value of the rows
  var rowsAndClassArray = getSortable(columnClicked),
  rows = [];
  //creating multidim array to make sorting easy
  for(var i = 0; i < rowsAndClassArray[0].length; i++) {
    rows[i] = [rowsAndClassArray[0][i], rowsAndClassArray[2][i]];  //[0] is the raw row data, [1] is the innerHTML of the selected column
  }
  //Sorting the rows 
  rows.sort(
    function(a, b) {
      if (a[1] === b[1]) {
        return 0;
      }
      else {
          return (el.sort) ? ((a[1] < b[1]) ? -1 : 1) : ((a[1] > b[1]) ? -1 : 1);
      }
    }
  );
  var cleanRows = []; // after sorting we dont need the column values anymore 
  for(var i = 0; i < rows.length; i++) {
  cleanRows.push(rows[i][0]);
  }
  cellClassArray = rowsAndClassArray[1];
  //updateRows is deleting all rows and inserting rows in the new order
  updateRows(cleanRows, tableId, cellClassArray);
}

function sortTable(th) {
    var columnNumber = th.parentNode.parentNode.parentNode.rows[0].cells.length;
    //Debugging code saved for latter use 
    //console.log(th.parentNode.parentNode.parentNode.rows[0].cells.length);
    //Caluculates what colum that have been clicked
    var columnClicked;
    for(i = 0; i < columnNumber; i++) {
      if(th == th.parentNode.parentNode.parentNode.rows[0].cells[i]) {
        columnClicked = i;
        break;
      }
    }
    //geting the tabel id
    tableId = th.parentNode.parentNode.parentNode.id;
    //sorting rows based on the clicked column and updates the table on the page
    sortAlphabetically(th, tableId, columnClicked);
}

它并不完美，有一些缺陷，但希望它可以帮助你前进。

【讨论】：

tablesorter 是一个插件，为什么要在这里开发自定义代码
我不记得为什么了，但是当我玩排序时，tablesorter 给了我一些问题/玩得不好，因此我改用自定义代码。
非常感谢（：非常感谢您的帮助。我的代码已经可以工作了！祝您有美好的一天（：