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

DataTable Server-side pagination not working

Expand Messages
  • gautam_gsaha
    Hi, I tried out the DataTable server side pagination as per the example in YUI site.I receive the request in the server when the page is being loaded but in
    Message 1 of 6 , Feb 24, 2009

      Hi,

      I tried out the DataTable server side pagination as per the example in YUI site.I receive the request in the server when the page is being loaded but in the client side I only see "Loading..".The following is the code:

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

      YAHOO.util.Event.addListener(

      window,

      "load",

      function() {

      YAHOO.mr = Object();

      YAHOO.mr.ProfilePages =

      new function(){

      // Column definitions

      var myColumnDefs = [

      {key:"name", label:"Name", sortable:true},

      {key:"mobileno", label:"Mobile", sortable:true},

      {key:"idno", label:"IDNo", sortable:true},

      {key:"email", label:"Email", sortable:true}

      ];

      // DataSource instance

      this.myDataSource = new YAHOO.util.DataSource("/mr4_3/common/profile/view?");

      this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;

      this.myDataSource.responseSchema = {

      resultsList: "records",

      fields: [

      "name","mobileno","idno","email"]

      };

      // DataTable instance

      var oConfigs = {

      initialRequest: "startIndex=0&pageSize=3", // Initial values

      };

      this.myDataTable = new YAHOO.widget.DataTable("dynamicdata",

      myColumnDefs,

      this.myDataSource,

      oConfigs);

      // Custom code to parse the raw server data for Paginator values and page links

      this.myDataSource.doBeforeCallback = function(oRequest, oRawResponse, oParsedResponse) {

      var

      oSelf = YAHOO.mr.ProfilePages;

      var oDataTable = oSelf.myDataTable;

      // Get Paginator values

      var oRawResponse = oRawResponse.parseJSON(); //JSON.parse(oRawResponse); // Parse the JSON data

      var recordsReturned = oRawResponse.recordsReturned; // How many records this page

      var startIndex = oRawResponse.startIndex; // Start record index this page

      var endIndex = startIndex + recordsReturned -1; // End record index this page

      var totalRecords = oRawResponse.totalRecords; // Total records all pages

      // Update the DataTable Paginator with new values

      var newPag = {

      recordsReturned: recordsReturned,

      startRecordIndex: startIndex,

      endIndex: endIndex,

      totalResults: totalRecords

      }

      oDataTable.updatePaginator(newPag);

      // Update the links UI

      YAHOO.util.Dom.get("prevLink").innerHTML = (startIndex === 0) ? "<" :

      "<a href=\"#previous\" alt=\"Show previous items\"><</a>" ;

      YAHOO.util.Dom.get(

      "nextLink").innerHTML =

      (endIndex >= totalRecords) ?

      ">" :

      "<a href=\"#next\" alt=\"Show next items\">></a>";

      YAHOO.util.Dom.get(

      "startIndex").innerHTML = startIndex;

      YAHOO.util.Dom.get(

      "endIndex").innerHTML = endIndex;

      YAHOO.util.Dom.get(

      "ofTotal").innerHTML = " of " + totalRecords;

      // Let the DataSource parse the rest of the response

      return oParsedResponse;

      };//End of doBeforeCallback

      // Hook up custom pagination

      this.getPage = function(nStartRecordIndex, nResults) {

      // If a new value is not passed in

      // use the old value

      if(!YAHOO.lang.isValue(nResults)) {

      nResults = this.myDataTable.get("paginator").totalRecords;

      }

      // Invalid value

      if(!YAHOO.lang.isValue(nStartRecordIndex)) {

      return

      ;

      }

      var

      newRequest = "startIndex=" + nStartRecordIndex + "&results=" + nResults;

      this.myDataSource.sendRequest(newRequest, this.myDataTable.onDataReturnInitializeTable, this.myDataTable);

      };

      this.getPreviousPage = function(e) {

      YAHOO.util.Event.stopEvent(e);

      // Already at first page

      if(this.myDataTable.get("paginator").startRecordIndex === 0) {

      return

      ;

      }

      var

      newStartRecordIndex = this.myDataTable.get("paginator").startRecordIndex - this.myDataTable.get("paginator").rowsThisPage;

      this.getPage(newStartRecordIndex);

      };

      this.getNextPage = function(e) {

      YAHOO.util.Event.stopEvent(e);

      // Already at last page

      if(this.myDataTable.get("paginator").startRecordIndex +

      this.myDataTable.get("paginator").rowsThispage >=

      this.myDataTable.get("paginator").totalRecords) {

      return

      ;

      }

      var

      newStartRecordIndex = (this.myDataTable.get("paginator").startRecordIndex + this.myDataTable.get("paginator").rowsThisPage);

      this.getPage(newStartRecordIndex);

      };

      YAHOO.util.Event.addListener(YAHOO.util.Dom.get(

      "prevLink"), "click", this.getPreviousPage, this, true);

      YAHOO.util.Event.addListener(YAHOO.util.Dom.get(

      "nextLink"), "click", this.getNextPage, this, true);

      };//YAHOO.mr.ProfilePages definition end

      } //addListener Callback end

      );//addListener end

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

    • Eric Miraglia
      Gautam, I just tried out that example: http://developer.yahoo.com/yui/examples/datatable/dt_dynamicdata.html ...and it s working well for me. Can you provide
      Message 2 of 6 , Feb 24, 2009
        Gautam,

        I just tried out that example:


        ...and it's working well for me.  Can you provide a URL to the page that's giving you a problem?

        -Eric


        On Feb 24, 2009, at 8:04 AM, gautam_gsaha wrote:


        Hi,

        I tried out the DataTable server side pagination as per the example in YUI site.I receive the request in the server when the page is being loaded but in the client side I only see "Loading..". The following is the code:

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

        YAHOO.util.Event. addListener(

        window,

        "load",

        function() {


        YAHOO.mr = Object();


        YAHOO.mr.ProfilePag es = new function(){


        // Column definitions

        var myColumnDefs = [

        {key:"name", label:"Name", sortable:true},

        {key:"mobileno", label:"Mobile", sortable:true},

        {key:"idno", label:"IDNo", sortable:true},

        {key:"email", label:"Email", sortable:true}

        ];



        // DataSource instance

        this.myDataSource = new YAHOO.util.DataSour ce("/mr4_3/common/ profile/view? ");

        this.myDataSource. responseType = YAHOO.util.DataSour ce.TYPE_JSON;

        this.myDataSource. responseSchema = {

        resultsList: "records",

        fields: ["name","mobileno","idno","email"]

        };


        // DataTable instance

        var oConfigs = {

        initialRequest: "startIndex= 0&pageSize=3", // Initial values

        };


        this.myDataTable = new YAHOO.widget. DataTable("dynamicdata",

        myColumnDefs,

        this.myDataSource,

        oConfigs);


        // Custom code to parse the raw server data for Paginator values and page links

        this.myDataSource. doBeforeCallback = function(oRequest, oRawResponse, oParsedResponse) {

        var oSelf = YAHOO.mr.ProfilePag es;

        var oDataTable = oSelf.myDataTable;


        // Get Paginator values

        var oRawResponse = oRawResponse. parseJSON( ); //JSON.parse( oRawResponse) ; // Parse the JSON data

        var recordsReturned = oRawResponse. recordsReturned; // How many records this page

        var startIndex = oRawResponse. startIndex; // Start record index this page

        var endIndex = startIndex + recordsReturned -1; // End record index this page

        var totalRecords = oRawResponse. totalRecords; // Total records all pages


        // Update the DataTable Paginator with new values

        var newPag = {

        recordsReturned: recordsReturned,

        startRecordIndex: startIndex,

        endIndex: endIndex,

        totalResults: totalRecords

        }

        oDataTable.updatePa ginator(newPag) ;


        // Update the links UI

        YAHOO.util.Dom. get("prevLink").innerHTML = (startIndex === 0) ? "<" :

        "<a href=\"#previous\ " alt=\"Show previous items\"><</a>" ;

        YAHOO.util.Dom. get("nextLink").innerHTML =

        (endIndex >= totalRecords) ? ">" :

        "<a href=\"#next\ " alt=\"Show next items\">></a>";

        YAHOO.util.Dom. get("startIndex").innerHTML = startIndex;

        YAHOO.util.Dom. get("endIndex").innerHTML = endIndex;

        YAHOO.util.Dom. get("ofTotal").innerHTML = " of " + totalRecords;


        // Let the DataSource parse the rest of the response

        return oParsedResponse;

        };//End of doBeforeCallback



        // Hook up custom pagination

        this.getPage = function(nStartRecordIndex, nResults) {

        // If a new value is not passed in

        // use the old value

        if(!YAHOO.lang. isValue(nResults )) {

        nResults = this.myDataTable. get("paginator").totalRecords;

        }

        // Invalid value

        if(!YAHOO.lang. isValue(nStartRe cordIndex) ) {

        return;

        }

        var newRequest = "startIndex= " + nStartRecordIndex + "&results=" + nResults;

        this.myDataSource. sendRequest( newRequest, this.myDataTable. onDataReturnInit ializeTable,this.myDataTable) ;

        };



        this.getPreviousPage =

      • gautam_gsaha
        Eric, Appreciate your reply. I donot have a live server so a link to my page won t be possible rightaway. However,I did try out the Dynamic Data example and
        Message 3 of 6 , Feb 24, 2009
          Eric,

          Appreciate your reply.

          I donot have a live server so a link to my page won't be possible
          rightaway.
          However,I did try out the Dynamic Data example and doesnot work out
          for either.
          Since I'm learning Javascript,there is perhaps some problem in the
          code implementation below.If you could point out the same,it would
          help me understand the mistake I may have done.

          --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@...>
          wrote:
          >
          > Gautam,
          >
          > I just tried out that example:
          >
          >
          http://developer.yahoo.com/yui/examples/datatable/dt_dynamicdata.html
          >
          > ...and it's working well for me. Can you provide a URL to the
          page
          > that's giving you a problem?
          >
          > -Eric
          >
          >
          > On Feb 24, 2009, at 8:04 AM, gautam_gsaha wrote:
          >
          > >
          > > Hi,
          > >
          > > I tried out the DataTable server side pagination as per the
          example
          > > in YUI site.I receive the request in the server when the page is
          > > being loaded but in the client side I only see "Loading..".The
          > > following is the code:
          > >
          > > --------------------------------------------------
          > >
          > > YAHOO.util.Event.addListener(
          > >
          > > window,
          > >
          > > "load",
          > >
          > > function() {
          > >
          > >
          > > YAHOO.mr = Object();
          > >
          > >
          > > YAHOO.mr.ProfilePages = new function(){
          > >
          > >
          > > // Column definitions
          > >
          > > var myColumnDefs = [
          > >
          > > {key:"name", label:"Name", sortable:true},
          > >
          > > {key:"mobileno", label:"Mobile", sortable:true},
          > >
          > > {key:"idno", label:"IDNo", sortable:true},
          > >
          > > {key:"email", label:"Email", sortable:true}
          > >
          > > ];
          > >
          > >
          > >
          > > // DataSource instance
          > >
          > > this.myDataSource = new YAHOO.util.DataSource
          ("/mr4_3/common/profile/
          > > view?");
          > >
          > > this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
          > >
          > > this.myDataSource.responseSchema = {
          > >
          > > resultsList: "records",
          > >
          > > fields: ["name","mobileno","idno","email"]
          > >
          > > };
          > >
          > >
          > > // DataTable instance
          > >
          > > var oConfigs = {
          > >
          > > initialRequest: "startIndex=0&pageSize=3", // Initial values
          > >
          > > };
          > >
          > >
          > > this.myDataTable = new YAHOO.widget.DataTable("dynamicdata",
          > >
          > > myColumnDefs,
          > >
          > > this.myDataSource,
          > >
          > > oConfigs);
          > >
          > >
          > > // Custom code to parse the raw server data for Paginator values
          and
          > > page links
          > >
          > > this.myDataSource.doBeforeCallback = function(oRequest,
          > > oRawResponse, oParsedResponse) {
          > >
          > > var oSelf = YAHOO.mr.ProfilePages;
          > >
          > > var oDataTable = oSelf.myDataTable;
          > >
          > >
          > > // Get Paginator values
          > >
          > > var oRawResponse = oRawResponse.parseJSON(); //
          > > JSON.parse(oRawResponse); // Parse the JSON data
          > >
          > > var recordsReturned = oRawResponse.recordsReturned; // How many
          > > records this page
          > >
          > > var startIndex = oRawResponse.startIndex; // Start record index
          this
          > > page
          > >
          > > var endIndex = startIndex + recordsReturned -1; // End record
          index
          > > this page
          > >
          > > var totalRecords = oRawResponse.totalRecords; // Total records
          all
          > > pages
          > >
          > >
          > > // Update the DataTable Paginator with new values
          > >
          > > var newPag = {
          > >
          > > recordsReturned: recordsReturned,
          > >
          > > startRecordIndex: startIndex,
          > >
          > > endIndex: endIndex,
          > >
          > > totalResults: totalRecords
          > >
          > > }
          > >
          > > oDataTable.updatePaginator(newPag);
          > >
          > >
          > > // Update the links UI
          > >
          > > YAHOO.util.Dom.get("prevLink").innerHTML = (startIndex ===
          0) ? "<" :
          > >
          > > "<a href=\"#previous\" alt=\"Show previous items\"><</a>" ;
          > >
          > > YAHOO.util.Dom.get("nextLink").innerHTML =
          > >
          > > (endIndex >= totalRecords) ? ">" :
          > >
          > > "<a href=\"#next\" alt=\"Show next items\">></a>";
          > >
          > > YAHOO.util.Dom.get("startIndex").innerHTML = startIndex;
          > >
          > > YAHOO.util.Dom.get("endIndex").innerHTML = endIndex;
          > >
          > > YAHOO.util.Dom.get("ofTotal").innerHTML = " of " + totalRecords;
          > >
          > >
          > > // Let the DataSource parse the rest of the response
          > >
          > > return oParsedResponse;
          > >
          > > };//End of doBeforeCallback
          > >
          > >
          > >
          > > // Hook up custom pagination
          > >
          > > this.getPage = function(nStartRecordIndex, nResults) {
          > >
          > > // If a new value is not passed in
          > >
          > > // use the old value
          > >
          > > if(!YAHOO.lang.isValue(nResults)) {
          > >
          > > nResults = this.myDataTable.get("paginator").totalRecords;
          > >
          > > }
          > >
          > > // Invalid value
          > >
          > > if(!YAHOO.lang.isValue(nStartRecordIndex)) {
          > >
          > > return;
          > >
          > > }
          > >
          > > var newRequest = "startIndex=" + nStartRecordIndex + "&results="
          +
          > > nResults;
          > >
          > > this.myDataSource.sendRequest(newRequest,
          > > this.myDataTable.onDataReturnInitializeTable,this.myDataTable);
          > >
          > > };
          > >
          > >
          > >
          > > this.getPreviousPage = function(e) {
          > >
          > > YAHOO.util.Event.stopEvent(e);
          > >
          > > // Already at first page
          > >
          > > if(this.myDataTable.get("paginator").startRecordIndex === 0) {
          > >
          > > return;
          > >
          > > }
          > >
          > > var newStartRecordIndex =
          > > this.myDataTable.get("paginator").startRecordIndex -
          > > this.myDataTable.get("paginator").rowsThisPage;
          > >
          > > this.getPage(newStartRecordIndex);
          > >
          > > };
          > >
          > >
          > >
          > > this.getNextPage = function(e) {
          > >
          > > YAHOO.util.Event.stopEvent(e);
          > >
          > > // Already at last page
          > >
          > > if(this.myDataTable.get("paginator").startRecordIndex +
          > >
          > > this.myDataTable.get("paginator").rowsThispage >=
          > >
          > > this.myDataTable.get("paginator").totalRecords) {
          > >
          > > return;
          > >
          > > }
          > >
          > > var newStartRecordIndex =
          > > (this.myDataTable.get("paginator").startRecordIndex
          > > +this.myDataTable.get("paginator").rowsThisPage);
          > >
          > > this.getPage(newStartRecordIndex);
          > >
          > > };
          > >
          > >
          > > YAHOO.util.Event.addListener(YAHOO.util.Dom.get("prevLink"),
          > > "click", this.getPreviousPage, this,true);
          > >
          > > YAHOO.util.Event.addListener(YAHOO.util.Dom.get("nextLink"),
          > > "click", this.getNextPage, this,true);
          > >
          > >
          > >
          > >
          > > };//YAHOO.mr.ProfilePages definition end
          > >
          > >
          > > } //addListener Callback end
          > >
          > > );//addListener end
          > >
          > > -------------------------------------------
          > >
          > >
          > >
          >
        • Eric Miraglia
          Gautam, Note that examples that use server-side data require you to be running them from a PHP-enabled web server. That s the most likely source of the
          Message 4 of 6 , Feb 25, 2009
            Gautam,

            Note that examples that use server-side data require you to be running them from a PHP-enabled web server.  That's the most likely source of the problem (are you running them from the filesystem or on a server that doesn't support PHP?).

            Beyond that, we'd probably need to see a URL to be of assistance.

            -Eric




            On Feb 24, 2009, at 6:52 PM, gautam_gsaha wrote:

            Eric,

            Appreciate your reply.

            I donot have a live server so a link to my page won't be possible
            rightaway.
            However,I did try out the Dynamic Data example and doesnot work out
            for either.
            Since I'm learning Javascript,there is perhaps some problem in the
            code implementation below.If you could point out the same,it would
            help me understand the mistake I may have done.

            --- In ydn-javascript@ yahoogroups. com, Eric Miraglia <miraglia@.. .>
            wrote:
            >
            > Gautam,
            >
            > I just tried out that example:
            >
            >
            http://developer. yahoo.com/ yui/examples/ datatable/ dt_dynamicdata. html
            >
            > ...and it's working well for me. Can you provide a URL to the
            page
            > that's giving you a problem?
            >
            > -Eric
            >
            >
            > On Feb 24, 2009, at 8:04 AM, gautam_gsaha wrote:
            >
            > >
            > > Hi,
            > >
            > > I tried out the DataTable server side pagination as per the
            example
            > > in YUI site.I receive the request in the server when the page is
            > > being loaded but in the client side I only see "Loading..". The
            > > following is the code:
            > >
            > > ------------ --------- --------- --------- --------- --
            > >
            > > YAHOO.util.Event. addListener(
            > >
            > > window,
            > >
            > > "load",
            > >
            > > function() {
            > >
            > >
            > > YAHOO.mr = Object();
            > >
            > >
            > > YAHOO.mr.ProfilePag es = new function(){
            > >
            > >
            > > // Column definitions
            > >
            > > var myColumnDefs = [
            > >
            > > {key:"name", label:"Name" , sortable:true} ,
            > >
            > > {key:"mobileno" , label:"Mobile" , sortable:true} ,
            > >
            > > {key:"idno", label:"IDNo" , sortable:true} ,
            > >
            > > {key:"email" , label:"Email" , sortable:true}
            > >
            > > ];
            > >
            > >
            > >
            > > // DataSource instance
            > >
            > > this.myDataSource = new YAHOO.util.DataSour ce
            ("/mr4_3/common/ profile/
            > > view?");
            > >
            > > this.myDataSource. responseType = YAHOO.util.DataSour ce.TYPE_JSON;
            > >
            > > this.myDataSource. responseSchema = {
            > >
            > > resultsList: "records",
            > >
            > > fields: ["name","mobileno" ,"idno"," email"]
            > >
            > > };
            > >
            > >
            > > // DataTable instance
            > >
            > > var oConfigs = {
            > >
            > > initialRequest: "startIndex= 0&pageSize= 3", // Initial values
            > >
            > > };
            > >
            > >
            > > this.myDataTable = new YAHOO.widget. DataTable( "dynamicdata" ,
            > >
            > > myColumnDefs,
            > >
            > > this.myDataSource,
            > >
            > > oConfigs);
            > >
            > >
            > > // Custom code to parse the raw server data for Paginator values
            and
            > > page links
            > >
            > > this.myDataSource. doBeforeCallback = function(oRequest,
            > > oRawResponse, oParsedResponse) {
            > >
            > > var oSelf = YAHOO.mr.ProfilePag es;
            > >
            > > var oDataTable = oSelf.myDataTable;
            > >
            > >
            > > // Get Paginator values
            > >
            > > var oRawResponse = oRawResponse. parseJSON( ); //
            > > JSON.parse(oRawResp onse); // Parse the JSON data
            > >
            > > var recordsReturned = oRawResponse. recordsReturned; // How many
            > > records this page
            > >
            > > var startIndex = oRawResponse. startIndex; // Start record index
            this
            > > page
            > >
            > > var endIndex = startIndex + recordsReturned -1; // End record
            index
            > > this page
            > >
            > > var totalRecords = oRawResponse. totalRecords; // Total records
            all
            > > pages
            > >
            > >
            > > // Update the DataTable Paginator with new values
            > >
            > > var newPag = {
            > >
            > > recordsReturned: recordsReturned,
            > >
            > > startRecordIndex: startIndex,
            > >
            > > endIndex: endIndex,
            > >
            > > totalResults: totalRecords
            > >
            > > }
            > >
            > > oDataTable.updatePa ginator(newPag) ;
            > >
            > >
            > > // Update the links UI
            > >
            > > YAHOO.util.Dom. get("prevLink" ).innerHTML = (startIndex ===
            0) ? "<" :
            > >
            > > "<a href=\"#previous\ " alt=\"Show previous items\"><</a> " ;
            > >
            > > YAHOO.util.Dom. get("nextLink" ).innerHTML =
            > >
            > > (endIndex >= totalRecords) ? ">" :
            > >
            > > "<a href=\"#next\ " alt=\"Show next items\">></a> ";
            > >
            > > YAHOO.util.Dom. get("startIndex" ).innerHTML = startIndex;
            > >
            > > YAHOO.util.Dom. get("endIndex" ).innerHTML = endIndex;
            > >
            > > YAHOO.util.Dom. get("ofTotal" ).innerHTML = " of " + totalRecords;
            > >
            > >
            > > // Let the DataSource parse the rest of the response
            > >
            > > return oParsedResponse;
            > >
            > > };//End of doBeforeCallback
            > >
            > >
            > >
            > > // Hook up custom pagination
            > >
            > > this.getPage = function(nStartReco rdIndex, nResults) {
            > >
            > > // If a new value is not passed in
            > >
            > > // use the old value
            > >
            > > if(!YAHOO.lang. isValue(nResults )) {
            > >
            > > nResults = this.myDataTable. get("paginator" ).totalRecords;
            > >
            > > }
            > >
            > > // Invalid value
            > >
            > > if(!YAHOO.lang. isValue(nStartRe cordIndex) ) {
            > >
            > > return;
            > >
            > > }
            > >
            > > var newRequest = "startIndex= " + nStartRecordIndex + "&results="
            +
            > > nResults;
            > >
            > > this.myDataSource. sendRequest( newRequest,
            > > this.myDataTable. onDataReturnInit ializeTable, this.myDataTable );
            > >
            > > };
            > >
            > >
            > >
            > > this.getPreviousPag e = function(e) {
            > >
            > > YAHOO.util.Event. stopEvent( e);
            > >
            > > // Already at first page
            > >
            > > if(this.myDataTable .get("paginator" ).startRecordInd ex === 0) {
            > >
            > > return;
            > >
            > > }
            > >
            > > var newStartRecordIndex =
            > > this.myDataTable. get("paginator" ).startRecordInd ex -
            > > this.myDataTable. get("paginator" ).rowsThisPage;
            > >
            > > this.getPage( newStartRecordIn dex);
            > >
            > > };
            > >
            > >
            > >
            > > this.getNextPage = function(e) {
            > >
            > > YAHOO.util.Event. stopEvent( e);
            > >
            > > // Already at last page
            > >
            > > if(this.myDataTable .get("paginator" ).startRecordInd ex +
            > >
            > > this.myDataTable. get("paginator" ).rowsThispage >=
            > >
            > > this.myDataTable. get("paginator" ).totalRecords) {
            > >
            > > return;
            > >
            > > }
            > >
            > > var newStartRecordIndex =
            > > (this.myDataTable. get("paginator" ).startRecordInd ex
            > > +this.myDataTable. get("paginator" ).rowsThisPage) ;
            > >
            > > this.getPage( newStartRecordIn dex);
            > >
            > > };
            > >
            > >
            > > YAHOO.util.Event. addListener( YAHOO.util. Dom.get(" prevLink" ),
            > > "click", this.getPreviousPag e, this,true);
            > >
            > > YAHOO.util.Event. addListener( YAHOO.util. Dom.get(" nextLink" ),
            > > "click", this.getNextPage, this,true);
            > >
            > >
            > >
            > >
            > > };//YAHOO.mr. ProfilePages definition end
            > >
            > >
            > > } //addListener Callback end
            > >
            > > );//addListener end
            > >
            > > ------------ --------- --------- --------- ----
            > >
            > >
            > >
            >


          • gautam_gsaha
            Hi Eric, My server is based on DrupalCMS which PHP based as you might already know.The URI you see in the snippet is a drupal path with the server name
            Message 5 of 6 , Feb 25, 2009
              Hi Eric,

              My server is based on DrupalCMS which PHP based as you might already
              know.The URI you see in the snippet is a drupal path with the server
              name prepended.
              I shall try to get you a link to online server.Till then,did you see
              any syntactical problem in the JS .

              --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@...>
              wrote:
              >
              > Gautam,
              >
              > Note that examples that use server-side data require you to be
              running
              > them from a PHP-enabled web server. That's the most likely source
              of
              > the problem (are you running them from the filesystem or on a
              server
              > that doesn't support PHP?).
              >
              > Beyond that, we'd probably need to see a URL to be of assistance.
              >
              > -Eric
              >
              >
              >
              >
              > On Feb 24, 2009, at 6:52 PM, gautam_gsaha wrote:
              >
              > > Eric,
              > >
              > > Appreciate your reply.
              > >
              > > I donot have a live server so a link to my page won't be possible
              > > rightaway.
              > > However,I did try out the Dynamic Data example and doesnot work
              out
              > > for either.
              > > Since I'm learning Javascript,there is perhaps some problem in the
              > > code implementation below.If you could point out the same,it would
              > > help me understand the mistake I may have done.
              > >
              > > --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@>
              > > wrote:
              > > >
              > > > Gautam,
              > > >
              > > > I just tried out that example:
              > > >
              > > >
              > >
              http://developer.yahoo.com/yui/examples/datatable/dt_dynamicdata.html
              > > >
              > > > ...and it's working well for me. Can you provide a URL to the
              > > page
              > > > that's giving you a problem?
              > > >
              > > > -Eric
              > > >
              > > >
              > > > On Feb 24, 2009, at 8:04 AM, gautam_gsaha wrote:
              > > >
              > > > >
              > > > > Hi,
              > > > >
              > > > > I tried out the DataTable server side pagination as per the
              > > example
              > > > > in YUI site.I receive the request in the server when the page
              is
              > > > > being loaded but in the client side I only see "Loading..".The
              > > > > following is the code:
              > > > >
              > > > > --------------------------------------------------
              > > > >
              > > > > YAHOO.util.Event.addListener(
              > > > >
              > > > > window,
              > > > >
              > > > > "load",
              > > > >
              > > > > function() {
              > > > >
              > > > >
              > > > > YAHOO.mr = Object();
              > > > >
              > > > >
              > > > > YAHOO.mr.ProfilePages = new function(){
              > > > >
              > > > >
              > > > > // Column definitions
              > > > >
              > > > > var myColumnDefs = [
              > > > >
              > > > > {key:"name", label:"Name", sortable:true},
              > > > >
              > > > > {key:"mobileno", label:"Mobile", sortable:true},
              > > > >
              > > > > {key:"idno", label:"IDNo", sortable:true},
              > > > >
              > > > > {key:"email", label:"Email", sortable:true}
              > > > >
              > > > > ];
              > > > >
              > > > >
              > > > >
              > > > > // DataSource instance
              > > > >
              > > > > this.myDataSource = new YAHOO.util.DataSource
              > > ("/mr4_3/common/profile/
              > > > > view?");
              > > > >
              > > > > this.myDataSource.responseType =
              YAHOO.util.DataSource.TYPE_JSON;
              > > > >
              > > > > this.myDataSource.responseSchema = {
              > > > >
              > > > > resultsList: "records",
              > > > >
              > > > > fields: ["name","mobileno","idno","email"]
              > > > >
              > > > > };
              > > > >
              > > > >
              > > > > // DataTable instance
              > > > >
              > > > > var oConfigs = {
              > > > >
              > > > > initialRequest: "startIndex=0&pageSize=3", // Initial values
              > > > >
              > > > > };
              > > > >
              > > > >
              > > > > this.myDataTable = new YAHOO.widget.DataTable("dynamicdata",
              > > > >
              > > > > myColumnDefs,
              > > > >
              > > > > this.myDataSource,
              > > > >
              > > > > oConfigs);
              > > > >
              > > > >
              > > > > // Custom code to parse the raw server data for Paginator
              values
              > > and
              > > > > page links
              > > > >
              > > > > this.myDataSource.doBeforeCallback = function(oRequest,
              > > > > oRawResponse, oParsedResponse) {
              > > > >
              > > > > var oSelf = YAHOO.mr.ProfilePages;
              > > > >
              > > > > var oDataTable = oSelf.myDataTable;
              > > > >
              > > > >
              > > > > // Get Paginator values
              > > > >
              > > > > var oRawResponse = oRawResponse.parseJSON(); //
              > > > > JSON.parse(oRawResponse); // Parse the JSON data
              > > > >
              > > > > var recordsReturned = oRawResponse.recordsReturned; // How
              many
              > > > > records this page
              > > > >
              > > > > var startIndex = oRawResponse.startIndex; // Start record
              index
              > > this
              > > > > page
              > > > >
              > > > > var endIndex = startIndex + recordsReturned -1; // End record
              > > index
              > > > > this page
              > > > >
              > > > > var totalRecords = oRawResponse.totalRecords; // Total records
              > > all
              > > > > pages
              > > > >
              > > > >
              > > > > // Update the DataTable Paginator with new values
              > > > >
              > > > > var newPag = {
              > > > >
              > > > > recordsReturned: recordsReturned,
              > > > >
              > > > > startRecordIndex: startIndex,
              > > > >
              > > > > endIndex: endIndex,
              > > > >
              > > > > totalResults: totalRecords
              > > > >
              > > > > }
              > > > >
              > > > > oDataTable.updatePaginator(newPag);
              > > > >
              > > > >
              > > > > // Update the links UI
              > > > >
              > > > > YAHOO.util.Dom.get("prevLink").innerHTML = (startIndex ===
              > > 0) ? "<" :
              > > > >
              > > > > "<a href=\"#previous\" alt=\"Show previous items\"><</a>" ;
              > > > >
              > > > > YAHOO.util.Dom.get("nextLink").innerHTML =
              > > > >
              > > > > (endIndex >= totalRecords) ? ">" :
              > > > >
              > > > > "<a href=\"#next\" alt=\"Show next items\">></a>";
              > > > >
              > > > > YAHOO.util.Dom.get("startIndex").innerHTML = startIndex;
              > > > >
              > > > > YAHOO.util.Dom.get("endIndex").innerHTML = endIndex;
              > > > >
              > > > > YAHOO.util.Dom.get("ofTotal").innerHTML = " of " +
              totalRecords;
              > > > >
              > > > >
              > > > > // Let the DataSource parse the rest of the response
              > > > >
              > > > > return oParsedResponse;
              > > > >
              > > > > };//End of doBeforeCallback
              > > > >
              > > > >
              > > > >
              > > > > // Hook up custom pagination
              > > > >
              > > > > this.getPage = function(nStartRecordIndex, nResults) {
              > > > >
              > > > > // If a new value is not passed in
              > > > >
              > > > > // use the old value
              > > > >
              > > > > if(!YAHOO.lang.isValue(nResults)) {
              > > > >
              > > > > nResults = this.myDataTable.get("paginator").totalRecords;
              > > > >
              > > > > }
              > > > >
              > > > > // Invalid value
              > > > >
              > > > > if(!YAHOO.lang.isValue(nStartRecordIndex)) {
              > > > >
              > > > > return;
              > > > >
              > > > > }
              > > > >
              > > > > var newRequest = "startIndex=" + nStartRecordIndex
              + "&results="
              > > +
              > > > > nResults;
              > > > >
              > > > > this.myDataSource.sendRequest(newRequest,
              > > > >
              this.myDataTable.onDataReturnInitializeTable,this.myDataTable);
              > > > >
              > > > > };
              > > > >
              > > > >
              > > > >
              > > > > this.getPreviousPage = function(e) {
              > > > >
              > > > > YAHOO.util.Event.stopEvent(e);
              > > > >
              > > > > // Already at first page
              > > > >
              > > > > if(this.myDataTable.get("paginator").startRecordIndex === 0) {
              > > > >
              > > > > return;
              > > > >
              > > > > }
              > > > >
              > > > > var newStartRecordIndex =
              > > > > this.myDataTable.get("paginator").startRecordIndex -
              > > > > this.myDataTable.get("paginator").rowsThisPage;
              > > > >
              > > > > this.getPage(newStartRecordIndex);
              > > > >
              > > > > };
              > > > >
              > > > >
              > > > >
              > > > > this.getNextPage = function(e) {
              > > > >
              > > > > YAHOO.util.Event.stopEvent(e);
              > > > >
              > > > > // Already at last page
              > > > >
              > > > > if(this.myDataTable.get("paginator").startRecordIndex +
              > > > >
              > > > > this.myDataTable.get("paginator").rowsThispage >=
              > > > >
              > > > > this.myDataTable.get("paginator").totalRecords) {
              > > > >
              > > > > return;
              > > > >
              > > > > }
              > > > >
              > > > > var newStartRecordIndex =
              > > > > (this.myDataTable.get("paginator").startRecordIndex
              > > > > +this.myDataTable.get("paginator").rowsThisPage);
              > > > >
              > > > > this.getPage(newStartRecordIndex);
              > > > >
              > > > > };
              > > > >
              > > > >
              > > > > YAHOO.util.Event.addListener(YAHOO.util.Dom.get("prevLink"),
              > > > > "click", this.getPreviousPage, this,true);
              > > > >
              > > > > YAHOO.util.Event.addListener(YAHOO.util.Dom.get("nextLink"),
              > > > > "click", this.getNextPage, this,true);
              > > > >
              > > > >
              > > > >
              > > > >
              > > > > };//YAHOO.mr.ProfilePages definition end
              > > > >
              > > > >
              > > > > } //addListener Callback end
              > > > >
              > > > > );//addListener end
              > > > >
              > > > > -------------------------------------------
              > > > >
              > > > >
              > > > >
              > > >
              > >
              > >
              >
            • TimJowers@Yahoo.Com
              Has anyone attempted to have multiple rows appear on the screen for one real row of data. The idea is more can be seen at once. The row wraps to show more
              Message 6 of 6 , Feb 27, 2009
                Has anyone attempted to have multiple rows appear on the screen for one real row of data. The idea is more can be seen at once. The row wraps to show more columns of data. For example, the first 7 cells of data may be seen on one row and immediately beneath it are the next 7 cells of data. By using coloring or font the user can see which two visible rows correspond to the same real row of data.

                I tried to post yesterday but do not see my post. Basically, I tried numerous things but found no combination which worked to effect this in the datatable. How would you do it?

                Thanks!
                TimJowers

              Your message has been successfully submitted and would be delivered to recipients shortly.