Clicking column headings to sort and reverse sort

Discussion in 'PHP' started by cstallins, Jan 6, 2008.

  1. #1
    Using radio buttons and a Submit button I have successfully coded the PHP/MySQL that sorts my table of db records - I capture the radio button value in $_POST['sortOrder'] and pass that value to my query. It works very well, but is a little less than slick - the visitor has to select both a radio button and the Submit button.

    Some web sites offer the ability to sort a table of records by clicking on a column heading, then reverse the sort order by again clicking on the column heading. I have two column headings for which I would like to enable this functionality. Can you share with me how one passes a value from a piece of text (a column heading wrapped in an anchor tag?) to my PHP/MySQL query?

    Thank you very much for your time.
    Curtis
     
    cstallins, Jan 6, 2008 IP
  2. kendo1979

    kendo1979 Peon

    Messages:
    208
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    create a link for the text with a Get parameter to do the sort?

    example

    <a href="blabla.php?sort=ascending">column_name</a>

    and when it's being clicked, make your script change the sort variable to reverse the current variable

    <a href="blabla.php?sort=descending">column_name</a>
     
    kendo1979, Jan 6, 2008 IP
  3. wing

    wing Active Member

    Messages:
    210
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    58
    #3
    wing, Jan 6, 2008 IP
  4. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #4
    A JavaScript solution. No need to involve the server.
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <script type="text/javascript">
    
    	var fieldRef = [];
    	var origData = [];
    	var tmp = [];
    	var dateOrder = [];
    	var sortOrder = [];
    	var tmpDates = [];
    	var refDates = [];
    	var nRows = 0;
    	var nCells = 0;
    	var isForm = "";
    	var nBoxes = "";
    
    	function stripCommas(isData){
    
    		isData = isData.replace(/\,/g,"").replace(/^\$/,"").replace(/^£/,"").replace(/^¥/,"");
    		return isData;
    	}
    
    	function toDescendingTxt(a,b){
    
    		if(a > b){return -1}
       		if(a < b){return 1}
    		return 0;
    	}
    
    	function toAscendingNumeric(a,b){
    
    		 return a-b;
    	}
    
    	function toDescendingNumeric(a,b){
    
    		 return b-a;
    	}
    	
    	function sortAlphaNum(isCol,upDn){
    
    		if (upDn == 'up'){tmp.sort()}
    		else {tmp.sort(toDescendingTxt)}
    		for (i=0; i<tmp.length; i++)
    			{
    			 for (n=0; n<tmp.length; n++)
    				{
    			 	 if (origData[isCol][i] == tmp[n]){sortOrder[n] = i}
    				}
    			}
    	}
    
    	function sortNumeric(isCol,upDn){
    
    		if (upDn == 'up')
    			{
    			 for (i=0; i<tmp.length; i++)
    				{
    				 tmp[i] = stripCommas(tmp[i])
    				}
    			 tmp.sort(toAscendingNumeric);
    			}
    		else 	{
    			 for (i=0; i<tmp.length; i++)
    				{
    				 tmp[i] = stripCommas(tmp[i])
    				}
    			 tmp.sort(toDescendingNumeric);
    			}
    		
    		for (i=0; i<tmp.length; i++)
    			{
    			 for (n=0; n<tmp.length; n++)
    				{
    			 	 if (stripCommas(origData[isCol][i]) == tmp[n]){sortOrder[n] = i}
    				}
    			}
    	}
    
    	function sortDates(upDn){
    
    		tmp2 = [];
    		for (i=0; i<tmp.length; i++)
    			{
    			 tmpDates[i] = Date.parse(new Date(tmp[i]));
    			 refDates[i] = Date.parse(new Date(tmp[i]));
    			}
    		if (upDn == 'up'){tmpDates.sort()}
    		else {tmpDates.sort(toDescendingNumeric)}
    		for (i=0; i<tmp.length; i++)
    			{
    			 for (n=0; n<tmp.length; n++)
    				{
    				 if (refDates[i] == tmpDates[n])
    					{
    					 tmp2[n] = tmp[i];
      					 dateOrder[n] = i;
    					}
    				}
    			}
    		tmp = tmp2;
    	}
    
    	function checkDateType(isData){
    
    		splitDate = isData.split("/");
    		refDate = new Date(isData);
    		if (splitDate[0] < 1 || splitDate[0] > 12 || refDate.getDate() != splitDate[1] || splitDate[2].length != 4 || (!/^19|20/.test(splitDate[2])))
    			{
    			 return false;
    			}
    		return true;
    	}
    
    	function sortTable(isChecked,isCol,isBox,direction){
    
    		if (isChecked)
    			{
    			 for (i=0; i<nBoxes.length; i++)
    				{
    				 if (nBoxes[i] != isBox)
    					{
    					 nBoxes[i].disabled = true;
    					}
    				}
    			 for (i=0; i<nRows-1; i++)
    				{
    				 tmp[i] = isForm[fieldRef[isCol][i]].value;
    				}	
    			 nRef = stripCommas(tmp[0]);
    			 dateInfo = checkDateType(tmp[0]);
    			 if (dateInfo){sortDates(direction)}
    			 else if (isNaN(nRef)){sortAlphaNum(isCol,direction)}
    			 else if (!isNaN(nRef)){sortNumeric(isCol,direction)}
    			 for (i=0; i<nCells; i++)
    				{
    				 for (n=0; n<nRows-1; n++)
    					{
    					 if (dateInfo){isForm[fieldRef[i][n]].value = origData[i][dateOrder[n]]}
    		 			 else {isForm[fieldRef[i][n]].value = origData[i][sortOrder[n]]}
    					}
    				} 
    			} 
    		if (!isChecked)
    			{
    			 for (i=0; i<nBoxes.length; i++)
    				{
    				 nBoxes[i].disabled = false;
    				}	
    			 for (i=0; i<nCells; i++)
    				{
    				 for (n=0; n<nRows-1; n++)
    					{
    					 isForm[fieldRef[i][n]].value = origData[i][n];
    					}
    				}
    			} 
    	}
    
    	function init(){
    
    		nBoxes = document.getElementsByName('box');
    		isForm = document.forms[0];
    		isTable = document.getElementById('data1');
    		nRows = isTable.rows.length-1;
    		nCells = isTable.rows[0].cells.length-1;
    		for (i=0; i<nCells; i++)
    			{
    			 fieldRef[i] = [];
    			 for (n=0; n<nRows-1; n++)
    				{
    				 fieldRef[i][n] = (nCells*n)+i;
    				}	
    			}
    		for (i=0; i<nCells; i++)
    			{
    			 origData[i] = [];
    			 for (n=0; n<nRows-1; n++)
    				{
    				 origData[i][n] = isForm[fieldRef[i][n]].value;
    				}
    			}
    	}
    
    	onload=init;
    
    </script>
    </head>
    <body>
    <form action="">
                   <table id='data1' align='center' cellspacing='0' cellpadding='3' border='0'>
                        <tbody>
                             <tr>
                                  <td>
                                       &nbsp;
                                  </td>
                                  <td>
                                       C1
                                  </td>
                                  <td>
    
                                       C2
                                  </td>
                                  <td>
                                       C3
                                  </td>
                                  <td>
                                       C4
                                  </td>
                                  <td>
                                       C5
                                  </td>
    
                                  <td>
                                       C6
                                  </td>
                             </tr>
                             <tr>
                                  <td>
                                       R1
                                  </td>
                                  <td>
                                       <input type="text" size='8' value='Rain'>
    
                                  </td>
                                  <td>
                                       <input type="text" size='8' value='£65'>
                                  </td>
                                  <td>
                                       <input type="text" size='16' value='(505) 771-9876 x4'>
                                  </td>
                                  <td>
                                       <input type="text" size='10' value='North Point'>
    
                                  </td>
                                  <td>
                                       <input type="text" size='8' value='1,065.249'>
                                  </td>
                                  <td>
                                       <input type="text" size='8' value='04/30/2005'>
                                  </td>
                             </tr>
                             <tr>
                                  <td>
                                       R2
                                  </td>
                                  <td>
                                       <input type="text" size='8' value='Fog'>
                                  </td>
                                  <td>
                                       <input type="text" size='8' value='1050'>
                                  </td>
                                  <td>
                                       <input type="text" size='16' value='(216) 221-8763'>
                                  </td>
                                  <td>
                                       <input type="text" size='10' value='South-Front'>
                                  </td>
                                  <td>
                                       <input type="text" size='8' value='482.1'>
                                  </td>
                                  <td>
                                       <input type="text" size='8' value='07/13/2005'>
                                  </td>
                             </tr>
                             <tr>
                                  <td>
                                       R3
                                  </td>
                                  <td>
                                       <input type="text" size='8' value='Hail'>
                                  </td>
                                  <td>
                                       <input type="text" size='8' value='3'>
                                  </td>
                                  <td>
                                       <input type="text" size='16' value='(619) 881-3331'>
                                  </td>
                                  <td>
                                       <input type="text" size='10' value='East Clark'>
                                  </td>
                                  <td>
                                       <input type="text" size='8' value='17,825.7'>
                                  </td>
                                  <td>
                                       <input type="text" size='8' value='11/3/2004'>
                                  </td>
                             </tr>
                             <tr>
                                  <td>
                                       R4
                                  </td>
                                  <td>
                                       <input type="text" size='8' value='Snow'>
                                  </td>
                                  <td>
                                       <input type="text" size='8' value='Â¥ 423'>
                                  </td>
                                  <td>
                                       <input type="text" size='16' value='(216) 481-2226 x892'>
                                  </td>
                                  <td>
                                       <input type="text" size='10' value='West-River'>
                                  </td>
                                  <td>
                                       <input type="text" size='8' value='$55.79'>
                                  </td>
                                  <td>
                                       <input type="text" size='8' value='6/21/2006'>
                                  </td>
                             </tr>
                             <tr>
                                  <td>
                                       Up / Dn
                                  </td>
                                  <td align='center'>
                                       <input type="checkbox" name='box' onclick="sortTable(this.checked,0,this,'up')"> <input type="checkbox" name='box' onclick="sortTable(this.checked,0,this,'dn')">
                                  </td>
                                  <td align='center'>
                                       <input type="checkbox" name='box' onclick="sortTable(this.checked,1,this,'up')"> <input type="checkbox" name='box' onclick="sortTable(this.checked,1,this,'dn')">
                                  </td>
                                  <td align='center'>
                                       <input type="checkbox" name='box' onclick="sortTable(this.checked,2,this,'up')"> <input type="checkbox" name='box' onclick="sortTable(this.checked,2,this,'dn')">
                                  </td>
                                  <td align='center'>
                                       <input type="checkbox" name='box' onclick="sortTable(this.checked,3,this,'up')"> <input type="checkbox" name='box' onclick="sortTable(this.checked,3,this,'dn')">
                                  </td>
                                  <td align='center'>
                                       <input type="checkbox" name='box' onclick="sortTable(this.checked,4,this,'up')"> <input type="checkbox" name='box' onclick="sortTable(this.checked,4,this,'dn')">
                                  </td>
                                  <td align='center'>
                                       <input type="checkbox" name='box' onclick="sortTable(this.checked,5,this,'up')"> <input type="checkbox" name='box' onclick="sortTable(this.checked,5,this,'dn')">
                                  </td>
                             </tr>
                        </tbody>
                   </table>
              </form>
    	Sort rows based upon the sorted order of selected column -- either ascending or descending<br>
    	Any of the data types may be in any column
    </body>
    </html>
    Code (markup):
     
    Mike H., Jan 7, 2008 IP