...

View Full Version : sort table using javascript



wiccanwoman1103
10-20-2005, 09:27 PM
Ok I have a table built with php and html. I need to be able to sort fields either numerically or alphabetically. For example wor order number need to sort numerically. Here is the code that I currently have for the page.
Code:


<?php
$num = trim($_POST["num"]);
$user = addslashes(trim ($_POST["user"]));
$start_date = trim ($_POST["start_date"]);
$end_date = trim ($_POST["end_date"]);
$campus = trim ($_POST["campus"]);
$building_alfred = addslashes(trim ($_POST["building_alfred"]));
$building_wellsville = addslashes(trim ($_POST["building_wellsville"]));
$room = addslashes(trim ($_POST["room"]));
$problem = trim ($_POST["problem"]);
$summary = addslashes(trim ($_POST["summary"]));
$description = addslashes(trim ($_POST["description"]));
$status = trim($_POST["status"]);
?>

<?php
echo ("<span class='title'>Fields Searched:<br><br></span> ");
$sql = "";

if(!empty($num)){
echo("<span class='title'>Work Order #: </span>".$num.'&nbsp;&nbsp;&nbsp;&nbsp;');
if (empty($sql)){
$sql = $sql."WHERE";
}else{
$sql = $sql."AND";
}
$sql = $sql." id LIKE '%$num%' ";
}

if(!empty($user)){
echo("<span class='title'>Requestor: </span>".$user.'&nbsp;&nbsp;&nbsp;&nbsp;');
if (empty($sql)){
$sql = $sql."WHERE";
}else{
$sql = $sql."AND";
}
$sql = $sql." Requestor_Name LIKE '%$user%' ";
}

if(!empty($campus)){
echo("<span class='title'>Campus: </span>".$campus.'&nbsp;&nbsp;&nbsp;&nbsp;');
if (empty($sql)){
$sql = $sql."WHERE";
}else{
$sql = $sql."AND";
}
$sql = $sql." Campus LIKE '%$campus%' ";
}

if(!empty($building_alfred)){
echo("<span class='title'>Building: </span>".$building_alfred.'&nbsp;&nbsp;&nbsp;&nbsp;');
if (empty($sql)){
$sql = $sql."WHERE";
}else{
$sql = $sql."AND";
}
$sql = $sql." Building LIKE '%$building_alfred%' ";
}

if(!empty($building_wellsville)){
echo("<span class='title'>Building: </span>".$building_wellsville.'&nbsp;&nbsp;&nbsp;&nbsp;');
if (empty($sql)){
$sql = $sql."WHERE";
}else{
$sql = $sql."AND";
}
$sql = $sql." Building LIKE '%$building_wellsville%' ";
}

if(!empty($room)){
echo("<span class='title'>Room: </span>".$room.'&nbsp;&nbsp;&nbsp;&nbsp;');
if (empty($sql)){
$sql = $sql."WHERE";
}else{
$sql = $sql."AND";
}
$sql = $sql." Room LIKE '%$room%' ";
}

if(!empty($problem)){
echo("<span class='title'>Problem Type: </span>".$problem.'&nbsp;&nbsp;&nbsp;&nbsp;');
if (empty($sql)){
$sql = $sql."WHERE";
}else{
$sql = $sql."AND";
}
$sql = $sql." Problem LIKE '%$problem%' ";
}

if(!empty($summary)){
echo("<span class='title'>Summary: </span>".$summary.'&nbsp;&nbsp;&nbsp;&nbsp;');
if (empty($sql)){
$sql = $sql."WHERE";
}else{
$sql = $sql."AND";
}
$sql = $sql." Summary LIKE '%$summary%' ";
}

if(!empty($description)){
echo("<span class='title'>Description: </span>".$description.'&nbsp;&nbsp;&nbsp;&nbsp;');
if (empty($sql)){
$sql = $sql."WHERE";
}else{
$sql = $sql."AND";
}
$sql = $sql." Description LIKE '%$description%' ";
}

