dynamic table with filter options

sonofjorel · August 18, 2010

I am trying to create a dynamic table that gets generated based upon users selection of last name (via a select menu) as well as the ability to filter all the table contents between two ages. Additionally, I would like the ability to select all last names between two ages as well. Each item I would hope to have a onchange command.

Thanks in advance for any help on the above items.

Here is the main php code

<?php

$con = mysql_connect('localhost', 'root', '');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("test", $con);

$lastname_result = mysql_query("SELECT lastname FROM user GROUP BY lastname");

$result = mysql_query("SELECT * FROM user");

?>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../themes/style.css" rel="stylesheet" type="text/css" media="print, projection, screen" /></link>
<link href="../common.css" rel="stylesheet" type="text/css"></link>
</head>

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="5" class="main">
<tr>
  		<td width="160" valign="top"></td>
    	<td width="732" valign="top">
    	
    		<table width="90%" border="0" align="center">
    			<form action="test3.php" method="post">
      				<select name="area" onchange="submit">
      				<option value="">Select an lastname</option>
      				<option value=""></option>
      				<?php while(list($lastname)=mysql_fetch_array($lastname_result))
      				{
      					echo "<option value='$lastname'>$lastname</option>";
      				}?>
       				</select>
      
				<label for="startage">From</label>
  				<input type="text" id="from" name="from"/>
  				<label for="endage">to</label>
  				<input type="text" id="to" name="to"/>
  				<input type="submit" name="Submit" value="Refresh" />
      			</form>
      		</table>
		<table id="tablesorter" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
			<thead>
				<tr>
					<th>First Name</th>
					<th>Last Name</th>
					<th>Age</th>
					<th>Hometown</th>
					<th>Job</th>
				</tr>
			</thead>
			<tbody>
			<?php
			while($row=mysql_fetch_assoc($result)){
			?>
				<tr>
					<td><?php echo $row['firstname']; ?></td>
					<td><?php echo $row['lastname']; ?></td>
					<td><?php echo $row['age']; ?></td>
					<td><?php echo $row['hometown']; ?></td>
					<td><?php echo $row['job']; ?></td>
				</tr>
				<?php } // End while loop. ?>
			</tbody>
		</table>  
   	  <p> </p>
      <p> </p>
  <p align="right">  </p></td>
    <td width="196" valign="top"> </td>
  </tr>
</table>
</body>
</html>

and here is the sql code to generate a test database.

CREATE DATABASE /*!32312 IF NOT EXISTS*/`test` /*!40100 DEFAULT CHARACTER SET latin1 */;

DROP TABLE IF EXISTS `user`;

CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `firstname` varchar(20) NOT NULL,
  `lastname` varchar(20) NOT NULL,
  `age` int(3) NOT NULL,
  `hometown` varchar(25) NOT NULL,
  `job` varchar(25) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;

/*Data for the table `user` */

insert  into `user`(`id`,`firstname`,`lastname`,`age`,`hometown`,`job`) values 
(1,'Peter','Griffin',41,'Quahog','Brewery'),
(2,'Lois','Griffin',40,'Newport','Piano Teacher'),
(3,'Joseph','Swanson',39,'Quahog','Police Officer'),
(4,'Glenn','Quagmire',41,'Quahog','Pilot'),
(5,'Megan','Griffin',16,'Quahog','Student'),
(6,'Stewie','Griffin',2,'Quahog','Dictator');

jcbones · August 19, 2010

I was bored, so I whipped you something up. A couple of different files, the names MUST be exact, or you will have to change the scripts. Fully commented what was added.

ALL FILES RESIDE IN THE SAME DIRECTORY!

index.php

<?php
include('config.php');  //Include the database connections in it's own file, for easy integration in multiple pages.

$lastname_result = mysql_query("SELECT lastname FROM user GROUP BY lastname");

$result = mysql_query("SELECT * FROM user");

