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

YUI 2.6.0 : Client pagination issue, nagivation links does not work

Expand Messages
  • Pham Kim Cuong
    Hi, I m trying to get datatable s client pagination to work. Everythin is working fine except for nagivation links (next, prev ...links). They re all blurred,
    Message 1 of 7 , Oct 29, 2008
    • 0 Attachment
      Hi,

      I'm trying to get datatable's client pagination to work. Everythin is
      working fine except for nagivation links (next, prev ...links).
      They're all blurred, with no link.


      Do you know what can be wrong?

      Here is my code

      YAHOO.example.ClientPagination = new function() {

      var myColumnHeaders = [
      {key: "No", label: "No", formatter: null, sortable:true, width
      : "10px"},
      {key: "DocId", label: "DocID", formatter: null, sortable:
      true, width : "10px"},
      {key: "Score", label: "Score", formatter: null, sortable:
      true, width : "10px"},
      {key: "Title", label: "Title", formatter: formatTitle, width :
      "auto"},
      {key: "NOEXISTENCE", label: "OK?", formatter:
      formatFeedbackBox, sortable: false, width : "auto"},
      ];

      var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
      this.myDataSource = new YAHOO.util.DataSource(SERVLET_URL);
      this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
      this.myDataSource.responseSchema = {
      resultsList: "records",
      fields: ["No", "DocId", "Score", "Title", "Url", "Features" ]
      };


      var oConfigs = {
      paginator: new YAHOO.widget.Paginator({
      rowsPerPage: 10 }),
      };

      this.myDataTable = new
      YAHOO.widget.DataTable("MyPageTableDiv", myColumnSet,
      this.myDataSource, oConfigs);
      /* Subscribe to events for row selection */
      this.myDataTable.subscribe("rowMouseoverEvent",
      this.myDataTable.onEventHighlightRow);
      this.myDataTable.subscribe("rowMouseoutEvent",
      this.myDataTable.onEventUnhighlightRow);
      this.myDataTable.subscribe("rowClickEvent", onRowClickEvent);

      this.sendQuery = function(domainId, indexId, query){
      var getQuery = "nRecords=100&domainId=" + domainId +
      "&indexId=" + indexId + "&oquery=" + query;
      //alert("Sending query " + getQuery );
      // YAHOO.example.container.wait.show();
      var callback = {
      success : this.myDataTable.onDataReturnInitializeTable,
      failure : function () { alert("something wrong"); },
      scope : this.myDataTable
      };
      this.myDataSource.sendRequest(getQuery , callback);
      };

      };



      I have been stuck with this problem for hours. I would very appreciate
      if you can help me out.

      Thanks

      Kim

      PS : I've tried using firebug to debug but YUI is too big so firebug
      gets extremely slow to debug. Not sure how you guys debug YUI?
    • Lucas Smith
      ... YAHOO.util.DataSource.TYPE_JSON; ... Features ] ... have a look at this example: http://developer.yahoo.com/yui/examples/datatable/dt_dynamicdata.html It
      Message 2 of 7 , Oct 30, 2008
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "Pham Kim Cuong" <kimcuong@...>
        wrote:
        >
        > Hi,
        >
        > I'm trying to get datatable's client pagination to work. Everythin is
        > working fine except for nagivation links (next, prev ...links).
        > They're all blurred, with no link.
        >
        >
        > Do you know what can be wrong?
        >
        > Here is my code
        >
        > YAHOO.example.ClientPagination = new function() {
        >
        > var myColumnHeaders = [
        > {key: "No", label: "No", formatter: null, sortable:true, width
        > : "10px"},
        > {key: "DocId", label: "DocID", formatter: null, sortable:
        > true, width : "10px"},
        > {key: "Score", label: "Score", formatter: null, sortable:
        > true, width : "10px"},
        > {key: "Title", label: "Title", formatter: formatTitle, width :
        > "auto"},
        > {key: "NOEXISTENCE", label: "OK?", formatter:
        > formatFeedbackBox, sortable: false, width : "auto"},
        > ];
        >
        > var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
        > this.myDataSource = new YAHOO.util.DataSource(SERVLET_URL);
        > this.myDataSource.responseType =
        YAHOO.util.DataSource.TYPE_JSON;
        > this.myDataSource.responseSchema = {
        > resultsList: "records",
        > fields: ["No", "DocId", "Score", "Title", "Url",
        "Features" ]
        > };
        >
        >
        > var oConfigs = {
        > paginator: new YAHOO.widget.Paginator({
        > rowsPerPage: 10 }),
        > };
        >
        > this.myDataTable = new
        > YAHOO.widget.DataTable("MyPageTableDiv", myColumnSet,
        > this.myDataSource, oConfigs);
        > /* Subscribe to events for row selection */
        > this.myDataTable.subscribe("rowMouseoverEvent",
        > this.myDataTable.onEventHighlightRow);
        > this.myDataTable.subscribe("rowMouseoutEvent",
        > this.myDataTable.onEventUnhighlightRow);
        > this.myDataTable.subscribe("rowClickEvent", onRowClickEvent);
        >
        > this.sendQuery = function(domainId, indexId, query){
        > var getQuery = "nRecords=100&domainId=" + domainId +
        > "&indexId=" + indexId + "&oquery=" + query;
        > //alert("Sending query " + getQuery );
        > // YAHOO.example.container.wait.show();
        > var callback = {
        > success : this.myDataTable.onDataReturnInitializeTable,
        > failure : function () { alert("something wrong"); },
        > scope : this.myDataTable
        > };
        > this.myDataSource.sendRequest(getQuery , callback);
        > };
        >
        > };
        >
        >
        >
        > I have been stuck with this problem for hours. I would very appreciate
        > if you can help me out.
        >
        > Thanks
        >
        > Kim
        >
        > PS : I've tried using firebug to debug but YUI is too big so firebug
        > gets extremely slow to debug. Not sure how you guys debug YUI?
        >

        have a look at this example:
        http://developer.yahoo.com/yui/examples/datatable/dt_dynamicdata.html

        It looks like the step you're missing is defining
        myDataTable.handleDataReturnpayload.

        Hope this helps,
        Luke
      • Pham Kim Cuong
        Hi Luke, ... Thanks for you answer. Actually, I want to use client-side pagination, not server-side. Dynamicdata is needed for server-side only, right? Kim
        Message 3 of 7 , Oct 30, 2008
        • 0 Attachment
          Hi Luke,


          > > Kim
          > >
          > > PS : I've tried using firebug to debug but YUI is too big so firebug
          > > gets extremely slow to debug. Not sure how you guys debug YUI?
          > >
          >
          > have a look at this example:
          > http://developer.yahoo.com/yui/examples/datatable/dt_dynamicdata.html
          >
          > It looks like the step you're missing is defining
          > myDataTable.handleDataReturnpayload.

          Thanks for you answer.

          Actually, I want to use client-side pagination, not server-side.
          Dynamicdata is needed for server-side only, right?

          Kim
        • Lucas Smith
          ... Kim, Sorry, you re right. In the absence of dynamicData:true, the Paginator should get its totalRecords from the number of records in the DataTable s
          Message 4 of 7 , Oct 30, 2008
          • 0 Attachment
            --- In ydn-javascript@yahoogroups.com, "Pham Kim Cuong" <kimcuong@...>
            wrote:
            >
            > Hi Luke,
            >
            >
            > > > Kim
            > > >
            > > > PS : I've tried using firebug to debug but YUI is too big so firebug
            > > > gets extremely slow to debug. Not sure how you guys debug YUI?
            > > >
            > >
            > > have a look at this example:
            > > http://developer.yahoo.com/yui/examples/datatable/dt_dynamicdata.html
            > >
            > > It looks like the step you're missing is defining
            > > myDataTable.handleDataReturnpayload.
            >
            > Thanks for you answer.
            >
            > Actually, I want to use client-side pagination, not server-side.
            > Dynamicdata is needed for server-side only, right?
            >
            > Kim
            >

            Kim,

            Sorry, you're right. In the absence of dynamicData:true, the
            Paginator should get its totalRecords from the number of records in
            the DataTable's RecordSet.

            I took your code and attempted to recreate your issue locally, but was
            unable to. I note you have a few trailing commas, but if you were
            able to see records display in the table, you must be using a browser
            that doesn't mind that (that is, not IE). You'll want to make sure to
            remove those before long.

            Since I was unable to reproduce the issue, can you create a stripped
            down repro case on a public server for me (et al) to look at?

            Luke
          • inevagivup
            Hi Cuong, You need to proccess handleDataReturnPayload like this: /* datatable.handleDataReturnPayload = function(request, response, payload){
            Message 5 of 7 , Oct 31, 2008
            • 0 Attachment
              Hi Cuong,

              You need to proccess handleDataReturnPayload like this:
              /*
              datatable.handleDataReturnPayload = function(request, response, payload){
              payload.totalRecords = response.meta.totalRecords;
              return payload;
              }
              */
              pagination will work. But the pageLinks won't update if you request
              another data.

              --- In ydn-javascript@yahoogroups.com, "Pham Kim Cuong" <kimcuong@...>
              wrote:
              >
              > Hi,
              >
              > I'm trying to get datatable's client pagination to work. Everythin is
              > working fine except for nagivation links (next, prev ...links).
              > They're all blurred, with no link.
              >
              >
              > Do you know what can be wrong?
              >
              > Here is my code
              >
              > YAHOO.example.ClientPagination = new function() {
              >
              > var myColumnHeaders = [
              > {key: "No", label: "No", formatter: null, sortable:true, width
              > : "10px"},
              > {key: "DocId", label: "DocID", formatter: null, sortable:
              > true, width : "10px"},
              > {key: "Score", label: "Score", formatter: null, sortable:
              > true, width : "10px"},
              > {key: "Title", label: "Title", formatter: formatTitle, width :
              > "auto"},
              > {key: "NOEXISTENCE", label: "OK?", formatter:
              > formatFeedbackBox, sortable: false, width : "auto"},
              > ];
              >
              > var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
              > this.myDataSource = new YAHOO.util.DataSource(SERVLET_URL);
              > this.myDataSource.responseType =
              YAHOO.util.DataSource.TYPE_JSON;
              > this.myDataSource.responseSchema = {
              > resultsList: "records",
              > fields: ["No", "DocId", "Score", "Title", "Url",
              "Features" ]
              > };
              >
              >
              > var oConfigs = {
              > paginator: new YAHOO.widget.Paginator({
              > rowsPerPage: 10 }),
              > };
              >
              > this.myDataTable = new
              > YAHOO.widget.DataTable("MyPageTableDiv", myColumnSet,
              > this.myDataSource, oConfigs);
              > /* Subscribe to events for row selection */
              > this.myDataTable.subscribe("rowMouseoverEvent",
              > this.myDataTable.onEventHighlightRow);
              > this.myDataTable.subscribe("rowMouseoutEvent",
              > this.myDataTable.onEventUnhighlightRow);
              > this.myDataTable.subscribe("rowClickEvent", onRowClickEvent);
              >
              > this.sendQuery = function(domainId, indexId, query){
              > var getQuery = "nRecords=100&domainId=" + domainId +
              > "&indexId=" + indexId + "&oquery=" + query;
              > //alert("Sending query " + getQuery );
              > // YAHOO.example.container.wait.show();
              > var callback = {
              > success : this.myDataTable.onDataReturnInitializeTable,
              > failure : function () { alert("something wrong"); },
              > scope : this.myDataTable
              > };
              > this.myDataSource.sendRequest(getQuery , callback);
              > };
              >
              > };
              >
              >
              >
              > I have been stuck with this problem for hours. I would very appreciate
              > if you can help me out.
              >
              > Thanks
              >
              > Kim
              >
              > PS : I've tried using firebug to debug but YUI is too big so firebug
              > gets extremely slow to debug. Not sure how you guys debug YUI?
              >
            • inevagivup
              Hi Cuong, I just figured out why the paginator doesn t update pageLinks. The problem is when you request dynamic data, paginator has no idea about total
              Message 6 of 7 , Oct 31, 2008
              • 0 Attachment
                Hi Cuong,

                I just figured out why the paginator doesn't update pageLinks. The
                problem is when you request dynamic data, paginator has no idea about
                total records of the returned data except the first time of the
                request. That's the reason why it doesn't update the pageLinks. I keep
                thinking about that & wonder: how can i force the paginator knows when
                the total records has changed? and i found a solution at last. By
                proccess handleDataReturnPayload callback, i use setState function to
                inform paginator about total records of datasource just like this:
                /*
                var newState = {totalRecords : datatable.getRecordSet().getLength()};
                myPaginator.setState(newState);
                */
                and BOOOMMM ! the paginator works like crazy..

                i hope this helps you a little bit. ;)
              • DeviKiran
                Hi, I faced the same blurred problem with pagenation links. I am able to solve the issue by using onDataReturnReplaceRows instead of
                Message 7 of 7 , Jan 11, 2009
                • 0 Attachment
                  Hi,
                  I faced the same blurred problem with pagenation links.
                  I am able to solve the issue by using onDataReturnReplaceRows instead
                  of onDataReturnInitializeTable.

                  http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html#method_onDataReturnReplaceRows

                  Take a Look at the above link.

                  Thanks,
                  Kiran

                  --- In ydn-javascript@yahoogroups.com, "Lucas Smith" <lsmith@...> wrote:
                  >
                  > --- In ydn-javascript@yahoogroups.com, "Pham Kim Cuong" <kimcuong@>
                  > wrote:
                  > >
                  > > Hi,
                  > >
                  > > I'm trying to get datatable's client pagination to work. Everythin is
                  > > working fine except for nagivation links (next, prev ...links).
                  > > They're all blurred, with no link.
                  > >
                  > >
                  > > Do you know what can be wrong?
                  > >
                  > > Here is my code
                  > >
                  > > YAHOO.example.ClientPagination = new function() {
                  > >
                  > > var myColumnHeaders = [
                  > > {key: "No", label: "No", formatter: null, sortable:true, width
                  > > : "10px"},
                  > > {key: "DocId", label: "DocID", formatter: null, sortable:
                  > > true, width : "10px"},
                  > > {key: "Score", label: "Score", formatter: null, sortable:
                  > > true, width : "10px"},
                  > > {key: "Title", label: "Title", formatter: formatTitle, width :
                  > > "auto"},
                  > > {key: "NOEXISTENCE", label: "OK?", formatter:
                  > > formatFeedbackBox, sortable: false, width : "auto"},
                  > > ];
                  > >
                  > > var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
                  > > this.myDataSource = new YAHOO.util.DataSource(SERVLET_URL);
                  > > this.myDataSource.responseType =
                  > YAHOO.util.DataSource.TYPE_JSON;
                  > > this.myDataSource.responseSchema = {
                  > > resultsList: "records",
                  > > fields: ["No", "DocId", "Score", "Title", "Url",
                  > "Features" ]
                  > > };
                  > >
                  > >
                  > > var oConfigs = {
                  > > paginator: new YAHOO.widget.Paginator({
                  > > rowsPerPage: 10 }),
                  > > };
                  > >
                  > > this.myDataTable = new
                  > > YAHOO.widget.DataTable("MyPageTableDiv", myColumnSet,
                  > > this.myDataSource, oConfigs);
                  > > /* Subscribe to events for row selection */
                  > > this.myDataTable.subscribe("rowMouseoverEvent",
                  > > this.myDataTable.onEventHighlightRow);
                  > > this.myDataTable.subscribe("rowMouseoutEvent",
                  > > this.myDataTable.onEventUnhighlightRow);
                  > > this.myDataTable.subscribe("rowClickEvent", onRowClickEvent);
                  > >
                  > > this.sendQuery = function(domainId, indexId, query){
                  > > var getQuery = "nRecords=100&domainId=" + domainId +
                  > > "&indexId=" + indexId + "&oquery=" + query;
                  > > //alert("Sending query " + getQuery );
                  > > // YAHOO.example.container.wait.show();
                  > > var callback = {
                  > > success : this.myDataTable.onDataReturnInitializeTable,
                  > > failure : function () { alert("something wrong"); },
                  > > scope : this.myDataTable
                  > > };
                  > > this.myDataSource.sendRequest(getQuery , callback);
                  > > };
                  > >
                  > > };
                  > >
                  > >
                  > >
                  > > I have been stuck with this problem for hours. I would very appreciate
                  > > if you can help me out.
                  > >
                  > > Thanks
                  > >
                  > > Kim
                  > >
                  > > PS : I've tried using firebug to debug but YUI is too big so firebug
                  > > gets extremely slow to debug. Not sure how you guys debug YUI?
                  > >
                  >
                  > have a look at this example:
                  > http://developer.yahoo.com/yui/examples/datatable/dt_dynamicdata.html
                  >
                  > It looks like the step you're missing is defining
                  > myDataTable.handleDataReturnpayload.
                  >
                  > Hope this helps,
                  > Luke
                  >
                Your message has been successfully submitted and would be delivered to recipients shortly.