if(!empty($status)){
echo("<span class='title'>Status: </span>".$status.'&nbsp;&nbsp;&nbsp;&nbsp;');
if (empty($sql)){
$sql = $sql."WHERE";
}else{
$sql = $sql."AND";
}
$sql = $sql." Status LIKE '%$status%' ";
}

if(!empty($start_date)){
echo("<span class='title'>Start Date: </span>".$start_date.'&nbsp;&nbsp;&nbsp;&nbsp;');
if (empty($sql)){
$sql = $sql."WHERE";
}else{
$sql = $sql."AND";
}
$sql = $sql." Date_Submitted >= STR_TO_DATE('$start_date',GET_FORMAT(DATETIME,'ISO')) ";
}

if(!empty($end_date)){
echo("<span class='title'>End Date: </span>".$end_date.'&nbsp;&nbsp;&nbsp;&nbsp;');
if (empty($sql)){
$sql = $sql."WHERE";
}else{
$sql = $sql."AND";
}
$sql = $sql." Date_Submitted <= STR_TO_DATE('$end_date 23:59:59',GET_FORMAT(DATETIME,'ISO')) ";
}

$sql = "SELECT * FROM workorder ".$sql.";";

echo ("<br>");

?>
<?php
$link = mysql_connect("localhost", "uname", "pass");
mysql_select_db("helpdesk", $link);

$results = mysql_query($sql, $link);

$num_rows = mysql_num_rows($results);

echo "<br> Records Found:\n $num_rows";

?>

<div id="content">
<table align="center" class="styled_results">
<tr>
<th class="clean">Edit</th>
<th>W.O.#</th>
<th>Requestor</th>
<th>Date Submitted</th>
<th>Location</th>
<th>Problem Type</th>
<th>Summary</th>
<th>Status</th>
</tr>
<?php
$myRow = 0;
while ($row = mysql_fetch_assoc($results)) {
$myClass = ($myRow % 2) ? "" : " class='odd'";

echo '<tr align="center">';
echo '<td'.$myClass.'> <img src="../common/images/edit.gif"> </td>';
echo '<td'.$myClass.'>'.$row["id"].'</td>';
echo '<td'.$myClass.'>'.$row["Requestor_Name"].'</td>';
echo '<td'.$myClass.'>'.$row["Date_Submitted"].'</td>';
echo '<td'.$myClass.'>'.$row["Campus"].'<br>'.$row["Building"].'<br>'.$row["Room"];
echo '<td'.$myClass.'>'.$row["Problem"].'</td>';
echo '<td'.$myClass.'>'.$row["Summary"].'</td>';
echo '<td'.$myClass.' class = "wrap">'.$row["Status"].'</td>';
echo '</tr>';

$myRow++;
}
mysql_free_result($results);
?>
</table>
<br>
<div align="center"><INPUT TYPE="button" onClick="parent.location='admin_search.php'" value="Start a New Search"></div>
</div>
<input type="hidden" name="user" value="<?php echo($user) ?>" />
<input type="hidden" name="summary" value="<?php echo($summary) ?>" />
<input type="hidden" name="department" value="<?php echo($department) ?>" />
<input type="hidden" name="problem" value="<?php echo($problem) ?>" />
<input type="hidden" name="campus" value="<?php echo($campus) ?>" />
<input type="hidden" name="building" value="<?php echo($building) ?>" />
<input type="hidden" name="room" value="<?php echo($room) ?>" />
<input type="hidden" name="description" value="<?php echo($description) ?>" />


I need some help badly... My AIM SN is blinded710. This is due by the end of business on friday this week. I will gladly accept any help or advice. Any idead anyone?????

TheShaner
10-20-2005, 09:49 PM
Ok, I'm just brainstorming here and never really tried this.

