The following is a solution for your problem which is based on Yahoo UI library (used for the data grid as well as for sorting the fields).
The PHP part of my code is based on my database and table you can use this example in such a way that it is suitable for your requirements.
As I mentioned earlier you need to download Yahoo UI developer library to make the below mentioned code work.
PHP Code:
<?php
class database
{
private $db_handle;
private $user_name;
private $password;
private $data_base;
private $host_name;
private $sql;
private $results;
function __construct($host="localhost",$user,$passwd)
{
$this->db_handle = mysql_connect($host,$user,$passwd);
}
function dbSelect($db)
{
$this->data_base = $db;
if(!mysql_select_db($this->data_base, $this->db_handle))
{
error_log(mysql_error(), 3, "/phplog.err");
die("Error connecting to Database");
}
}
function executeSql($sql_stmt)
{
$this->sql = $sql_stmt;
$this->result = mysql_query($this->sql);
}
function returnResults()
{
return $this->result;
}
}
$user = "root";
$passwd = "";
$db = "newTest";
$sql = "SELECT * FROM EMP ORDER BY empname";
$dbObject = new database($host,$user,$passwd);
$dbObject->dbSelect($db);
$dbObject->executeSql($sql);
$res = $dbObject->returnResults();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="../../build/datatable/assets/datatable.css">
<link type="text/css" rel="stylesheet" href="./css/examples.css">
<link type="text/css" rel="stylesheet" href="../../docs/assets/dpSyntaxHighlighter.css">
<style type="text/css">
/* custom css*/
#markup {margin:1em;}
#markup table {border-collapse:collapse;}
#markup th {border:1px solid #000;padding:.25em;background-color:#696969;color:#fff;}/*dark gray*/
#markup td {border:1px solid #000;padding:.25em;}
</style>
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-beta-debug.js"></script>
<script type="text/javascript" src="../../build/datatable/datatable-beta-debug.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<script type="text/javascript">
var dt;
YAHOO.example.enhanceFromMarkup = function() {
this.columnHeaders = [
{key:"empid",text:"employee ID",sortable:true},
{key:"empname",text:"employee name",type:"text",sortable:true},
{key:"empsal",text:"employee salary",type:"number",sortable:true},
];
this.columnSet = new YAHOO.widget.ColumnSet(this.columnHeaders);
var markup = YAHOO.util.Dom.get("markup");
this.dataTable = new YAHOO.widget.DataTable(markup,this.columnSet,null,{caption:" "});
};
YAHOO.util.Event.onAvailable("markup",YAHOO.example.enhanceFromMarkup,YAHOO.example.enhanceFromMarkup,true);
</script>
</head>
<body>
<div id="markup">
<table id="emp">
<thead>
<tr>
<th>Employee ID</th>
<th>Employee Name</th>
<th>Employee Salary</th>
</tr>
</thead>
<tbody>
<?
while($record = mysql_fetch_object($res))
{
echo "<tr>";
echo "<td>".$record->empid."</td>";
echo "<td>".$record->empname."</td>";
echo "<td>".$record->empsal."</td>";
echo "</tr>";
}
echo "<tbody></tr></table>";
?>
</div>
</body>
</html>
Additional Instructions
1. Install Yahoo UI developer library
2. In my case I've saved the above mentioned php code inside yui\examples\datatable which is inside my htdocs folder (web publish root).
3. If you are saving the file in another folder make sure that the path mentioned in my program are correct/valid
4. Plz let me know if you need any assistance to configure this code.
5. Change the database, table names, sql query(mentioned your fields) along with the database username and password.
6. Once you configure it correctly whenever you press the table headers then it will sort the contents based on your header clicking.
Sorting Members By Clicking Link
Reply With Quote
Bookmarks