Jump to content

Archived

This topic is now archived and is closed to further replies.

lordzardeck

YUI Datatble

Recommended Posts

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.

Share this post


Link to post
Share on other sites

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.