How to show the results in a datatable while we are using yui
<p>Hi 
     I am using yui to display a datagrid ... </p>

<pre><code> &lt;?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 "&lt;input type='text' name='json' id='json' value ='$JsonVar'&gt;";
     }
 //print_r (mysql_fetch_array($result));

 //echo "&lt;input type='text' name='json' id='json' value ='$JsonVar'&gt;";

 ?&gt;
 &lt;html&gt;
 &lt;head&gt;


    &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt;
 &lt;title&gt;Client-side Pagination&lt;/title&gt;

 &lt;style type="text/css"&gt; 

 body {
  margin:0;
  padding:0;
 }
 &lt;/style&gt;

 &lt;link rel="stylesheet" type="text/css" href="build/fonts/fonts-min.css" /&gt;
 &lt;link rel="stylesheet" type="text/css" href="build/paginator/assets/skins/sam/paginator.css" /&gt;
 &lt;link rel="stylesheet" type="text/css" href="build/datatable/assets/skins/sam/datatable.css" /&gt;
 &lt;script type="text/javascript" src="build/yahoo-dom-event/yahoo-dom-event.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="build/connection/connection-min.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="build/json/json-min.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="build/element/element-min.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="build/paginator/paginator-min.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="build/datasource/datasource-min.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="build/datatable/datatable-min.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="YuiJs.js"&gt;&lt;/script&gt;

 &lt;style type="text/css"&gt; 
     #paginated {
         text-align: center;
     }
     #paginated table {
         margin-left:auto; margin-right:auto;
     }
     #paginated, #paginated .yui-dt-loading {
         text-align: center; background-color: transparent;
     }
 &lt;/style&gt;



 &lt;/head&gt;

 &lt;body class="yui-skin-sam" onload="ProjectDatatable(document.getElementById('json').value);"&gt;


 &lt;h1&gt;Client-side Pagination&lt;/h1&gt;

 &lt;div class="exampleIntro"&gt;


 &lt;/div&gt;

 &lt;input type="hidden" id="HfId"/&gt;

 &lt;div id="paginated"&gt;
 &lt;/div&gt;

 &lt;script type="text/javascript"&gt; 
 /*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
         };
     }();
 });*/
 &lt;/script&gt;
 &lt;?php 

 echo "m".$res['dMarkObtained1'];  
 echo "m".$res['dMarkObtained2'];  
 echo "m".$res['dMarkObtained3'];   
 echo "Tm".$res['dMarkTotal'];  
 {?&gt;&lt;? }?&gt;
 &lt;/body&gt;
 &lt;/html&gt;



 &lt;/body&gt;
 &lt;/html&gt;
 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 &gt; 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 &lt; 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 &lt; 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
</code></pre>

<p>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</p>
