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

Change Datasource for Datatable

Expand Messages
  • Jim
    I just posted this in the YUI group but it doesn t look like that group gets used much. ... I would like to try to use one datasource for the YUI datatable
    Message 1 of 9 , May 9, 2008
    • 0 Attachment
      I just posted this in the YUI group but it doesn't look like that
      group gets used much.
      ------
      I would like to try to use one datasource for the YUI datatable such as
      an array for the initial load of a page, then use Json over xhr for
      subsequent table events such as sorting and paging. Has anyone here
      done this or have suggestions on how to do it?

      Here is something I tried, but doesn't seem to work, it uses 2 arrays,
      but the concept is the same.

      <html>
      <head>
      <title>Datatable Test</title>
      <link type="text/css" rel="stylesheet"
      href="http://yui.yahooapis.com/2.5.1/build/datatable/assets/skins/sam/datatable.css">

      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>

      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script>

      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.1/build/datasource/datasource-beta-min.js"></script>

      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.1/build/connection/connection-min.js"></script>

      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.1/build/datatable/datatable-beta-min.js"></script>

      </head>



      <body class='yui-skin-sam'>

      <button id='button'>button</button>
      <div id='yuidt'></div>

      </body>


      <script type='text/javascript'>
      YAHOO.example.Data = {
      bookorders: [
      {id:"po-0167", date:new Date(1980, 2, 24), quantity:1,
      amount:4, title:"A Book About Nothing"},
      {id:"po-0783", date:new Date("January 3, 1983"),
      quantity:null, amount:12.12345, title:"The Meaning of Life"},
      {id:"po-0297", date:new Date(1978, 11, 12), quantity:12,
      amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
      {id:"po-1482", date:new Date("March 11, 1985"), quantity:6,
      amount:3.5, title:"Read Me Twice"}
      ]
      }

      YAHOO.example.Data2 = {
      bookorders: [
      {id:"po-1111", date:new Date(1980, 2, 24), quantity:1,
      amount:4, title:"A Book About Nothing"},
      {id:"po-2222", date:new Date("January 3, 1983"),
      quantity:null, amount:12.12345, title:"The Meaning of Life"},
      {id:"po-3333", date:new Date(1978, 11, 12), quantity:12,
      amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
      {id:"po-4444", date:new Date("March 11, 1985"), quantity:6,
      amount:3.5, title:"Read Me Twice"}
      ]
      }

      YAHOO.util.Event.addListener(window, "load", function() {
      YAHOO.example.Basic = new function() {
      var myColumnDefs = [
      {key:"id", sortable:true, resizeable:true},
      {key:"date", formatter:YAHOO.widget.DataTable.formatDate,
      sortable:true,
      sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},

      {key:"quantity",
      formatter:YAHOO.widget.DataTable.formatNumber, sortable:true,
      resizeable:true},
      {key:"amount",
      formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true,
      resizeable:true},
      {key:"title", sortable:true, resizeable:true}
      ];

      this.myDataSource = new
      YAHOO.util.DataSource(YAHOO.example.Data2.bookorders);
      this.myDataSource.responseType =
      YAHOO.util.DataSource.TYPE_JSARRAY;
      this.myDataSource.responseSchema = {
      fields: ["id","date","quantity","amount","title"]
      };
      this.myDataTable = new YAHOO.widget.DataTable("yuidt",
      myColumnDefs, this.myDataSource, {caption:"DataTable
      Caption"});



      this.myDataSource2 = new
      YAHOO.util.DataSource(YAHOO.example.Data2.bookorders);
      this.myDataSource2.responseType =
      YAHOO.util.DataSource.TYPE_JSARRAY;
      this.myDataSource2.responseSchema = {
      fields: ["id","date","quantity","amount","title"]
      };



      YAHOO.util.Event.addListener("button", "click", function(){new
      YAHOO.widget.DataTable("yuidt",
      myColumnDefs, this.myDataSource2, {caption:"DataTable
      Caption"}); });
      };
      });
      </script>
      </html>
    • Satyam
      To switch to an XHR DataSource, you might try something like the following, I guess it should work but I haven t tested it: var ds =
      Message 2 of 9 , May 9, 2008
      • 0 Attachment
        To switch to an XHR DataSource, you might try something like the following,
        I guess it should work but I haven't tested it:

        var ds = myDataTable.getDataSource();

        ds.liveData = "myDataServer.php";
        ds.responseType = YAHOO.util.DataSource.TYPE_JSON;
        ds.dataType = YAHOO.util.DataSource.TYPE_XHR;
        ds.responseSchema.resultsList = "results" // or whatever the node for the
        JSON data

        The fields definition should remain the same, otherwise it wouldn't match
        the column keys any more.

        Satyam


        ----- Original Message -----
        From: "Jim" <jimhartford@...>
        To: <ydn-javascript@yahoogroups.com>
        Sent: Friday, May 09, 2008 3:21 PM
        Subject: [ydn-javascript] Change Datasource for Datatable


        >I just posted this in the YUI group but it doesn't look like that
        > group gets used much.
        > ------
        > I would like to try to use one datasource for the YUI datatable such as
        > an array for the initial load of a page, then use Json over xhr for
        > subsequent table events such as sorting and paging. Has anyone here
        > done this or have suggestions on how to do it?
        >
        > Here is something I tried, but doesn't seem to work, it uses 2 arrays,
        > but the concept is the same.
        >
        > <html>
        > <head>
        > <title>Datatable Test</title>
        > <link type="text/css" rel="stylesheet"
        > href="http://yui.yahooapis.com/2.5.1/build/datatable/assets/skins/sam/datatable.css">
        >
        > <script type="text/javascript"
        > src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
        >
        > <script type="text/javascript"
        > src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script>
        >
        > <script type="text/javascript"
        > src="http://yui.yahooapis.com/2.5.1/build/datasource/datasource-beta-min.js"></script>
        >
        > <script type="text/javascript"
        > src="http://yui.yahooapis.com/2.5.1/build/connection/connection-min.js"></script>
        >
        > <script type="text/javascript"
        > src="http://yui.yahooapis.com/2.5.1/build/datatable/datatable-beta-min.js"></script>
        >
        > </head>
        >
        >
        >
        > <body class='yui-skin-sam'>
        >
        > <button id='button'>button</button>
        > <div id='yuidt'></div>
        >
        > </body>
        >
        >
        > <script type='text/javascript'>
        > YAHOO.example.Data = {
        > bookorders: [
        > {id:"po-0167", date:new Date(1980, 2, 24), quantity:1,
        > amount:4, title:"A Book About Nothing"},
        > {id:"po-0783", date:new Date("January 3, 1983"),
        > quantity:null, amount:12.12345, title:"The Meaning of Life"},
        > {id:"po-0297", date:new Date(1978, 11, 12), quantity:12,
        > amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
        > {id:"po-1482", date:new Date("March 11, 1985"), quantity:6,
        > amount:3.5, title:"Read Me Twice"}
        > ]
        > }
        >
        > YAHOO.example.Data2 = {
        > bookorders: [
        > {id:"po-1111", date:new Date(1980, 2, 24), quantity:1,
        > amount:4, title:"A Book About Nothing"},
        > {id:"po-2222", date:new Date("January 3, 1983"),
        > quantity:null, amount:12.12345, title:"The Meaning of Life"},
        > {id:"po-3333", date:new Date(1978, 11, 12), quantity:12,
        > amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
        > {id:"po-4444", date:new Date("March 11, 1985"), quantity:6,
        > amount:3.5, title:"Read Me Twice"}
        > ]
        > }
        >
        > YAHOO.util.Event.addListener(window, "load", function() {
        > YAHOO.example.Basic = new function() {
        > var myColumnDefs = [
        > {key:"id", sortable:true, resizeable:true},
        > {key:"date", formatter:YAHOO.widget.DataTable.formatDate,
        > sortable:true,
        > sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
        >
        > {key:"quantity",
        > formatter:YAHOO.widget.DataTable.formatNumber, sortable:true,
        > resizeable:true},
        > {key:"amount",
        > formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true,
        > resizeable:true},
        > {key:"title", sortable:true, resizeable:true}
        > ];
        >
        > this.myDataSource = new
        > YAHOO.util.DataSource(YAHOO.example.Data2.bookorders);
        > this.myDataSource.responseType =
        > YAHOO.util.DataSource.TYPE_JSARRAY;
        > this.myDataSource.responseSchema = {
        > fields: ["id","date","quantity","amount","title"]
        > };
        > this.myDataTable = new YAHOO.widget.DataTable("yuidt",
        > myColumnDefs, this.myDataSource, {caption:"DataTable
        > Caption"});
        >
        >
        >
        > this.myDataSource2 = new
        > YAHOO.util.DataSource(YAHOO.example.Data2.bookorders);
        > this.myDataSource2.responseType =
        > YAHOO.util.DataSource.TYPE_JSARRAY;
        > this.myDataSource2.responseSchema = {
        > fields: ["id","date","quantity","amount","title"]
        > };
        >
        >
        >
        > YAHOO.util.Event.addListener("button", "click", function(){new
        > YAHOO.widget.DataTable("yuidt",
        > myColumnDefs, this.myDataSource2, {caption:"DataTable
        > Caption"}); });
        > };
        > });
        > </script>
        > </html>
        >
        >
        > ------------------------------------
        >
        > Yahoo! Groups Links
        >
        >
        >


        --------------------------------------------------------------------------------



        No virus found in this incoming message.
        Checked by AVG.
        Version: 8.0.100 / Virus Database: 269.23.11/1422 - Release Date: 08/05/2008
        17:24
      • Jim
        Thank you Satyam, I was able to get Datatable to change sources between two js arrays, next I will implement the change to an xhr request. ... following, ...
        Message 3 of 9 , May 12, 2008
        • 0 Attachment
          Thank you Satyam, I was able to get Datatable to change sources
          between two js arrays, next I will implement the change to an xhr request.


          --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@...> wrote:
          >
          > To switch to an XHR DataSource, you might try something like the
          following,
          > I guess it should work but I haven't tested it:
          >
          > var ds = myDataTable.getDataSource();
          >
          > ds.liveData = "myDataServer.php";
          > ds.responseType = YAHOO.util.DataSource.TYPE_JSON;
          > ds.dataType = YAHOO.util.DataSource.TYPE_XHR;
          > ds.responseSchema.resultsList = "results" // or whatever the node
          for the
          > JSON data
          >
          > The fields definition should remain the same, otherwise it wouldn't
          match
          > the column keys any more.
          >
          > Satyam
          >
          >
          > ----- Original Message -----
          > From: "Jim" <jimhartford@...>
          > To: <ydn-javascript@yahoogroups.com>
          > Sent: Friday, May 09, 2008 3:21 PM
          > Subject: [ydn-javascript] Change Datasource for Datatable
          >
          >
          > >I just posted this in the YUI group but it doesn't look like that
          > > group gets used much.
          > > ------
          > > I would like to try to use one datasource for the YUI datatable
          such as
          > > an array for the initial load of a page, then use Json over xhr for
          > > subsequent table events such as sorting and paging. Has anyone here
          > > done this or have suggestions on how to do it?
          > >
          > > Here is something I tried, but doesn't seem to work, it uses 2 arrays,
          > > but the concept is the same.
          > >
          > > <html>
          > > <head>
          > > <title>Datatable Test</title>
          > > <link type="text/css" rel="stylesheet"
          > >
          href="http://yui.yahooapis.com/2.5.1/build/datatable/assets/skins/sam/datatable.css">
          > >
          > > <script type="text/javascript"
          > >
          src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
          > >
          > > <script type="text/javascript"
          > >
          src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script>
          > >
          > > <script type="text/javascript"
          > >
          src="http://yui.yahooapis.com/2.5.1/build/datasource/datasource-beta-min.js"></script>
          > >
          > > <script type="text/javascript"
          > >
          src="http://yui.yahooapis.com/2.5.1/build/connection/connection-min.js"></script>
          > >
          > > <script type="text/javascript"
          > >
          src="http://yui.yahooapis.com/2.5.1/build/datatable/datatable-beta-min.js"></script>
          > >
          > > </head>
          > >
          > >
          > >
          > > <body class='yui-skin-sam'>
          > >
          > > <button id='button'>button</button>
          > > <div id='yuidt'></div>
          > >
          > > </body>
          > >
          > >
          > > <script type='text/javascript'>
          > > YAHOO.example.Data = {
          > > bookorders: [
          > > {id:"po-0167", date:new Date(1980, 2, 24), quantity:1,
          > > amount:4, title:"A Book About Nothing"},
          > > {id:"po-0783", date:new Date("January 3, 1983"),
          > > quantity:null, amount:12.12345, title:"The Meaning of Life"},
          > > {id:"po-0297", date:new Date(1978, 11, 12), quantity:12,
          > > amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
          > > {id:"po-1482", date:new Date("March 11, 1985"), quantity:6,
          > > amount:3.5, title:"Read Me Twice"}
          > > ]
          > > }
          > >
          > > YAHOO.example.Data2 = {
          > > bookorders: [
          > > {id:"po-1111", date:new Date(1980, 2, 24), quantity:1,
          > > amount:4, title:"A Book About Nothing"},
          > > {id:"po-2222", date:new Date("January 3, 1983"),
          > > quantity:null, amount:12.12345, title:"The Meaning of Life"},
          > > {id:"po-3333", date:new Date(1978, 11, 12), quantity:12,
          > > amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
          > > {id:"po-4444", date:new Date("March 11, 1985"), quantity:6,
          > > amount:3.5, title:"Read Me Twice"}
          > > ]
          > > }
          > >
          > > YAHOO.util.Event.addListener(window, "load", function() {
          > > YAHOO.example.Basic = new function() {
          > > var myColumnDefs = [
          > > {key:"id", sortable:true, resizeable:true},
          > > {key:"date", formatter:YAHOO.widget.DataTable.formatDate,
          > > sortable:true,
          > >
          sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
          > >
          > > {key:"quantity",
          > > formatter:YAHOO.widget.DataTable.formatNumber, sortable:true,
          > > resizeable:true},
          > > {key:"amount",
          > > formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true,
          > > resizeable:true},
          > > {key:"title", sortable:true, resizeable:true}
          > > ];
          > >
          > > this.myDataSource = new
          > > YAHOO.util.DataSource(YAHOO.example.Data2.bookorders);
          > > this.myDataSource.responseType =
          > > YAHOO.util.DataSource.TYPE_JSARRAY;
          > > this.myDataSource.responseSchema = {
          > > fields: ["id","date","quantity","amount","title"]
          > > };
          > > this.myDataTable = new YAHOO.widget.DataTable("yuidt",
          > > myColumnDefs, this.myDataSource, {caption:"DataTable
          > > Caption"});
          > >
          > >
          > >
          > > this.myDataSource2 = new
          > > YAHOO.util.DataSource(YAHOO.example.Data2.bookorders);
          > > this.myDataSource2.responseType =
          > > YAHOO.util.DataSource.TYPE_JSARRAY;
          > > this.myDataSource2.responseSchema = {
          > > fields: ["id","date","quantity","amount","title"]
          > > };
          > >
          > >
          > >
          > > YAHOO.util.Event.addListener("button", "click", function(){new
          > > YAHOO.widget.DataTable("yuidt",
          > > myColumnDefs, this.myDataSource2, {caption:"DataTable
          > > Caption"}); });
          > > };
          > > });
          > > </script>
          > > </html>
          > >
          > >
          > > ------------------------------------
          > >
          > > Yahoo! Groups Links
          > >
          > >
          > >
          >
          >
          >
          --------------------------------------------------------------------------------
          >
          >
          >
          > No virus found in this incoming message.
          > Checked by AVG.
          > Version: 8.0.100 / Virus Database: 269.23.11/1422 - Release Date:
          08/05/2008
          > 17:24
          >
        • Jim
          setting ds.liveData = myDataServer.php ; from some reason it results in a request being made to /myDataServer.phpnull ... following, ... for the ... match ...
          Message 4 of 9 , May 12, 2008
          • 0 Attachment
            setting
            ds.liveData = "myDataServer.php";

            from some reason it results in a request being made to

            /myDataServer.phpnull



            --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@...> wrote:
            >
            > To switch to an XHR DataSource, you might try something like the
            following,
            > I guess it should work but I haven't tested it:
            >
            > var ds = myDataTable.getDataSource();
            >
            > ds.liveData = "myDataServer.php";
            > ds.responseType = YAHOO.util.DataSource.TYPE_JSON;
            > ds.dataType = YAHOO.util.DataSource.TYPE_XHR;
            > ds.responseSchema.resultsList = "results" // or whatever the node
            for the
            > JSON data
            >
            > The fields definition should remain the same, otherwise it wouldn't
            match
            > the column keys any more.
            >
            > Satyam
            >
            >
            > ----- Original Message -----
            > From: "Jim" <jimhartford@...>
            > To: <ydn-javascript@yahoogroups.com>
            > Sent: Friday, May 09, 2008 3:21 PM
            > Subject: [ydn-javascript] Change Datasource for Datatable
            >
            >
            > >I just posted this in the YUI group but it doesn't look like that
            > > group gets used much.
            > > ------
            > > I would like to try to use one datasource for the YUI datatable
            such as
            > > an array for the initial load of a page, then use Json over xhr for
            > > subsequent table events such as sorting and paging. Has anyone here
            > > done this or have suggestions on how to do it?
            > >
            > > Here is something I tried, but doesn't seem to work, it uses 2 arrays,
            > > but the concept is the same.
            > >
            > > <html>
            > > <head>
            > > <title>Datatable Test</title>
            > > <link type="text/css" rel="stylesheet"
            > >
            href="http://yui.yahooapis.com/2.5.1/build/datatable/assets/skins/sam/datatable.css">
            > >
            > > <script type="text/javascript"
            > >
            src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
            > >
            > > <script type="text/javascript"
            > >
            src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script>
            > >
            > > <script type="text/javascript"
            > >
            src="http://yui.yahooapis.com/2.5.1/build/datasource/datasource-beta-min.js"></script>
            > >
            > > <script type="text/javascript"
            > >
            src="http://yui.yahooapis.com/2.5.1/build/connection/connection-min.js"></script>
            > >
            > > <script type="text/javascript"
            > >
            src="http://yui.yahooapis.com/2.5.1/build/datatable/datatable-beta-min.js"></script>
            > >
            > > </head>
            > >
            > >
            > >
            > > <body class='yui-skin-sam'>
            > >
            > > <button id='button'>button</button>
            > > <div id='yuidt'></div>
            > >
            > > </body>
            > >
            > >
            > > <script type='text/javascript'>
            > > YAHOO.example.Data = {
            > > bookorders: [
            > > {id:"po-0167", date:new Date(1980, 2, 24), quantity:1,
            > > amount:4, title:"A Book About Nothing"},
            > > {id:"po-0783", date:new Date("January 3, 1983"),
            > > quantity:null, amount:12.12345, title:"The Meaning of Life"},
            > > {id:"po-0297", date:new Date(1978, 11, 12), quantity:12,
            > > amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
            > > {id:"po-1482", date:new Date("March 11, 1985"), quantity:6,
            > > amount:3.5, title:"Read Me Twice"}
            > > ]
            > > }
            > >
            > > YAHOO.example.Data2 = {
            > > bookorders: [
            > > {id:"po-1111", date:new Date(1980, 2, 24), quantity:1,
            > > amount:4, title:"A Book About Nothing"},
            > > {id:"po-2222", date:new Date("January 3, 1983"),
            > > quantity:null, amount:12.12345, title:"The Meaning of Life"},
            > > {id:"po-3333", date:new Date(1978, 11, 12), quantity:12,
            > > amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
            > > {id:"po-4444", date:new Date("March 11, 1985"), quantity:6,
            > > amount:3.5, title:"Read Me Twice"}
            > > ]
            > > }
            > >
            > > YAHOO.util.Event.addListener(window, "load", function() {
            > > YAHOO.example.Basic = new function() {
            > > var myColumnDefs = [
            > > {key:"id", sortable:true, resizeable:true},
            > > {key:"date", formatter:YAHOO.widget.DataTable.formatDate,
            > > sortable:true,
            > >
            sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
            > >
            > > {key:"quantity",
            > > formatter:YAHOO.widget.DataTable.formatNumber, sortable:true,
            > > resizeable:true},
            > > {key:"amount",
            > > formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true,
            > > resizeable:true},
            > > {key:"title", sortable:true, resizeable:true}
            > > ];
            > >
            > > this.myDataSource = new
            > > YAHOO.util.DataSource(YAHOO.example.Data2.bookorders);
            > > this.myDataSource.responseType =
            > > YAHOO.util.DataSource.TYPE_JSARRAY;
            > > this.myDataSource.responseSchema = {
            > > fields: ["id","date","quantity","amount","title"]
            > > };
            > > this.myDataTable = new YAHOO.widget.DataTable("yuidt",
            > > myColumnDefs, this.myDataSource, {caption:"DataTable
            > > Caption"});
            > >
            > >
            > >
            > > this.myDataSource2 = new
            > > YAHOO.util.DataSource(YAHOO.example.Data2.bookorders);
            > > this.myDataSource2.responseType =
            > > YAHOO.util.DataSource.TYPE_JSARRAY;
            > > this.myDataSource2.responseSchema = {
            > > fields: ["id","date","quantity","amount","title"]
            > > };
            > >
            > >
            > >
            > > YAHOO.util.Event.addListener("button", "click", function(){new
            > > YAHOO.widget.DataTable("yuidt",
            > > myColumnDefs, this.myDataSource2, {caption:"DataTable
            > > Caption"}); });
            > > };
            > > });
            > > </script>
            > > </html>
            > >
            > >
            > > ------------------------------------
            > >
            > > Yahoo! Groups Links
            > >
            > >
            > >
            >
            >
            >
            --------------------------------------------------------------------------------
            >
            >
            >
            > No virus found in this incoming message.
            > Checked by AVG.
            > Version: 8.0.100 / Virus Database: 269.23.11/1422 - Release Date:
            08/05/2008
            > 17:24
            >
          • Jim
            Just needed to add an initialRequest. So it is somewhat working, data comes in from the xhr request but the table only renders 1 row, when there are 3 rows of
            Message 5 of 9 , May 12, 2008
            • 0 Attachment
              Just needed to add an initialRequest. So it is somewhat working, data
              comes in from the xhr request but the table only renders 1 row, when
              there are 3 rows of data.



              --- In ydn-javascript@yahoogroups.com, "Jim" <jimhartford@...> wrote:
              >
              > setting
              > ds.liveData = "myDataServer.php";
              >
              > from some reason it results in a request being made to
              >
              > /myDataServer.phpnull
              >
              >
              >
              > --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@> wrote:
              > >
              > > To switch to an XHR DataSource, you might try something like the
              > following,
              > > I guess it should work but I haven't tested it:
              > >
              > > var ds = myDataTable.getDataSource();
              > >
              > > ds.liveData = "myDataServer.php";
              > > ds.responseType = YAHOO.util.DataSource.TYPE_JSON;
              > > ds.dataType = YAHOO.util.DataSource.TYPE_XHR;
              > > ds.responseSchema.resultsList = "results" // or whatever the node
              > for the
              > > JSON data
              > >
              > > The fields definition should remain the same, otherwise it wouldn't
              > match
              > > the column keys any more.
              > >
              > > Satyam
              > >
              > >
              > > ----- Original Message -----
              > > From: "Jim" <jimhartford@>
              > > To: <ydn-javascript@yahoogroups.com>
              > > Sent: Friday, May 09, 2008 3:21 PM
              > > Subject: [ydn-javascript] Change Datasource for Datatable
              > >
              > >
              > > >I just posted this in the YUI group but it doesn't look like that
              > > > group gets used much.
              > > > ------
              > > > I would like to try to use one datasource for the YUI datatable
              > such as
              > > > an array for the initial load of a page, then use Json over xhr for
              > > > subsequent table events such as sorting and paging. Has anyone here
              > > > done this or have suggestions on how to do it?
              > > >
              > > > Here is something I tried, but doesn't seem to work, it uses 2
              arrays,
              > > > but the concept is the same.
              > > >
              > > > <html>
              > > > <head>
              > > > <title>Datatable Test</title>
              > > > <link type="text/css" rel="stylesheet"
              > > >
              >
              href="http://yui.yahooapis.com/2.5.1/build/datatable/assets/skins/sam/datatable.css">
              > > >
              > > > <script type="text/javascript"
              > > >
              >
              src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
              > > >
              > > > <script type="text/javascript"
              > > >
              >
              src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script>
              > > >
              > > > <script type="text/javascript"
              > > >
              >
              src="http://yui.yahooapis.com/2.5.1/build/datasource/datasource-beta-min.js"></script>
              > > >
              > > > <script type="text/javascript"
              > > >
              >
              src="http://yui.yahooapis.com/2.5.1/build/connection/connection-min.js"></script>
              > > >
              > > > <script type="text/javascript"
              > > >
              >
              src="http://yui.yahooapis.com/2.5.1/build/datatable/datatable-beta-min.js"></script>
              > > >
              > > > </head>
              > > >
              > > >
              > > >
              > > > <body class='yui-skin-sam'>
              > > >
              > > > <button id='button'>button</button>
              > > > <div id='yuidt'></div>
              > > >
              > > > </body>
              > > >
              > > >
              > > > <script type='text/javascript'>
              > > > YAHOO.example.Data = {
              > > > bookorders: [
              > > > {id:"po-0167", date:new Date(1980, 2, 24), quantity:1,
              > > > amount:4, title:"A Book About Nothing"},
              > > > {id:"po-0783", date:new Date("January 3, 1983"),
              > > > quantity:null, amount:12.12345, title:"The Meaning of Life"},
              > > > {id:"po-0297", date:new Date(1978, 11, 12), quantity:12,
              > > > amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
              > > > {id:"po-1482", date:new Date("March 11, 1985"), quantity:6,
              > > > amount:3.5, title:"Read Me Twice"}
              > > > ]
              > > > }
              > > >
              > > > YAHOO.example.Data2 = {
              > > > bookorders: [
              > > > {id:"po-1111", date:new Date(1980, 2, 24), quantity:1,
              > > > amount:4, title:"A Book About Nothing"},
              > > > {id:"po-2222", date:new Date("January 3, 1983"),
              > > > quantity:null, amount:12.12345, title:"The Meaning of Life"},
              > > > {id:"po-3333", date:new Date(1978, 11, 12), quantity:12,
              > > > amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
              > > > {id:"po-4444", date:new Date("March 11, 1985"), quantity:6,
              > > > amount:3.5, title:"Read Me Twice"}
              > > > ]
              > > > }
              > > >
              > > > YAHOO.util.Event.addListener(window, "load", function() {
              > > > YAHOO.example.Basic = new function() {
              > > > var myColumnDefs = [
              > > > {key:"id", sortable:true, resizeable:true},
              > > > {key:"date", formatter:YAHOO.widget.DataTable.formatDate,
              > > > sortable:true,
              > > >
              >
              sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
              > > >
              > > > {key:"quantity",
              > > > formatter:YAHOO.widget.DataTable.formatNumber, sortable:true,
              > > > resizeable:true},
              > > > {key:"amount",
              > > > formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true,
              > > > resizeable:true},
              > > > {key:"title", sortable:true, resizeable:true}
              > > > ];
              > > >
              > > > this.myDataSource = new
              > > > YAHOO.util.DataSource(YAHOO.example.Data2.bookorders);
              > > > this.myDataSource.responseType =
              > > > YAHOO.util.DataSource.TYPE_JSARRAY;
              > > > this.myDataSource.responseSchema = {
              > > > fields: ["id","date","quantity","amount","title"]
              > > > };
              > > > this.myDataTable = new YAHOO.widget.DataTable("yuidt",
              > > > myColumnDefs, this.myDataSource, {caption:"DataTable
              > > > Caption"});
              > > >
              > > >
              > > >
              > > > this.myDataSource2 = new
              > > > YAHOO.util.DataSource(YAHOO.example.Data2.bookorders);
              > > > this.myDataSource2.responseType =
              > > > YAHOO.util.DataSource.TYPE_JSARRAY;
              > > > this.myDataSource2.responseSchema = {
              > > > fields: ["id","date","quantity","amount","title"]
              > > > };
              > > >
              > > >
              > > >
              > > > YAHOO.util.Event.addListener("button", "click",
              function(){new
              > > > YAHOO.widget.DataTable("yuidt",
              > > > myColumnDefs, this.myDataSource2, {caption:"DataTable
              > > > Caption"}); });
              > > > };
              > > > });
              > > > </script>
              > > > </html>
              > > >
              > > >
              > > > ------------------------------------
              > > >
              > > > Yahoo! Groups Links
              > > >
              > > >
              > > >
              > >
              > >
              > >
              >
              --------------------------------------------------------------------------------
              > >
              > >
              > >
              > > No virus found in this incoming message.
              > > Checked by AVG.
              > > Version: 8.0.100 / Virus Database: 269.23.11/1422 - Release Date:
              > 08/05/2008
              > > 17:24
              > >
              >
            • Jim
              Just an error in the json output from my php script. Here is the code if you are interested: Datatable Test
              Message 6 of 9 , May 12, 2008
              • 0 Attachment
                Just an error in the json output from my php script. Here is the code
                if you are interested:

                <html>
                <head>
                <title>Datatable Test</title>
                <link type="text/css" rel="stylesheet"
                href="http://yui.yahooapis.com/2.5.1/build/datatable/assets/skins/sam/datatable.css">

                <script type="text/javascript"
                src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>

                <script type="text/javascript"
                src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script>

                <script type="text/javascript"
                src="http://yui.yahooapis.com/2.5.1/build/datasource/datasource-beta-min.js"></script>

                <script type="text/javascript"
                src="http://yui.yahooapis.com/2.5.1/build/connection/connection-min.js"></script>

                <script type="text/javascript"
                src="http://yui.yahooapis.com/2.5.1/build/datatable/datatable-beta-min.js"></script>

                </head>
                <body class='yui-skin-sam'>
                <div id='yuidt'></div>
                <button id='button'>Change Source</button>
                </body>
                <script type='text/javascript'>
                YAHOO.example.Data = {
                bookorders: [
                {id:"po-0167", date:new Date(1980, 2, 24), quantity:1,
                amount:4, title:"A Book About Nothing"},
                {id:"po-0783", date:new Date("January 3, 1983"),
                quantity:null, amount:12.12345, title:"The Meaning of Life"},
                {id:"po-0297", date:new Date(1978, 11, 12), quantity:12,
                amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
                {id:"po-1482", date:new Date("March 11, 1985"), quantity:6,
                amount:3.5, title:"Read Me Twice"}
                ]
                }

                YAHOO.util.Event.addListener(window, "load", function() {
                YAHOO.example.Basic = new function() {
                var myColumnDefs = [
                {key:"id", sortable:true, resizeable:true},
                {key:"date", formatter:YAHOO.widget.DataTable.formatDate,
                sortable:true,
                sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},

                {key:"quantity",
                formatter:YAHOO.widget.DataTable.formatNumber, sortable:true,
                resizeable:true},
                {key:"amount",
                formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true,
                resizeable:true},
                {key:"title", sortable:true, resizeable:true}
                ];



                var myDataSource = new
                YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
                myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
                myDataSource.responseSchema = {
                fields: ["id","date","quantity","amount","title"]
                };
                var myDataTable = new YAHOO.widget.DataTable("yuidt",
                myColumnDefs, myDataSource, {caption:"DataTable
                Caption"});


                var changeSource = function(){
                var myDataSource2 = myDataTable.getDataSource();
                myDataSource2.liveData = "datatablexhr.php";
                myDataSource2.responseType = YAHOO.util.DataSource.TYPE_JSON;
                myDataSource2.dataType = YAHOO.util.DataSource.TYPE_XHR;
                myDataSource2.responseSchema.resultsList = "results";

                myDataTable = new YAHOO.widget.DataTable("yuidt",
                myColumnDefs, myDataSource2, {caption:"DataTable
                Caption", initialRequest:''});

                }

                YAHOO.util.Event.addListener("button", "click", changeSource);
                };
                });
                </script>
                </html>












                --- In ydn-javascript@yahoogroups.com, "Jim" <jimhartford@...> wrote:
                >
                > Just needed to add an initialRequest. So it is somewhat working, data
                > comes in from the xhr request but the table only renders 1 row, when
                > there are 3 rows of data.
                >
                >
                >
                > --- In ydn-javascript@yahoogroups.com, "Jim" <jimhartford@> wrote:
                > >
                > > setting
                > > ds.liveData = "myDataServer.php";
                > >
                > > from some reason it results in a request being made to
                > >
                > > /myDataServer.phpnull
                > >
                > >
                > >
                > > --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@> wrote:
                > > >
                > > > To switch to an XHR DataSource, you might try something like the
                > > following,
                > > > I guess it should work but I haven't tested it:
                > > >
                > > > var ds = myDataTable.getDataSource();
                > > >
                > > > ds.liveData = "myDataServer.php";
                > > > ds.responseType = YAHOO.util.DataSource.TYPE_JSON;
                > > > ds.dataType = YAHOO.util.DataSource.TYPE_XHR;
                > > > ds.responseSchema.resultsList = "results" // or whatever the node
                > > for the
                > > > JSON data
                > > >
                > > > The fields definition should remain the same, otherwise it wouldn't
                > > match
                > > > the column keys any more.
                > > >
                > > > Satyam
                > > >
                > > >
                > > > ----- Original Message -----
                > > > From: "Jim" <jimhartford@>
                > > > To: <ydn-javascript@yahoogroups.com>
                > > > Sent: Friday, May 09, 2008 3:21 PM
                > > > Subject: [ydn-javascript] Change Datasource for Datatable
                > > >
                > > >
                > > > >I just posted this in the YUI group but it doesn't look like that
                > > > > group gets used much.
                > > > > ------
                > > > > I would like to try to use one datasource for the YUI datatable
                > > such as
                > > > > an array for the initial load of a page, then use Json over
                xhr for
                > > > > subsequent table events such as sorting and paging. Has anyone
                here
                > > > > done this or have suggestions on how to do it?
                > > > >
                > > > > Here is something I tried, but doesn't seem to work, it uses 2
                > arrays,
                > > > > but the concept is the same.
                > > > >
                > > > > <html>
                > > > > <head>
                > > > > <title>Datatable Test</title>
                > > > > <link type="text/css" rel="stylesheet"
                > > > >
                > >
                >
                href="http://yui.yahooapis.com/2.5.1/build/datatable/assets/skins/sam/datatable.css">
                > > > >
                > > > > <script type="text/javascript"
                > > > >
                > >
                >
                src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
                > > > >
                > > > > <script type="text/javascript"
                > > > >
                > >
                >
                src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script>
                > > > >
                > > > > <script type="text/javascript"
                > > > >
                > >
                >
                src="http://yui.yahooapis.com/2.5.1/build/datasource/datasource-beta-min.js"></script>
                > > > >
                > > > > <script type="text/javascript"
                > > > >
                > >
                >
                src="http://yui.yahooapis.com/2.5.1/build/connection/connection-min.js"></script>
                > > > >
                > > > > <script type="text/javascript"
                > > > >
                > >
                >
                src="http://yui.yahooapis.com/2.5.1/build/datatable/datatable-beta-min.js"></script>
                > > > >
                > > > > </head>
                > > > >
                > > > >
                > > > >
                > > > > <body class='yui-skin-sam'>
                > > > >
                > > > > <button id='button'>button</button>
                > > > > <div id='yuidt'></div>
                > > > >
                > > > > </body>
                > > > >
                > > > >
                > > > > <script type='text/javascript'>
                > > > > YAHOO.example.Data = {
                > > > > bookorders: [
                > > > > {id:"po-0167", date:new Date(1980, 2, 24), quantity:1,
                > > > > amount:4, title:"A Book About Nothing"},
                > > > > {id:"po-0783", date:new Date("January 3, 1983"),
                > > > > quantity:null, amount:12.12345, title:"The Meaning of Life"},
                > > > > {id:"po-0297", date:new Date(1978, 11, 12), quantity:12,
                > > > > amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
                > > > > {id:"po-1482", date:new Date("March 11, 1985"),
                quantity:6,
                > > > > amount:3.5, title:"Read Me Twice"}
                > > > > ]
                > > > > }
                > > > >
                > > > > YAHOO.example.Data2 = {
                > > > > bookorders: [
                > > > > {id:"po-1111", date:new Date(1980, 2, 24), quantity:1,
                > > > > amount:4, title:"A Book About Nothing"},
                > > > > {id:"po-2222", date:new Date("January 3, 1983"),
                > > > > quantity:null, amount:12.12345, title:"The Meaning of Life"},
                > > > > {id:"po-3333", date:new Date(1978, 11, 12), quantity:12,
                > > > > amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
                > > > > {id:"po-4444", date:new Date("March 11, 1985"),
                quantity:6,
                > > > > amount:3.5, title:"Read Me Twice"}
                > > > > ]
                > > > > }
                > > > >
                > > > > YAHOO.util.Event.addListener(window, "load", function() {
                > > > > YAHOO.example.Basic = new function() {
                > > > > var myColumnDefs = [
                > > > > {key:"id", sortable:true, resizeable:true},
                > > > > {key:"date",
                formatter:YAHOO.widget.DataTable.formatDate,
                > > > > sortable:true,
                > > > >
                > >
                >
                sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
                > > > >
                > > > > {key:"quantity",
                > > > > formatter:YAHOO.widget.DataTable.formatNumber, sortable:true,
                > > > > resizeable:true},
                > > > > {key:"amount",
                > > > > formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true,
                > > > > resizeable:true},
                > > > > {key:"title", sortable:true, resizeable:true}
                > > > > ];
                > > > >
                > > > > this.myDataSource = new
                > > > > YAHOO.util.DataSource(YAHOO.example.Data2.bookorders);
                > > > > this.myDataSource.responseType =
                > > > > YAHOO.util.DataSource.TYPE_JSARRAY;
                > > > > this.myDataSource.responseSchema = {
                > > > > fields: ["id","date","quantity","amount","title"]
                > > > > };
                > > > > this.myDataTable = new YAHOO.widget.DataTable("yuidt",
                > > > > myColumnDefs, this.myDataSource,
                {caption:"DataTable
                > > > > Caption"});
                > > > >
                > > > >
                > > > >
                > > > > this.myDataSource2 = new
                > > > > YAHOO.util.DataSource(YAHOO.example.Data2.bookorders);
                > > > > this.myDataSource2.responseType =
                > > > > YAHOO.util.DataSource.TYPE_JSARRAY;
                > > > > this.myDataSource2.responseSchema = {
                > > > > fields: ["id","date","quantity","amount","title"]
                > > > > };
                > > > >
                > > > >
                > > > >
                > > > > YAHOO.util.Event.addListener("button", "click",
                > function(){new
                > > > > YAHOO.widget.DataTable("yuidt",
                > > > > myColumnDefs, this.myDataSource2,
                {caption:"DataTable
                > > > > Caption"}); });
                > > > > };
                > > > > });
                > > > > </script>
                > > > > </html>
                > > > >
                > > > >
                > > > > ------------------------------------
                > > > >
                > > > > Yahoo! Groups Links
                > > > >
                > > > >
                > > > >
                > > >
                > > >
                > > >
                > >
                >
                --------------------------------------------------------------------------------
                > > >
                > > >
                > > >
                > > > No virus found in this incoming message.
                > > > Checked by AVG.
                > > > Version: 8.0.100 / Virus Database: 269.23.11/1422 - Release Date:
                > > 08/05/2008
                > > > 17:24
                > > >
                > >
                >
              • Satyam
                That is a reported bug. You have to either add a ? at the end of the url so that it will produce: /myDataServer.php?null so the browser can tell where the
                Message 7 of 9 , May 12, 2008
                • 0 Attachment
                  That is a reported bug. You have to either add a ? at the end of the url so
                  that it will produce:

                  /myDataServer.php?null

                  so the browser can tell where the file section ends and the url arguments
                  start and there is nothing wrong with an argument of name null and no value.
                  The other solution is to explicitly set initialRequest = "". The default is
                  initialRequest = null and that is what gets concatenated to the base URL.
                  Either will work

                  Satyam

                  ----- Original Message -----
                  From: "Jim" <jimhartford@...>
                  To: <ydn-javascript@yahoogroups.com>
                  Sent: Monday, May 12, 2008 4:49 PM
                  Subject: [ydn-javascript] Re: Change Datasource for Datatable


                  > setting
                  > ds.liveData = "myDataServer.php";
                  >
                  > from some reason it results in a request being made to
                  >
                  > /myDataServer.phpnull
                  >
                  >
                  >
                  > --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@...> wrote:
                  >>
                  >> To switch to an XHR DataSource, you might try something like the
                  > following,
                  >> I guess it should work but I haven't tested it:
                  >>
                  >> var ds = myDataTable.getDataSource();
                  >>
                  >> ds.liveData = "myDataServer.php";
                  >> ds.responseType = YAHOO.util.DataSource.TYPE_JSON;
                  >> ds.dataType = YAHOO.util.DataSource.TYPE_XHR;
                  >> ds.responseSchema.resultsList = "results" // or whatever the node
                  > for the
                  >> JSON data
                  >>
                  >> The fields definition should remain the same, otherwise it wouldn't
                  > match
                  >> the column keys any more.
                  >>
                  >> Satyam
                  >>
                  >>
                  >> ----- Original Message -----
                  >> From: "Jim" <jimhartford@...>
                  >> To: <ydn-javascript@yahoogroups.com>
                  >> Sent: Friday, May 09, 2008 3:21 PM
                  >> Subject: [ydn-javascript] Change Datasource for Datatable
                  >>
                  >>
                  >> >I just posted this in the YUI group but it doesn't look like that
                  >> > group gets used much.
                  >> > ------
                  >> > I would like to try to use one datasource for the YUI datatable
                  > such as
                  >> > an array for the initial load of a page, then use Json over xhr for
                  >> > subsequent table events such as sorting and paging. Has anyone here
                  >> > done this or have suggestions on how to do it?
                  >> >
                  >> > Here is something I tried, but doesn't seem to work, it uses 2 arrays,
                  >> > but the concept is the same.
                  >> >
                  >> > <html>
                  >> > <head>
                  >> > <title>Datatable Test</title>
                  >> > <link type="text/css" rel="stylesheet"
                  >> >
                  > href="http://yui.yahooapis.com/2.5.1/build/datatable/assets/skins/sam/datatable.css">
                  >> >
                  >> > <script type="text/javascript"
                  >> >
                  > src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
                  >> >
                  >> > <script type="text/javascript"
                  >> >
                  > src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script>
                  >> >
                  >> > <script type="text/javascript"
                  >> >
                  > src="http://yui.yahooapis.com/2.5.1/build/datasource/datasource-beta-min.js"></script>
                  >> >
                  >> > <script type="text/javascript"
                  >> >
                  > src="http://yui.yahooapis.com/2.5.1/build/connection/connection-min.js"></script>
                  >> >
                  >> > <script type="text/javascript"
                  >> >
                  > src="http://yui.yahooapis.com/2.5.1/build/datatable/datatable-beta-min.js"></script>
                  >> >
                  >> > </head>
                  >> >
                  >> >
                  >> >
                  >> > <body class='yui-skin-sam'>
                  >> >
                  >> > <button id='button'>button</button>
                  >> > <div id='yuidt'></div>
                  >> >
                  >> > </body>
                  >> >
                  >> >
                  >> > <script type='text/javascript'>
                  >> > YAHOO.example.Data = {
                  >> > bookorders: [
                  >> > {id:"po-0167", date:new Date(1980, 2, 24), quantity:1,
                  >> > amount:4, title:"A Book About Nothing"},
                  >> > {id:"po-0783", date:new Date("January 3, 1983"),
                  >> > quantity:null, amount:12.12345, title:"The Meaning of Life"},
                  >> > {id:"po-0297", date:new Date(1978, 11, 12), quantity:12,
                  >> > amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
                  >> > {id:"po-1482", date:new Date("March 11, 1985"), quantity:6,
                  >> > amount:3.5, title:"Read Me Twice"}
                  >> > ]
                  >> > }
                  >> >
                  >> > YAHOO.example.Data2 = {
                  >> > bookorders: [
                  >> > {id:"po-1111", date:new Date(1980, 2, 24), quantity:1,
                  >> > amount:4, title:"A Book About Nothing"},
                  >> > {id:"po-2222", date:new Date("January 3, 1983"),
                  >> > quantity:null, amount:12.12345, title:"The Meaning of Life"},
                  >> > {id:"po-3333", date:new Date(1978, 11, 12), quantity:12,
                  >> > amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
                  >> > {id:"po-4444", date:new Date("March 11, 1985"), quantity:6,
                  >> > amount:3.5, title:"Read Me Twice"}
                  >> > ]
                  >> > }
                  >> >
                  >> > YAHOO.util.Event.addListener(window, "load", function() {
                  >> > YAHOO.example.Basic = new function() {
                  >> > var myColumnDefs = [
                  >> > {key:"id", sortable:true, resizeable:true},
                  >> > {key:"date", formatter:YAHOO.widget.DataTable.formatDate,
                  >> > sortable:true,
                  >> >
                  > sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
                  >> >
                  >> > {key:"quantity",
                  >> > formatter:YAHOO.widget.DataTable.formatNumber, sortable:true,
                  >> > resizeable:true},
                  >> > {key:"amount",
                  >> > formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true,
                  >> > resizeable:true},
                  >> > {key:"title", sortable:true, resizeable:true}
                  >> > ];
                  >> >
                  >> > this.myDataSource = new
                  >> > YAHOO.util.DataSource(YAHOO.example.Data2.bookorders);
                  >> > this.myDataSource.responseType =
                  >> > YAHOO.util.DataSource.TYPE_JSARRAY;
                  >> > this.myDataSource.responseSchema = {
                  >> > fields: ["id","date","quantity","amount","title"]
                  >> > };
                  >> > this.myDataTable = new YAHOO.widget.DataTable("yuidt",
                  >> > myColumnDefs, this.myDataSource, {caption:"DataTable
                  >> > Caption"});
                  >> >
                  >> >
                  >> >
                  >> > this.myDataSource2 = new
                  >> > YAHOO.util.DataSource(YAHOO.example.Data2.bookorders);
                  >> > this.myDataSource2.responseType =
                  >> > YAHOO.util.DataSource.TYPE_JSARRAY;
                  >> > this.myDataSource2.responseSchema = {
                  >> > fields: ["id","date","quantity","amount","title"]
                  >> > };
                  >> >
                  >> >
                  >> >
                  >> > YAHOO.util.Event.addListener("button", "click", function(){new
                  >> > YAHOO.widget.DataTable("yuidt",
                  >> > myColumnDefs, this.myDataSource2, {caption:"DataTable
                  >> > Caption"}); });
                  >> > };
                  >> > });
                  >> > </script>
                  >> > </html>
                  >> >
                  >> >
                  >> > ------------------------------------
                  >> >
                  >> > Yahoo! Groups Links
                  >> >
                  >> >
                  >> >
                  >>
                  >>
                  >>
                  > --------------------------------------------------------------------------------
                  >>
                  >>
                  >>
                  >> No virus found in this incoming message.
                  >> Checked by AVG.
                  >> Version: 8.0.100 / Virus Database: 269.23.11/1422 - Release Date:
                  > 08/05/2008
                  >> 17:24
                  >>
                  >
                  >
                  >
                  > ------------------------------------
                  >
                  > Yahoo! Groups Links
                  >
                  >
                  >


                  --------------------------------------------------------------------------------



                  No virus found in this incoming message.
                  Checked by AVG.
                  Version: 8.0.100 / Virus Database: 269.23.16/1427 - Release Date: 11/05/2008
                  13:08
                • anjhinz
                  I just implemented this, switching from a LocalDataSource for the initial page load to an XHRDataSource for server side sorting. I was able to do it without
                  Message 8 of 9 , Jul 2, 2009
                  • 0 Attachment
                    I just implemented this, switching from a LocalDataSource for the initial page load to an XHRDataSource for server side sorting. I was able to do it without completely reinitializing the DataTable. It's basically doing the same thing the XHRDataSource constructor does after calling the base constructor, and setting the one method that XHRDataSource overrides (makeConnection). Here's what I used:

                    myDataTable.subscribe("renderEvent", function() {
                    var ds = this.getDataSource();
                    ds.liveData = 'Data.ashx?';
                    ds.dataType = YAHOO.util.DataSource.TYPE_XHR;
                    ds.responseType = YAHOO.util.DataSource.TYPE_JSON;
                    ds.connMgr = YAHOO.util.Connect;
                    ds.connMethodPost = false;
                    ds.connTimeout = 0;
                    ds.makeConnection = YAHOO.util.XHRDataSource.prototype.makeConnection;
                    });
                  • Satyam
                    It is better to do on the initEvent since the initEvent fires just once while renderEvent fires every time the DataTable is redrawn no matter what the reason.
                    Message 9 of 9 , Jul 2, 2009
                    • 0 Attachment
                      It is better to do on the initEvent since the initEvent fires just once
                      while renderEvent fires every time the DataTable is redrawn no matter
                      what the reason.

                      Satyam

                      anjhinz escribió:
                      > I just implemented this, switching from a LocalDataSource for the initial page load to an XHRDataSource for server side sorting. I was able to do it without completely reinitializing the DataTable. It's basically doing the same thing the XHRDataSource constructor does after calling the base constructor, and setting the one method that XHRDataSource overrides (makeConnection). Here's what I used:
                      >
                      > myDataTable.subscribe("renderEvent", function() {
                      > var ds = this.getDataSource();
                      > ds.liveData = 'Data.ashx?';
                      > ds.dataType = YAHOO.util.DataSource.TYPE_XHR;
                      > ds.responseType = YAHOO.util.DataSource.TYPE_JSON;
                      > ds.connMgr = YAHOO.util.Connect;
                      > ds.connMethodPost = false;
                      > ds.connTimeout = 0;
                      > ds.makeConnection = YAHOO.util.XHRDataSource.prototype.makeConnection;
                      > });
                      >
                      >
                      >
                      > ------------------------------------
                      >
                      > Yahoo! Groups Links
                      >
                      >
                      >
                      > ------------------------------------------------------------------------
                      >
                      >
                      > No virus found in this incoming message.
                      > Checked by AVG - www.avg.com
                      > Version: 8.5.375 / Virus Database: 270.13.2/2214 - Release Date: 07/02/09 05:54:00
                      >
                      >
                    Your message has been successfully submitted and would be delivered to recipients shortly.