YUI Datatble

lordzardeck · April 13, 2009

I really didn't know where to put this since it is ajax, javascript, and php. My problem is trying to generate a data table off some json code encoded with php:

php code:

<?php

  require_once('./classes/datahandler.php'); 
  $data = new datahandler();
  $data->set_data();
  
  $query = $data->query("SELECT * FROM item WHERE title LIKE '%Creation%'");
  
  $row=$data->fetch_row($query);
  
      $json = $row;

  
  print "{results:[";
  echo json_encode($json);
  print "]}";
  
?>

json result:

{results:[{"0":"60","itemid":"60","1":"4538","accessionnum":"4538","2":"","author":"","3":"","illustrator":"","4":"Science of the Physical Creation: Quiz Key","title":"Science of the Physical Creation: Quiz Key","5":"Second","edition":"Second","6":"Pensacola, FL :","pubplace":"Pensacola, FL :","7":"ABeka;","publisher":"ABeka;","8":"c1996","pubdate":"c1996","9":"","series":"","10":"","seriesnum":"","11":"75","pages":"75","12":"paper","binding":"paper","13":"excellent","condition":"excellent","14":"2","formatid":"2","15":"2005-09-15 00:00:00","entrydate":"2005-09-15 00:00:00"}]}

html code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YUI Tester</title>
<!-- Individual YUI CSS files --> 
<link rel="stylesheet" type="text/css" href="build/reset-fonts-grids/reset-fonts-grids.css"> 
<link rel="stylesheet" type="text/css" href="build/base/base-min.css"> 
<link rel="stylesheet" type="text/css" href="build/assets/skins/sam/skin.css"> 
<!-- Individual YUI JS files --> 
<script type="text/javascript" src="build/utilities/utilities.js"></script> 
<script type="text/javascript" src="build/datasource/datasource-min.js"></script> 
<script type="text/javascript" src="build/autocomplete/autocomplete-min.js"></script> 
<script type="text/javascript" src="build/container/container-min.js"></script> 
<script type="text/javascript" src="build/menu/menu-min.js"></script> 
<script type="text/javascript" src="build/button/button-min.js"></script> 
<script type="text/javascript" src="build/calendar/calendar-min.js"></script> 
<script type="text/javascript" src="build/carousel/carousel-min.js"></script> 
<script type="text/javascript" src="build/json/json-min.js"></script> 
<script type="text/javascript" src="build/charts/charts-min.js"></script> 
<script type="text/javascript" src="build/slider/slider-min.js"></script> 
<script type="text/javascript" src="build/colorpicker/colorpicker-min.js"></script> 
<script type="text/javascript" src="build/cookie/cookie-min.js"></script> 
<script type="text/javascript" src="build/paginator/paginator-min.js"></script> 
<script type="text/javascript" src="build/datatable/datatable-min.js"></script> 
<script type="text/javascript" src="build/editor/editor-min.js"></script> 
<script type="text/javascript" src="build/history/history-min.js"></script> 
<script type="text/javascript" src="build/resize/resize-min.js"></script> 
<script type="text/javascript" src="build/imagecropper/imagecropper-min.js"></script> 
<script type="text/javascript" src="build/imageloader/imageloader-min.js"></script> 
<script type="text/javascript" src="build/selector/selector-min.js"></script> 
<script type="text/javascript" src="build/layout/layout-min.js"></script> 
<script type="text/javascript" src="build/stylesheet/stylesheet-min.js"></script> 
<script type="text/javascript" src="build/tabview/tabview-min.js"></script> 
<script type="text/javascript" src="build/treeview/treeview-min.js"></script> 
<script type="text/javascript" src="build/uploader/uploader.js"></script>
</head>
<body>
<div id="yuidatatable1"></div>
<script type="text/javascript">
// BeginWebWidget YUI_DataTable: yuidatatable1 

(function() { 
  var cn = document.body.className.toString();
  if (cn.indexOf('yui-skin-sam') == -1) {
    document.body.className += " yui-skin-sam";
  }
})();

var inityuidatatable1 = function() {
  var columnDef_yuidatatable1 = [
    {key:"title",label:"Title"}
  ];

  this.parseNumberFromCurrency = function(sString) {
    return parseFloat(sString.substring(1));
  };

  this.DS_yuidatatable1 = new YAHOO.util.XHRDataSource("json.php");
  this.DS_yuidatatable1.responseType = YAHOO.util.DataSource.TYPE_JSON;
  this.DS_yuidatatable1.responseSchema = {
    fields: [
      {key:"title"}
    ]
  };
  var yuidatatable1 = new YAHOO.widget.DataTable("yuidatatable1", columnDef_yuidatatable1, this.DS_yuidatatable1);

};

// Create the YUI DataTable when the HTML document is usable.
YAHOO.util.Event.onDOMReady(inityuidatatable1);


// EndWebWidget YUI_DataTable: yuidatatable1 
</script>
</body>
</html>

I've tried just about everything i can find and think of, but I can not even get it to work. If I could just even see an example that works that is as simple as this, I would appreciate. I do most of my learning by seeing working scripts and determine how they work.

Sign In

YUI Datatble

Recommended Posts

lordzardeck

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information