?>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../themes/style.css" rel="stylesheet" type="text/css" media="print, projection, screen" /></link>
<link href="../common.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="ajax.js"></script>  <?php //link to ajax.js ?>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="5" class="main">
	<tr>
		<td width="160" valign="top"></td>
		<td width="732" valign="top">
			<table width="90%" border="0" align="center">
				<form action="test3.php" method="post">
				<label for="startage">From</label>
				<input type="text" id="from" name="from" onkeyup="getNames();" />		<?php //added javascript function call to function located in "ajax.js" ?>
				<label for="endage">to</label>
				<input type="text" id="to" name="to" onkeyup="getNames();" />			   <?php //added javascript function call to function located in "ajax.js" ?>
				<select id="selectbox" name="area" onchange="getResults(this.value);"> <?php //added javascript function call to function located in "ajax.js", and changed the id for content change via javascript. ?>
				<option value="">Select an lastname</option>
				<option value=""></option>	
				<?php while(list($lastname)=mysql_fetch_array($lastname_result)) {
				     echo "<option value='$lastname'>$lastname</option>";
				}
				?>
				</select>								
				</form>
			</table>
			<table id="tablesorter" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
				<thead>
				<tr>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Age</th>
				<th>Hometown</th>
				<th>Job</th>
				</tr>
				</thead>
				<tbody id="tableBody"> <?php //added id to the tbody so we could change the content via javascript ?>

				<?php
				while($row=mysql_fetch_assoc($result)){
				?>
					<tr>
						<td><?php echo $row['firstname']; ?></td>
						<td><?php echo $row['lastname']; ?></td>
						<td><?php echo $row['age']; ?></td>
						<td><?php echo $row['hometown']; ?></td>
						<td><?php echo $row['job']; ?></td>
					</tr>
				<?php } // End while loop. ?>
				</tbody>
			</table>  
			<p> </p>
			<p> </p>
			<p align="right">  </p>
		</td>
		<td width="196" valign="top"> </td>
	</tr>
</table>
</body>
</html>

table.list.php

<?php
include('config.php');  //database connection.
if(!isset($_GET['lastname'])) { //if the proper get parameter is not there, redirect to google.
header('Location: http://google.com');
exit();
}

$lastname = preg_replace('~[^A-Za-z]+~','',$_GET['lastname']);  //strip out anything but alpha for the name.
$lastname = trim($lastname); //trim the name from all whitespace.
if($lastname != '') { //check against an empty string.  could have just used "empty()".
$where = ' WHERE lastname = \'' . $lastname . '\''; //write the where clause.
}
else { //if lastname is empty, the where clause will be to, and it will return all names.
$where = NULL;
}

$result = mysql_query("SELECT * FROM user $where"); //get the database result.

				while($row=mysql_fetch_assoc($result)){  //loop and display data.
				?>
					<tr>
						<td><?php echo $row['firstname']; ?></td>
						<td><?php echo $row['lastname']; ?></td>
						<td><?php echo $row['age']; ?></td>
						<td><?php echo $row['hometown']; ?></td>
						<td><?php echo $row['job']; ?></td>
					</tr>
				<?php } // End while loop. ?>

select.list.php

<?php
include('config.php');  //database connections.

if(!isset($_GET['to']) && !isset($_GET['from'])) {  //if the uri parameters are not there send em to google.
header('Location: http://google.com');
exit();
}
$sql = array(); //start an array.
$to = (isset($_GET['to'])) ? (int)$_GET['to'] : NULL; //if to is not set, then make it null, otherwise force it to an integer.
$from = (isset($_GET['from'])) ? (int)$_GET['from'] : NULL; //if from is not set, then make it null, otherwise force it to an integer.

if($to !== NULL && $to != 0 ) { //if to is not null, or is not equal to 0, then set it up for the query.
$sql['to'] = ' age <= ' . $to;
}
if($from !== NULL && $from != 0) { //same goes for "from".
$sql['from'] = ' age >= ' . $from;
}

if(!empty($sql)) { //if the sql array is not empty, set the where query.
$where = ' WHERE ' . implode(' AND ' , $sql);
}