Each <td> will have a <div></div> inside with your PHP variables inside the divs. Name all your divs with an id from a1 - ax, where x is the number of the last <td>/<div> pair created. Then use either a link or button to call a Javascript function to sort by WO#, or whatever you want. The JS function would loop through a1 - ax and grab each value: getElementById('a1').innerHTML and store it in an array. Then, with the array, sort it using a sort algorithm, and then output it back into the DIVs using the same method of writing to the innerHTML. That's all I could come up with. If you need code, then hopefully someone with more time can help you. I just don't have the time to really write an indepth JS function. Hopefully this gives you some guidance!

-Shane

Kor
10-21-2005, 10:10 AM
here's an example (see in attachment as well) of sorting/reversing upon columns using strict DOM methods. The advantage of using javascript DOM is that you don't need any server-side querry. The sorting is done locally. The code is full dynamic, as you can add/remove rows or columns without modify the code.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sortare ascendenta/descendenta pe coloane</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
tr {
background-color: #CCCCCC;
}
.tr1 {
background-color: #F5F5F5;
}
.tr2 {
background-color: #E5E5E5;
}
-->
</style>
<script type="text/JavaScript">
//Genuine code by Corneliu Lucian 'KOR' Rusu -- mailto:cornel@mc.ro
function sortIt(w){
var r=w.parentNode.parentNode.parentNode.getElementsByTagName('tr');
var oRows = new Array()//colectia de clone linii
var iRows = new Array()//matricea indexurilor liniilor
for(var i=1;i<r.length;i++){
oRows[i]=r[i].cloneNode(true);//cloneaza liniile
iRows[i]=r[i].rowIndex;
}
var q=w.parentNode.cellIndex;
var oCol = new Array()
var vCol = new Array()
for(var i=0;i<iRows.length;i++){
var v = r[i].cells[q].firstChild.nodeValue;
if(parseInt(v)){v=parseInt(v)}
oCol[i]=[v,iRows[i]];
vCol[i]=[v,iRows[i]];
}
oCol.shift();
vCol.shift();
sCol = oCol.sort(function(oCol,sCol){return oCol[0] == sCol[0] ? 0 : (oCol[0] < sCol[0] ? -1 : 1)});
if(vCol.toString()==sCol.toString()){sCol.reverse()}// switcher descendent/ascendent
var q=1;
for(var i=1;i<r.length;i++){//rescrie liniile
r[i].parentNode.replaceChild(oRows[sCol[i-1][1]],r[i]);
//START pastreaza alternata bg linii
q=(q>2)?1:q
r[i].className='tr'+q;q++;
// END pastreaza alternata bg linii
}
//schimba sagetile descendent/ascendent
var s =['desc.gif','cres.gif'];//url-ul relativ al sagetilor
var allS =r[0].getElementsByTagName('img');
var sag = w.getElementsByTagName('img')[0];
var url =(sag.getAttribute('src').indexOf(s[0])>-1)?s[1]:s[0];
sag.setAttribute('src',url);
for(var i=0;i<allS.length;i++){//initializeaza celelalte sageti
if(allS[i]!=sag){allS[i].setAttribute('src',s[0])}
}
}
</script>
</head>
<body>
<table width="400" border="0" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td width="33%"><strong>Firma</strong> <a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td width="33%"><strong>Localitatea</strong> <a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
<td width="34%"><strong>Niste cifre</strong> <a href="#" onclick="sortIt(this);return false"><img src="desc.gif" border="0"></a></td>
</tr>
<tr class="tr1">
<td>Boul zbucuimat</td>
<td>Draganesti-Olt</td>
<td>40 de euroi</td>
</tr>
<tr class="tr2">
<td>Albina cretina</td>
<td>Craiova</td>
<td>20 coco</td>
</tr>
<tr class="tr1">
<td>Calul prepuelnic</td>
<td>Baia Mare</td>
<td>1000</td>
</tr>
<tr class="tr2">
<td>Dinozaurul vesel</td>
<td>Arad</td>
<td>30</td>
</tr>
<tr class="tr2">
<td>Boul nezbucuimat</td>
<td>Baia Mica</td>
<td>500</td>
</tr>
</tbody>
</table>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum