Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2005
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation sort table using javascript

    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:
    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?????

  • #2
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    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

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    PHP 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 
    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] ? : (oCol[0] < sCol[0] ? -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 =['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> 
    Attached Files Attached Files
    Last edited by Kor; 10-21-2005 at 10:15 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •