Comment afficher les résultats dans un datatable alors que nous utilisons Yui

-1

J'utilise Yui pour afficher une grille de données ...Comment afficher les résultats dans un datatable alors que nous utilisons Yui

<?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

Ceci est ma page de script lorsque je charge la page je reçois la première ligne de la base de données mais les données consequtive de ne sont pas affichés dans la zone d'alerte comment puis-je receieve les données de la grille de données

Source

2010-03-12 udaya

Wow, je suis très confus là-bas. Peut-être que vous devriez essayer pour le format que vous postez. –

Veuillez corriger le formatage de votre question (par cas et par code). En outre, veuillez limiter votre code aux parties pertinentes de celui-ci. – Gordon

Je suis absolument d'accord ... Aucune chance d'arriver à ce dont vous parlez. S'il vous plaît formatez votre message et s'il vous plaît mettez votre titre en "cas normal" car je suis sûr que beaucoup de gens sautent simplement sur ces titres hurlants ;-) –

while($res = mysql_fetch_array($result)) 
    { 
    //print_r($res); 
    $JsonVar = json_encode($res); 
    echo "<input type='text' name='json' id='json' value ='$JsonVar'>"; 
    }

en regardant cette boucle while, je suppose qu'il est la dernière ligne de base de données et non le premier a été récupéré. Ce que je pense est que vous êtes en train de pousser toutes les lignes récupérées dans un seul élément d'entrée (plusieurs identifiants d'entrée avec le même nom seront écrasés).

Je suggère de changer à

$i =0; 
while($res = mysql_fetch_array($result)) 
    { 
    //print_r($res); 
    $JsonVar = json_encode($res); 
    echo "<input type='text' name='json$i' id='json$i' value ='$JsonVar'>"; 
    $i++; 
    }

Pouvez-vous vérifier si cela aide? Vous devrez également modifier les appels de fonction YUI.

Source

2010-03-12 10:14:11 pinaki

Comment afficher les résultats dans un datatable alors que nous utilisons Yui

Répondre

Questions connexes