输入正确的代码后,表格的排序根本没有出现。请帮我。我确实包含了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"
}
答案 0 :(得分:0)
对于排序我使用:
在我的表格标题中,我只需添加
<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);
}
它并不完美并且有一些缺陷,但希望它可以帮助你前进。
答案 1 :(得分:0)
某些情况可能会导致错误
您没有关闭php结束标记
<?php
}else{
exit;
}
?>
// '?>' is missed
</body>
</html>
$ _ SESSION ['role_id']不包含1(可能是)。
如果以上两种情况都不是soln,请尝试我尝试的示例link
答案 2 :(得分:0)
如果要使用php对表进行排序,只需在查询中使用ACS或DESC添加顺序作为查询结束。它会根据您的需要显示排序。
不需要任何排序表...只关注你的查询。
即G。通过标记desc从学生订单中选择*;
它将在排序记录中首先显示最高标记。
你可以吗?或者你想要用表格排序。