Hi how to show the results in a datatable while we are using yui
- by udaya
Hi
I am using yui to display a datagrid ...
<?php
$host = "localhost"; //database location
$user = "root"; //database username
$pass = ""; //database password
$db_name = "cms"; //database name
//database connection
$link = mysql_connect($host, $user, $pass);
mysql_select_db($db_name);
//sets encoding to utf8
$result = mysql_query("select dStud_id,dMarkObtained1,dMarkObtained2,dMarkObtained3,dMarkTotal from tbl_internalmarkallot");
//$res = mysql_fetch_array($result);
while($res = mysql_fetch_array($result))
{
//print_r($res);
$JsonVar = json_encode($res);
echo "<input type='text' name='json' id='json' value ='$JsonVar'>";
}
//print_r (mysql_fetch_array($result));
//echo "<input type='text' name='json' id='json' value ='$JsonVar'>";
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Client-side Pagination</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="build/paginator/assets/skins/sam/paginator.css" />
<link rel="stylesheet" type="text/css" href="build/datatable/assets/skins/sam/datatable.css" />
<script type="text/javascript" src="build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="build/connection/connection-min.js"></script>
<script type="text/javascript" src="build/json/json-min.js"></script>
<script type="text/javascript" src="build/element/element-min.js"></script>
<script type="text/javascript" src="build/paginator/paginator-min.js"></script>
<script type="text/javascript" src="build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="build/datatable/datatable-min.js"></script>
<script type="text/javascript" src="YuiJs.js"></script>
<style type="text/css">
#paginated {
text-align: center;
}
#paginated table {
margin-left:auto; margin-right:auto;
}
#paginated, #paginated .yui-dt-loading {
text-align: center; background-color: transparent;
}
</style>
</head>
<body class="yui-skin-sam" onload="ProjectDatatable(document.getElementById('json').value);">
<h1>Client-side Pagination</h1>
<div class="exampleIntro">
</div>
<input type="hidden" id="HfId"/>
<div id="paginated">
</div>
<script type="text/javascript">
/*YAHOO.util.Event.onDOMReady(function() {
YAHOO.example.ClientPagination = function() {
var myColumnDefs = [
{key:"dStud_id", label:"ID",sortable:true, resizeable:true, editor: new YAHOO.widget.TextareaCellEditor()},
{key:"dMarkObtained1", label:"Name",sortable:true},
{key:"dMarkObtained2", label:"CycleTest1"},
{key:"dMarkObtained3", label:"CycleTest2"},
{key:"dMarkTotal", label:"CycleTest3"},
];
var myDataSource = new YAHOO.util.DataSource("assets/php/json_proxy.php?");
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource.responseSchema = {
resultsList: "records",
fields: ["dStud_id","dMarkObtained1","dMarkObtained2","dMarkObtained3","dMarkTotal"]
};
var oConfigs = {
paginator: new YAHOO.widget.Paginator({
rowsPerPage: 15
}),
initialRequest: "results=504"
};
var myDataTable = new YAHOO.widget.DataTable("paginated", myColumnDefs,
myDataSource, oConfigs);
return {
oDS: myDataSource,
oDT: myDataTable
};
}();
});*/
</script>
<?php
echo "m".$res['dMarkObtained1'];
echo "m".$res['dMarkObtained2'];
echo "m".$res['dMarkObtained3'];
echo "Tm".$res['dMarkTotal'];
{?><? }?>
</body>
</html>
</body>
</html>
This is my page where i am fetching the data's from the database
function generateDatatable(target, jsonObj, myColumnDefs, hfId) {
var root;
for (key in jsonObj) {
root = key; break;
}
var rootId = "id";
if (jsonObj[root].length > 0) {
for (key in jsonObj[root][0]) {
rootId = key; break;
}
}
YAHOO.example.DynamicData = function() {
var myPaginator = new YAHOO.widget.Paginator({
rowsPerPage: 10,
template: YAHOO.widget.Paginator.TEMPLATE_ROWS_PER_PAGE,
rowsPerPageOptions: [5, 25, 50, 100],
pageLinks: 10
});
// DataSource instance
var myDataSource = new YAHOO.util.DataSource(jsonObj);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource.responseSchema = { resultsList: root, fields: new Array() };
myDataSource.responseSchema.fields[0] = rootId;
for (var i = 0; i < myColumnDefs.length; i++) {
myDataSource.responseSchema.fields[i + 1] = myColumnDefs[i].key;
}
// DataTable configuration
var myConfigs = {
sortedBy: { key: myDataSource.responseSchema.fields[1], dir: YAHOO.widget.DataTable.CLASS_ASC }, // Sets UI initial sort arrow
paginator: myPaginator
};
// DataTable instance
var myDataTable = new YAHOO.widget.DataTable(target, myColumnDefs, myDataSource, myConfigs);
myDataTable.subscribe("rowMouseoverEvent", myDataTable.onEventHighlightRow);
myDataTable.subscribe("rowMouseoutEvent", myDataTable.onEventUnhighlightRow);
myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow);
myDataTable.subscribe("checkboxClickEvent", function(oArgs) {
var hidObj = document.getElementById(hfId);
var elCheckbox = oArgs.target;
var oRecord = this.getRecord(elCheckbox);
var id = oRecord.getData(rootId);
if (elCheckbox.checked) {
if (hidObj.value == "") {
hidObj.value = id;
}
else {
hidObj.value += "," + id;
}
}
else {
hidObj.value = removeIdFromArray("" + hfId, id);
}
});
myPaginator.subscribe("changeRequest", function() {
if (document.getElementById(hfId).value != "") {
/*if (document.getElementById("ConfirmationPanel").style.display == 'block') {
document.getElementById("ConfirmationPanel").style.display = 'none';
}*/
document.getElementById(hfId).value = "";
}
return true;
});
myDataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
oPayload.totalRecords = oResponse.meta.totalRecords;
return oPayload;
}
return {
ds: myDataSource,
dt: myDataTable
};
} ();
}
function removeIdFromArray(values, id) {
values = document.getElementById(values).value;
if (values.indexOf(',') == 0) {
values = values.substring(1);
}
if (values.indexOf(values.length - 1) == ",") {
values = values.substring(0, values.length - 1);
}
var ids = values.split(',');
var rtnValue = "";
for (var i = 0; i < ids.length; i++) {
if (ids[i] != id) {
rtnValue += "," + ids[i];
}
}
if (rtnValue.indexOf(",") == 0) {
rtnValue = rtnValue.substring(1);
}
return rtnValue;
}
function edityuitable()
{
var ErrorDiv = document.getElementById("ErrorDiv");
var editId=document.getElementById("ctl00_ContentPlaceHolder1_HfId").value;
if(editId.length == 0)
{
ErrorDiv.innerHTML = getErrorMsgStyle("Select a row for edit");
//alert("Select a row for edit");
return false;
}
else
{
var editarray = editId.split(",");
if (editarray.length != 1)
{
ErrorDiv.innerHTML = getErrorMsgStyle("Select One row for edit");
//alert("Select One row for edit");
return false;
}
else if (editarray.length == 1)
{
return true;
}
}
}
function Deleteyuitable()
{
var ErrorDiv = document.getElementById("ErrorDiv");
var editId=document.getElementById("ctl00_ContentPlaceHolder1_HfId").value;
if(editId.length == 0)
{
ErrorDiv.innerHTML = getErrorMsgStyle("Select a row for Delete");
return false;
}
else
{
return true;
}
}
function ProjectDatatable(HfJsonValue){
alert(HfJsonValue);
var myColumnDefs = [
{key:"dStud_id", label:"ID", width:150, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}},
{key:"dMarkObtained1", label:"Marks", width:200, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}},
{key:"dMarkObtained2", label:"Marks1", width:150, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}},
{key:"dMarkObtained3", label:"Marks2", width:200, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}},
{key:"dMarkTotal", label:"Total", width:150, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}},
{key:"", formatter:"checkbox"}
];
var jsonObj=eval('(' + HfJsonValue + ')');
var target = "paginated";
var hfId = "HfId";
generateDatatable(target,jsonObj,myColumnDefs,hfId)
}
// JavaScript Document
This is my script page when i load the page i do get the first row from the database
but the consequtive data's are not displayed in the alert box how can i receieve the data's in the datagrid