$query = "SELECT lastname FROM user $where GROUP BY lastname"; //write the query.
//echo $query;
$lastname_result = mysql_query($query) or die($query . ' ' . mysql_error()); //execute the query, or die trying.
				echo '<option value="">Select an lastname</option>
						<option value=""></option>	';
				 while(list($lastname)=mysql_fetch_array($lastname_result)) {
				     echo "<option value='$lastname'>$lastname</option>";
				}
?>

config.php

<?php
$con = mysql_connect('localhost', 'root', '');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
mysql_select_db("test", $con);
?>

ajax.js

var xmlHttp

function getNames() {
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
from = document.getElementById('from').value;
to = document.getElementById('to').value;
sql = 'from=' + from + '&to=' + to; 	 
url="select.list.php";
url=url+"?"+sql;

xmlHttp.onreadystatechange = function() {
	if (xmlHttp.readyState==4)
	{ 
		document.getElementById('selectbox').innerHTML=xmlHttp.responseText;
	}		
}
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 

function getResults(name) {
xmlHttp=GetXmlHttpObject();
if(xmlHttp==null) {
alert("Your browser does not support AJAX!");
return;
}
url='table.list.php';
url=url+'?lastname='+name;
xmlHttp.onreadystatechange = function() {
	if (xmlHttp.readyState==4)
	{ 
		document.getElementById('tableBody').innerHTML=xmlHttp.responseText;
	}		
}
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

Tested in Firefox Only.

sonofjorel · August 19, 2010

jcbones,

This worked brilliantly for my purposes. I learned a lot just from playing with your code some.

Might you happen to be able to explain how I could incorporate a table sorter similar to http://tablesorter.com/docs/ ? I have been playing with this in addition to your modified code with no luck as of yet. I would like the ability to sort each column and have the zebra stripe incorporated.

Thanks in advance.

sonofjorel · August 19, 2010

As I was double checking it's functionality, I noticed that age filtering aspect only filters what is displayed in the select menu. Once you click on a name, then all individuals for that name are still displayed. For example, if you choose From: 20 and To: 40, select Griffin, all Griffin's are displayed. When only Peter and Lois should be displayed. Any thoughts?

Also, if I choose to add a column for Birthdate in the ISO format (yyyy-mm-dd) and filter on that instead of age, how might the ajax.js change?

Regards,

sonofjorel

jcbones · August 19, 2010

Yep, I didn't code it to do that, but `tis an easy fix.

Try replacing the following files with the ones posted.

ajax.js

var xmlHttp

function getNames() {
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
from = document.getElementById('from').value;
to = document.getElementById('to').value;
sql = 'from=' + from + '&to=' + to; 	 
url="select.list.php";
url=url+"?"+sql;

xmlHttp.onreadystatechange = function() {
	if (xmlHttp.readyState==4)
	{ 
		document.getElementById('selectbox').innerHTML=xmlHttp.responseText;
	}		
}
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 

function getResults(name) {
xmlHttp=GetXmlHttpObject();
if(xmlHttp==null) {
alert("Your browser does not support AJAX!");
return;
}
from = document.getElementById('from').value;
to = document.getElementById('to').value;
if(from != '') {
name = name+'&from='+from;
}
if(to != '') {
name = name+'&to='+to;
}
url='table.list.php';
url=url+'?lastname='+name;
xmlHttp.onreadystatechange = function() {
	if (xmlHttp.readyState==4)
	{ 
		document.getElementById('tableBody').innerHTML=xmlHttp.responseText;
	}		
}
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

table.list.php

<?php
include('config.php');  //database connection.
if(!isset($_GET['lastname'])) { //if the proper get parameter is not there, redirect to google.
header('Location: http://google.com');
exit();
}

$lastname = preg_replace('~[^A-Za-z]+~','',$_GET['lastname']);  //strip out anything but alpha for the name.
$lastname = trim($lastname); //trim the name from all whitespace.
if($lastname != '') { //check against an empty string.  could have just used "empty()".
$where = ' WHERE lastname = \'' . $lastname . '\''; //write the where clause.
}
else { //if lastname is empty, the where clause will be to, and it will return all names.
$where = NULL;
}

$from = (isset($_GET['from'])) ? (int)preg_replace('~[^0-9]+~','',$_GET['from']) : NULL;
$to = (isset($_GET['to'])) ? (int)preg_replace('~[^0-9]+~','',$_GET['to']) : NULL;

if($from != NULL) {
if($lastname == '') {
	$where = ' WHERE ';
}
else {
	$where .= ' AND ';
}
$where .= ' age >= ' . $from;
}
if($to != NULL) {
if($from == NULL && $lastname == '') {
	$where = ' WHERE ';
}
else {
	$where .= ' AND ';
}
$where .= ' age <= ' . $to;
}
$query = "SELECT * FROM user $where";
$result = mysql_query($query); //get the database result.

				while($row=mysql_fetch_assoc($result)){  //loop and display data.
				?>
					<tr>
						<td><?php echo $row['firstname']; ?></td>
						<td><?php echo $row['lastname']; ?></td>
						<td><?php echo $row['age']; ?></td>
						<td><?php echo $row['hometown']; ?></td>
						<td><?php echo $row['job']; ?></td>
					</tr>
				<?php } // End while loop. ?>

Filtering on Birthdate would depend on how you output that birthdate. Post up the output, and I'll look at it.

sonofjorel · August 20, 2010

The dates are stored in MySQL and displayed in the ISO format (yyyy-mm-dd) i.e. 2010-08-20. Displaying it in the table in this manner and doing the filtering would be fine.

Essentially, the birthdate would do the same thing as the age filter in regards to finding birthdates between two dates. If I could replace the age filter with birthdate filter, that would be great.

Thanks

jcbones · August 20, 2010

OK, so a whole new re-write. (not quite)

1. The expected input values for the date ("from" and "to") are YYYY-mm-dd, YYYY/mm/dd, or mm/dd/YYYY. Basically any combination that strtotime() accepts.

2. If it were me, I would use the jQuery datepicker to make sure these inputs get the correct values. http://jqueryui.com/demos/datepicker/

Here are the files.

TABLE STRUCTURE

--
-- Table structure for table `user`
--

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `firstname` varchar(20) NOT NULL,
  `lastname` varchar(20) NOT NULL,
  `age` int(3) NOT NULL,
  `hometown` varchar(25) NOT NULL,
  `job` varchar(25) NOT NULL,
  `birthday` date NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

index.php

<?php
include('config.php');  //Include the database connections in it's own file, for easy integration in multiple pages.

$lastname_result = mysql_query("SELECT lastname FROM user GROUP BY lastname");

$result = mysql_query("SELECT * FROM user");

?>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../themes/style.css" rel="stylesheet" type="text/css" media="print, projection, screen" /></link>
<link href="../common.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="ajax.js"></script>  <?php //link to ajax.js ?>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="5" class="main">
	<tr>
		<td width="160" valign="top"></td>
		<td width="732" valign="top">
			<table width="90%" border="0" align="center">
				<form action="test3.php" method="post">
				<label for="startage">From</label>
				<input type="text" id="from" name="from" onkeyup="getNames();" />		<?php //added javascript function call to function located in "ajax.js" ?>
				<label for="endage">to</label>
				<input type="text" id="to" name="to" onkeyup="getNames();" />			   <?php //added javascript function call to function located in "ajax.js" ?>
				<select id="selectbox" name="area" onchange="getResults(this.value);"> <?php //added javascript function call to function located in "ajax.js", and changed the id for content change via javascript. ?>
				<option value="">Select an lastname</option>
				<option value=""></option>	
				<?php while(list($lastname)=mysql_fetch_array($lastname_result)) {
				     echo "<option value='$lastname'>$lastname</option>";
				}
				?>
				</select>								
				</form>
			</table>
			<table id="tablesorter" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
				<thead>
				<tr>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Age</th>
				<th>Birthday</th>
				<th>Hometown</th>
				<th>Job</th>
				</tr>
				</thead>
				<tbody id="tableBody"> <?php //added id to the tbody so we could change the content via javascript ?>

				<?php
				while($row=mysql_fetch_assoc($result)){
				?>
					<tr>
						<td><?php echo $row['firstname']; ?></td>
						<td><?php echo $row['lastname']; ?></td>
						<td><?php echo $row['age']; ?></td>
						<td><?php echo $row['birthday']; ?></td>
						<td><?php echo $row['hometown']; ?></td>
						<td><?php echo $row['job']; ?></td>
					</tr>
				<?php } // End while loop. ?>
				</tbody>
			</table>  
			<p> </p>
			<p> </p>
			<p align="right">  </p>
		</td>
		<td width="196" valign="top"> </td>
	</tr>
</table>
</body>
</html>

select.list.php

<?php
include('config.php');  //database connections.

if(!isset($_GET['to']) && !isset($_GET['from'])) {  //if the uri parameters are not there send em to google.
header('Location: http://google.com');
exit();
}
$from = (isset($_GET['from'])) ? date('Y-m-d',strtotime($_GET['from'])) : NULL;
$to = (isset($_GET['to'])) ? date('Y-m-d',strtotime($_GET['to'])) : NULL;

if($from != NULL && $to != NULL) {
$where = " WHERE birthday BETWEEN '$from' AND '$to'";
}
elseif($from != NULL) {
$where = " WHERE birthday >= '$from'";
}
elseif($to != NULL) {
$where = " WHERE birthday <= '$to'";
}


$query = "SELECT lastname FROM user $where GROUP BY lastname"; //write the query.
//echo $query;
$lastname_result = mysql_query($query) or die($query . ' ' . mysql_error()); //execute the query, or die trying.
				echo '<option value="">Select an lastname</option>
						<option value=""></option>	';
				 while(list($lastname)=mysql_fetch_array($lastname_result)) {
				     echo "<option value='$lastname'>$lastname</option>";
				}
?>

table.list.php

<?php
include('config.php');  //database connection.
if(!isset($_GET['lastname'])) { //if the proper get parameter is not there, redirect to google.
header('Location: http://google.com');
exit();
}

$lastname = preg_replace('~[^A-Za-z]+~','',$_GET['lastname']);  //strip out anything but alpha for the name.
$lastname = trim($lastname); //trim the name from all whitespace.
if($lastname != '') { //check against an empty string.  could have just used "empty()".
$where = ' WHERE lastname = \'' . $lastname . '\''; //write the where clause.
}
else { //if lastname is empty, the where clause will be to, and it will return all names.
$where = NULL;
unset($lastname);
}

$from = (isset($_GET['from'])) ? date('Y-m-d',strtotime($_GET['from'])) : NULL;
$to = (isset($_GET['to'])) ? date('Y-m-d',strtotime($_GET['to'])) : NULL;

if($from != NULL && $to != NULL) {
$where .= (isset($lastname)) ? ' AND ' : ' WHERE ';
$where .= " birthday BETWEEN '$from' AND '$to'";
}
elseif($from != NULL) {
$where .= (isset($lastname)) ? ' AND ' : ' WHERE ';
$where .= " birthday >= '$from'";
}
elseif($to != NULL) {
$where .= (isset($lastname)) ? ' AND ' : ' WHERE ';
$where .= " birthday <= '$to'";
}

$query = "SELECT * FROM user $where";
$result = mysql_query($query); //get the database result.

				while($row=mysql_fetch_assoc($result)){  //loop and display data.
				?>
					<tr>
						<td><?php echo $row['firstname']; ?></td>
						<td><?php echo $row['lastname']; ?></td>
						<td><?php echo $row['age']; ?></td>
						<td><?php echo $row['birthday']; ?></td>
						<td><?php echo $row['hometown']; ?></td>
						<td><?php echo $row['job']; ?></td>
					</tr>
				<?php } // End while loop. ?>

No changes to ajax.js and no changes to config.php.

sonofjorel · August 23, 2010

This works great! I had intended on using the jquery datepicker; however, I wanted to get the foundation down first. Would you happen to have any thoughts on how to incorporate the jquery tablesorter ( http://tablesorter.com/docs/ ) with the filtering options? I have not had any success with that portion as of yet. Perhaps because ajax.js with tableBody would be a subset of tablesorter id fields in the html portion, and conflicting with it?

I'm not asking for you to write the code, as you have done more than I could have asked for, but if you have a suggestion. Hopefully this was somewhat interesting and challenging.

jcbones · August 24, 2010

Using jQuery, we can use a different method of getting HTTPrequests. Based on this I have re-done the file. Just make sure you have all of the needed .js files for the tablesorter. Obtainable in your link.

<?php
include('config.php');  //Include the database connections in it's own file, for easy integration in multiple pages.

$lastname_result = mysql_query("SELECT lastname FROM user GROUP BY lastname");

$result = mysql_query("SELECT * FROM user");

?>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../themes/style.css" rel="stylesheet" type="text/css" media="print, projection, screen" /></link>
<link href="../common.css" rel="stylesheet" type="text/css"></link>		
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>	
<script type="text/javascript">	
$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
); 

function reSort(par) {
$("#tableBody").empty();
var vfrom = document.getElementById('from').value;
var vto = document.getElementById('to').value;
$.get('table.list.php?from='+vfrom+'&to='+vto+'&lastname='+par,function(html) { 
             // append the "ajax'd" data to the table body 
             $("#tableBody").append(html); 
            // let the plugin know that we made a update 
            $("#myTable").trigger("update"); 
            // set sorting column and direction, this will sort on the first and third column 
            var sorting = [[2,1],[0,0]]; 
            // sort on the first column 
            $("#myTable").trigger("sorton",[sorting]); 
        }); 
}

function getNames() {
var vfrom = document.getElementById('from').value;
var vto = document.getElementById('to').value;
$("#selectbox").empty();
$.get('select.list.php?from='+vfrom+'&to='+vto,function(html) {
		$("#selectbox").append(html);
		});
}

</script>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="5" class="main">
	<tr>
		<td width="160" valign="top"></td>
		<td width="732" valign="top">
			<table width="90%" border="0" align="center">
				<form action="test3.php" method="post">
				<label for="from">From</label>
				<input type="text" id="from" name="from" onkeyup="getNames();"/>
				<label for="to">to</label>
				<input type="text" id="to" name="to" onkeyup="getNames();"/>
	   <?php //added javascript function call to function located in "ajax.js" ?>
				<select id="selectbox" name="area" onchange="reSort(this.value);"> <?php //added javascript function call to function located in "ajax.js", and changed the id for content change via javascript. ?>
				<option value="">Select an lastname</option>
				<option value=""></option>	
				<?php while(list($lastname)=mysql_fetch_array($lastname_result)) {
				     echo "<option value='$lastname'>$lastname</option>";
				}
				?>
				</select>								
				</form>
			</table>
			<table id="myTable" class="tablesorter" border="1" cellpadding="5" cellspacing="1">
				<thead>
				<tr>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Age</th>
				<th>Birthday</th>
				<th>Hometown</th>
				<th>Job</th>
				</tr>
				</thead>
				<tbody id="tableBody"> <?php //added id to the tbody so we could change the content via javascript ?>

				<?php
				while($row=mysql_fetch_assoc($result)){
				?>
					<tr>
						<td><?php echo $row['firstname']; ?></td>
						<td><?php echo $row['lastname']; ?></td>
						<td><?php echo $row['age']; ?></td>
						<td><?php echo $row['birthday']; ?></td>
						<td><?php echo $row['hometown']; ?></td>
						<td><?php echo $row['job']; ?></td>
					</tr>
				<?php } // End while loop. ?>
				</tbody>
			</table>  
			<p> </p>
			<p> </p>
			<p align="right">  </p>
		</td>
		<td width="196" valign="top"> </td>
	</tr>
</table>
</body>
</html>

P.S. I'll let you do the datepicker.

Sign In

dynamic table with filter options

Recommended Posts

sonofjorel

Link to comment

Share on other sites

jcbones

Link to comment

Share on other sites

sonofjorel

Link to comment

Share on other sites

sonofjorel

Link to comment

Share on other sites

jcbones

Link to comment

Share on other sites

sonofjorel

Link to comment

Share on other sites

jcbones

Link to comment

Share on other sites

sonofjorel

Link to comment

Share on other sites

jcbones

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information