Loading ...
Sorry, an error occurred while loading the content.
 

Re: Help! Can't get a basic Datatable to work.

Expand Messages
  • exguardianreader
    If you want a really, really easy way to get a beautiful scrolling grid with resizable, moveable columns going, then try this example that I wrote for the Ext
    Message 1 of 3 , Mar 13, 2007
      If you want a really, really easy way to get a beautiful scrolling
      grid with resizable, moveable columns going, then try this example
      that I wrote for the Ext widget lib:

      http://www.yui-ext.com/deploy/ext-1.0-alpha3/examples/grid/from-markup.html

      It converts a standard HTML table to a slick datagrid. Just pass the
      existing table into the constructor, and boom! Grid!

      The underlying widget set is a super-powerful library built on top of
      the solid YUI foundation classes. Documentation is 80% complete, and
      gradually being added to, but if I could create that just from reading
      other example code (Lots of examples included in the download) and
      reading the source, then it can't be that difficult! :-)

      Nige

      --- In ydn-javascript@yahoogroups.com, "carltondickson"
      <carltondickson@...> wrote:
      >
      > Hi,
      >
      > I noticed 2 things the 'var' before the YAHOO.example.puppies...I
      > removed that.
      >
      > ALso you are trying to create the datatable on an element (the 'basic'
      > div) before it has been rendered, notice the div is below you
      javascript.
      > Either put everything between the script jus before the last body tag
      > (</body>) or use the onAvailable method from the YUI event library.
      >
      > This worked for me...
      >
      > **********************************
      >
      > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      > "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
      > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
      > <head>
      > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      > <title>First Data Table</title>
      > <!-- Required CSS -->
      > <link type="text/css" rel="stylesheet"
      >
      href="http://yui.yahooapis.com/2.2.0/build/datatable/assets/datatable.css"
      > />
      > <!-- Dependencies -->
      > <script type="text/javascript"
      >
      src="http://yui.yahooapis.com/2.2.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
      > <!-- OPTIONAL: Connection (enables XHR) -->
      > <script type="text/javascript"
      >
      src="http://yui.yahooapis.com/2.2.0/build/connection/connection-min.js"></script>
      > <!-- OPTIONAL: Drag Drop (enables resizeable columns) -->
      > <script type="text/javascript"
      >
      src="http://yui.yahooapis.com/2.2.0/build/dragdrop/dragdrop-min.js"></script>
      > <!-- OPTIONAL: External JSON parser from http://www.json.org/ (enables
      > JSON validation) -->
      > <script type="text/javascript"
      src="http://www.json.org/json.js"></script>
      > <!-- Source file -->
      > <script type="text/javascript"
      >
      src="http://yui.yahooapis.com/2.2.0/build/datasource/datasource-beta-min.js"></script>
      > <script type="text/javascript"
      >
      src="http://yui.yahooapis.com/2.2.0/build/datatable/datatable-beta-min.js"></script>
      > </head>
      > <script language="javascript" type="text/javascript">
      > //<![CDATA[
      > YAHOO.example.puppies = [
      > {name:"Ashley",breed:"German Shepherd",age:12},
      > {name:"Dirty Harry",breed:"Norwich Terrier",age:5},
      > {name:"Emma",breed:"Labrador Retriever",age:9},
      > {name:"Oscar",breed:"Yorkshire Terrier",age:6},
      > {name:"Riley",breed:"Golden Retriever",age:6},
      > {name:"Shannon",breed:"Greyhound",age:12},
      > {name:"Washington",breed:"English Bulldog",age:8},
      > {name:"Zoe",breed:"Labrador Retriever",age:3}
      > ];
      > var myColumnHeaders = [
      > {key:"name", text:"Dog's Name"},
      > {key:"breed", text:"Dog's Breed"},
      > {key:"age", text:"Dog's Age (in Weeks)"}
      > ];
      > var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
      > var myDataSource = new YAHOO.util.DataSource(YAHOO.example.puppies);
      > myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
      > myDataSource.responseSchema = {
      > fields: ["name","breed","age"]
      > };
      >
      > YAHOO.util.Event.onAvailable('basic', function(){
      > var myDataTable = new YAHOO.widget.DataTable("basic", myColumnSet,
      > myDataSource);
      > })
      >
      > //]]>
      > </script>
      > <style type="text/css">
      > #basic {margin:1em;}
      > #basic table {border-collapse:collapse;}
      > #basic th, #basic td {border:1px solid #000;padding:.25em;}
      > #basic th {background-color:#696969;color:#fff;} /*dark gray*/
      > #basic .yui-dt-odd {background-color:#eee;} /*light gray*/
      > #basic em {font-style:italic;}
      > #basic strong {font-weight:bold;}
      > #basic .big {font-size:136%;}
      > #basic .small {font-size:77%}
      > </style>
      > <body>
      > <div id="basic"></div>
      > </body>
      > </html>
      >
      > **********************************
      >
      >
      > --- In ydn-javascript@yahoogroups.com, "libraries411" <cthompson@>
      > wrote:
      > >
      > >
      > > I cannot get anything to display and Firebug reports the following
      error
      > > ...
      > >
      > > missing ; before statement
      > > var YAHOO.example.puppies = [\n
      > >
      > > I am likely missing something very basic, but after a couple of hours
      > > trying various things, I still cannot get it to work.
      > >
      > > Appreciate your help,
      > > Thanks
      > >
      > > Here is my code ...
      > >
      > >
      > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      > > "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd
      > > <http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd> ">
      > > <html xmlns="http://www.w3.org/1999/xhtml
      <http://www.w3.org/1999/xhtml>
      > > " xml:lang="en">
      > > <head>
      > > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      > > <title>First Data Table</title>
      > > <!-- Required CSS -->
      > > <link type="text/css" rel="stylesheet"
      > >
      >
      href="http://yui.yahooapis.com/2.2.0/build/datatable/assets/datatable.cs\
      > > s
      <http://yui.yahooapis.com/2.2.0/build/datatable/assets/datatable.css>
      > > " />
      > > <!-- Dependencies -->
      > > <script type="text/javascript"
      > >
      >
      src="http://yui.yahooapis.com/2.2.0/build/yahoo-dom-event/yahoo-dom-even\
      > > t.js"></script
      > >
      >
      <http://yui.yahooapis.com/2.2.0/build/yahoo-dom-event/yahoo-dom-event.js\
      > > %22%3E%3C/script> >
      > > <!-- OPTIONAL: Connection (enables XHR) -->
      > > <script type="text/javascript"
      > >
      >
      src="http://yui.yahooapis.com/2.2.0/build/connection/connection-min.js">\
      > > </script
      > >
      >
      <http://yui.yahooapis.com/2.2.0/build/connection/connection-min.js%22%3E\
      > > %3C/script> >
      > > <!-- OPTIONAL: Drag Drop (enables resizeable columns) -->
      > > <script type="text/javascript"
      > >
      >
      src="http://yui.yahooapis.com/2.2.0/build/dragdrop/dragdrop-min.js"></sc\
      > > ript
      > >
      >
      <http://yui.yahooapis.com/2.2.0/build/dragdrop/dragdrop-min.js%22%3E%3C/\
      > > script> >
      > > <!-- OPTIONAL: External JSON parser from http://www.json.org/
      > > <http://www.json.org/> (enables JSON validation) -->
      > > <script type="text/javascript"
      > > src="http://www.json.org/json.js"></script
      > > <http://www.json.org/json.js%22%3E%3C/script> >
      > > <!-- Source file -->
      > > <script type="text/javascript"
      > >
      >
      src="http://yui.yahooapis.com/2.2.0/build/datasource/datasource-beta-min\
      > > .js"></script
      > >
      >
      <http://yui.yahooapis.com/2.2.0/build/datasource/datasource-beta-min.js%\
      > > 22%3E%3C/script> >
      > > <script type="text/javascript"
      > >
      >
      src="http://yui.yahooapis.com/2.2.0/build/datatable/datatable-beta-min.j\
      > > s"></script
      > >
      >
      <http://yui.yahooapis.com/2.2.0/build/datatable/datatable-beta-min.js%22\
      > > %3E%3C/script> >
      > > </head>
      > > <script language="javascript" type="text/javascript">
      > > //<![CDATA[
      > > var YAHOO.example.puppies = [
      > > {name:"Ashley",breed:"German Shepherd",age:12},
      > > {name:"Dirty Harry",breed:"Norwich Terrier",age:5},
      > > {name:"Emma",breed:"Labrador Retriever",age:9},
      > > {name:"Oscar",breed:"Yorkshire Terrier",age:6},
      > > {name:"Riley",breed:"Golden Retriever",age:6},
      > > {name:"Shannon",breed:"Greyhound",age:12},
      > > {name:"Washington",breed:"English Bulldog",age:8},
      > > {name:"Zoe",breed:"Labrador Retriever",age:3}
      > > ];
      > > var myColumnHeaders = [
      > > {key:"name", text:"Dog's Name"},
      > > {key:"breed", text:"Dog's Breed"},
      > > {key:"age", text:"Dog's Age (in Weeks)"}
      > > ];
      > > var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
      > > var myDataSource = new YAHOO.util.DataSource(YAHOO.example.puppies);
      > > myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
      > > myDataSource.responseSchema = {
      > > fields: ["name","breed","age"]
      > > };
      > > var myDataTable = new YAHOO.widget.DataTable("basic", myColumnSet,
      > > myDataSource);
      > > //]]>
      > > </script>
      > > <style type="text/css">
      > > #basic {margin:1em;}
      > > #basic table {border-collapse:collapse;}
      > > #basic th, #basic td {border:1px solid #000;padding:.25em;}
      > > #basic th {background-color:#696969;color:#fff;} /*dark gray*/
      > > #basic .yui-dt-odd {background-color:#eee;} /*light gray*/
      > > #basic em {font-style:italic;}
      > > #basic strong {font-weight:bold;}
      > > #basic .big {font-size:136%;}
      > > #basic .small {font-size:77%}
      > > </style>
      > > <body>
      > > <div id="basic"></div>
      > > </body>
      > > </html>
      > >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.