Question

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

下面的

是当前结果的图像：

capture3

这是我的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" 
    }

Answer 1

对于排序我使用：

在我的表格标题中，我只需添加

<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);
}

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

Answer 2

某些情况可能会导致错误

您没有关闭php结束标记

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

Answer 3

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

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

即G。通过标记desc从学生订单中选择*;

它将在排序记录中首先显示最高标记。

你可以吗？或者你想要用表格排序。

使用PHP对表进行排序

3 个答案: