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

using Paginator with DataTable; need help.

Expand Messages
  • matthew_be
    Hello, for some reason, when my server returns data to fill in the DataTable, Paginator shows that there is only one single page. However I return
    Message 1 of 6 , Feb 24, 2009
    • 0 Attachment
      Hello,

      for some reason, when my server returns data to fill in the DataTable,
      Paginator shows that there is only one single page.
      However I return "totalRecords":2842 and display 15 elements per page.
      Second point, I display a combobox which allows to show 15,30 or 60
      records. But when I select an option, nothing happens, no request is sent.

      Below is the code of the DataSource, DataTable and Paginator.

      Can anyone help ?

      Thank you,
      Matthew.


      Ex.mySource = new DataSource('<?php echo $this->baseUrl;
      ?>/dbconfiguratie/lve/get-diff-imported-lve/');
      Ex.mySource.responseType = DataSource.TYPE_JSON;
      Ex.mySource.responseSchema = {
      resultsList : 'ResultSet.Result',
      fields : [ 'rowNb', 'statement' ],
      metaFields : { totalRecords: 'ResultSet.totalRecords' }
      };

      var myPaginator = new YAHOO.widget.Paginator({
      containers : ['paging'],
      rowsPerPage : 15,
      pageLinks : 7,
      rowsPerPageOptions : [15,30,60],
      template :
      "<strong>{CurrentPageReport}</strong> {PreviousPageLink} {PageLinks}
      {NextPageLink} {RowsPerPageDropdown}"
      });

      var myTableConfig = {
      initialRequest : 'startIndex/0/results/15',
      generateRequest : buildQueryString,
      paginator : myPaginator
      };

      var myColumnDefs = [
      {key:"rowNb"},
      {key:"statement", formatter:"rowMarker", label:"statement"},
      ];

      Ex.myTable = new DataTable("dt", myColumnDefs, Ex.mySource,
      myTableConfig);
      Ex.myTable = new DataTable("dt", myColumnDefs, Ex.mySource,
      myTableConfig);
      Ex.myTable.paginator = myPaginator;
      Ex.myTable.handleDataReturnPayload = function(oRequest, oResponse,
      oPayload) {
      oPayload.totalRecords = oResponse.meta.totalRecords;
      return oPayload;
      };


      {"ResultSet":{
      "firstResultPosition":1,
      "totalRecords":2842,
      "Result":[

      {
      "rowNb":0,
      "statement":"1",
      },
      {
      "rowNb":3,
      "statement":"4",
      },
      *etcetera*

      ],
      "recordsReturned":15}
      }
    • Lucas Smith
      ... sent. ... Which version of YUI are you using? Luke
      Message 2 of 6 , Feb 24, 2009
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "matthew_be" <matthew016@...>
        wrote:
        >
        > Hello,
        >
        > for some reason, when my server returns data to fill in the DataTable,
        > Paginator shows that there is only one single page.
        > However I return "totalRecords":2842 and display 15 elements per page.
        > Second point, I display a combobox which allows to show 15,30 or 60
        > records. But when I select an option, nothing happens, no request is
        sent.
        >
        > Below is the code of the DataSource, DataTable and Paginator.
        >
        > Can anyone help ?
        >
        > Thank you,
        > Matthew.
        >

        Which version of YUI are you using?

        Luke
      • matthew_be
        ... I try to upgrade from 2.5.2 to 2.6
        Message 3 of 6 , Feb 26, 2009
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, "Lucas Smith" <lsmith@...> wrote:
          >
          > --- In ydn-javascript@yahoogroups.com, "matthew_be" <matthew016@>
          > wrote:
          > >
          > > Hello,
          > >
          > > for some reason, when my server returns data to fill in the DataTable,
          > > Paginator shows that there is only one single page.
          > > However I return "totalRecords":2842 and display 15 elements per page.
          > > Second point, I display a combobox which allows to show 15,30 or 60
          > > records. But when I select an option, nothing happens, no request is
          > sent.
          > >
          > > Below is the code of the DataSource, DataTable and Paginator.
          > >
          > > Can anyone help ?
          > >
          > > Thank you,
          > > Matthew.
          > >
          >
          > Which version of YUI are you using?
          >
          > Luke
          >

          I try to upgrade from 2.5.2 to 2.6
        • luvdub69
          All of your code looks good IMO, try switching on Strict Warnings in FireBug and run your datatable again. Look for ANYTHING. I struggled for hours with
          Message 4 of 6 , Feb 27, 2009
          • 0 Attachment
            All of your code looks good IMO, try switching on Strict Warnings in
            FireBug and run your datatable again. Look for ANYTHING. I struggled
            for hours with setting up the paginator. The code was perfect but I
            only ever got one page back. I found out it was the content-type tha
            was being served. The paginator doesn't like being served as XHTML,
            because it uses undefined entities. If you see any errors about  
            and undefined entities, then try switching your content-type to
            text/html rather than application/xhtml+html.
          • luvdub69
            Also, try NOT specifying the container for your paginator, and allow the datable to create it s own paginator element. Perhaps it ll make a difference...
            Message 5 of 6 , Feb 27, 2009
            • 0 Attachment
              Also, try NOT specifying the container for your paginator, and allow
              the datable to create it's own paginator element. Perhaps it'll make a
              difference...
            • Lucas Smith
              ... sent. ... Well the few things I note when looking over the code are 1) myColumnDefs has an extra trailing comma. This will throw an error in IE
              Message 6 of 6 , Feb 27, 2009
              • 0 Attachment
                --- In ydn-javascript@yahoogroups.com, "matthew_be" <matthew016@...>
                wrote:
                >
                > Hello,
                >
                > for some reason, when my server returns data to fill in the DataTable,
                > Paginator shows that there is only one single page.
                > However I return "totalRecords":2842 and display 15 elements per page.
                > Second point, I display a combobox which allows to show 15,30 or 60
                > records. But when I select an option, nothing happens, no request is
                sent.
                >
                > Below is the code of the DataSource, DataTable and Paginator.
                >
                > Can anyone help ?
                >
                > Thank you,
                > Matthew.
                >
                >
                > Ex.mySource = new DataSource('<?php echo $this->baseUrl;
                > ?>/dbconfiguratie/lve/get-diff-imported-lve/');
                > Ex.mySource.responseType = DataSource.TYPE_JSON;
                > Ex.mySource.responseSchema = {
                > resultsList : 'ResultSet.Result',
                > fields : [ 'rowNb', 'statement' ],
                > metaFields : { totalRecords: 'ResultSet.totalRecords' }
                > };
                >
                > var myPaginator = new YAHOO.widget.Paginator({
                > containers : ['paging'],
                > rowsPerPage : 15,
                > pageLinks : 7,
                > rowsPerPageOptions : [15,30,60],
                > template :
                > "<strong>{CurrentPageReport}</strong> {PreviousPageLink} {PageLinks}
                > {NextPageLink} {RowsPerPageDropdown}"
                > });
                >
                > var myTableConfig = {
                > initialRequest : 'startIndex/0/results/15',
                > generateRequest : buildQueryString,
                > paginator : myPaginator
                > };
                >
                > var myColumnDefs = [
                > {key:"rowNb"},
                > {key:"statement", formatter:"rowMarker", label:"statement"},
                > ];
                >
                > Ex.myTable = new DataTable("dt", myColumnDefs, Ex.mySource,
                > myTableConfig);
                > Ex.myTable = new DataTable("dt", myColumnDefs, Ex.mySource,
                > myTableConfig);
                > Ex.myTable.paginator = myPaginator;
                > Ex.myTable.handleDataReturnPayload = function(oRequest, oResponse,
                > oPayload) {
                > oPayload.totalRecords = oResponse.meta.totalRecords;
                > return oPayload;
                > };
                >
                >
                > {"ResultSet":{
                > "firstResultPosition":1,
                > "totalRecords":2842,
                > "Result":[
                >
                > {
                > "rowNb":0,
                > "statement":"1",
                > },
                > {
                > "rowNb":3,
                > "statement":"4",
                > },
                > *etcetera*
                >
                > ],
                > "recordsReturned":15}
                > }
                >


                Well the few things I note when looking over the code are
                1) myColumnDefs has an extra trailing comma. This will throw an error
                in IE
                {key:"statement", formatter:"rowMarker", label:"statement"},<-- comma
                = boom

                2) You are creating your DataTable twice (unless this is a copy/paste
                error for this forum post)
                Ex.myTable = new DataTable("dt", myColumnDefs, Ex.mySource,
                myTableConfig);
                Ex.myTable = new DataTable("dt", myColumnDefs, Ex.mySource,
                myTableConfig);

                3) You are assigning the paginator to an instance property unnecessarily
                Ex.myTable.paginator = myPaginator;

                The first should prevent any functionality in IE, so I assume you're
                not using IE or this is just a subset copy/paste. In either event,
                shouldn't cause your problem. The second seems like a typo, and the
                third is harmless.

                I can see in the sample JSON you included that the totalRecords value
                appears to be numeric, but just to be sure, try changing
                oPayload.totalRecords = oResponse.meta.totalRecords;
                to
                oPayload.totalRecords = parseInt(oResponse.meta.totalRecords,10);

                Regarding the error coming out of the RowsPerPageDropdown change, I'd
                recommend dropping a breakpoint in FireBug in your buildQueryString
                method to make sure everything is going as planned, and if so,
                continue stepping through the code outside the method until you
                encounter the failure.

                Hope this helps,
                Luke
              Your message has been successfully submitted and would be delivered to recipients shortly.