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

DataTable Paginator containers problem

Expand Messages
  • agladdish
    Hi List, Am having problems getting my DataTable Paginator to render the template links in the div element set in containers . Am using YUI 2.5.0. Re code
    Message 1 of 4 , Feb 29, 2008
    • 0 Attachment
      Hi List,

      Am having problems getting my DataTable Paginator to render the
      template links in the div element set in 'containers'.
      Am using YUI 2.5.0.

      Re code below, can anyone spot what I'm doing wrog?

      Thanks,
      Anthony


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

      <!--CSS file (default YUI Sam Skin) -->
      <link type="text/css" rel="stylesheet"
      href="http://yui.yahooapis.com/2.5.0/build/datatable/assets/skins/sam/datatable.css">

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

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

      <!-- OPTIONAL: JSON Utility -->
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.0/build/json/json-min.js"></script>

      <!-- OPTIONAL: Connection (enables XHR) -->
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.0/build/connection/connection-min.js"></script>

      <!-- OPTIONAL: Drag Drop (enables resizeable or reorderable columns) -->
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.0/build/dragdrop/dragdrop-min.js"></script>

      <!-- OPTIONAL: Calendar (enables calendar editors) -->
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.0/build/calendar/calendar-min.js"></script>

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


      <div id="myMarkedUpContainer">
      <table id="myTable">
      <thead>
      <tr>
      <th>AAA</th>
      <th>BBB</th>
      <th>CCC</th>
      <th>DDD</th>
      </tr>
      </thead>
      <tfoot id="mytfoot">
      <tr>
      <td colspan="7">
      <div id="actionButtonsMarkupContainer"></div>
      </td>
      </tr>
      </tfoot>
      <tbody>
      <tr>
      <td>1</td>
      <td>bbb</td>
      <td>01/01/2008</td>
      <td>ddd</td>
      </tr>
      <tr>
      <td>2</td>
      <td>bbb</td>
      <td>02/02/2008</td>
      <td>ddd</td>
      </tr>
      </tbody>



      </table>

      </div>



      <script type="text/javascript">
      var myDataSource = new
      YAHOO.util.DataSource(YAHOO.util.Dom.get("myTable"));
      myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
      myDataSource.responseSchema = {
      fields: [
      {key:"AAA", parser:YAHOO.util.DataSource.parseNumber },
      {key:"BBB", arser:YAHOO.util.DataSource.parseNumber },
      {key:"CCC", parser:YAHOO.util.DataSource.parseDate },
      {key:"DDD", parser:YAHOO.util.DataSource.parseString },
      ]
      };



      var myColumnDefs = [
      {key:"AAA", label:"Amt Due", abbr:"Amount Due",
      formatter:"currency", sortable:true },
      {key:"BBB", label:"Rec'd", abbr: "Received", formatter:"number",
      sortable:true },
      {key:"CCC", label:"YTD", abbr:"Year to Date", formatter:"date",
      sortable:true,
      sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC} },
      {key:"DDD", label:"Contact", formatter: "email", sortable:true },
      ];

      e = document.getElementById("actionButtonsMarkupContainer");

      var myConfigs = {
      paginator : new YAHOO.widget.Paginator({
      rowsPerPage : 1, // REQUIRED
      totalRecords : 2, // OPTIONAL

      // use an existing container element.
      //containers - {string|HTMLElement|Array(string|HTMLElement)}
      //REQUIRED. Node references or ids of nodes in which to render the
      pagination controls.
      //containers : 'actionButtonsMarkupContainer',
      containers : "actionButtonsMarkupContainer",

      // use a custom layout for pagination controls
      template : "<ul id=\"actionbuttons\"
      class=\"actionbuttons\"><li>{FirstPageLink}</li>
      <li>{PreviousPageLink}</li> <li>{NextPageLink}</li>
      <li>{LastPageLink}</li> <br /> Show {RowsPerPageDropdown} per page </ul>",

      // show all links
      pageLinks : YAHOO.widget.Paginator.VALUE_UNLIMITED,

      firstPageLinkLabel : 'First',
      nextPageLinkLabel : 'Next',
      previousPageLinkLabel : 'Prev',
      lastPageLinkLabel : 'Last',
      pageReportTemplate : '[% eventsRS %] events ({startRecord} –
      {endRecord} of {totalRecords} events)',

      // use these in the rows-per-page dropdown
      rowsPerPageOptions : [10,50,100],
      })
      };

      // dragdrop 'draggableColumns:true' columns doesn't work with
      paginator.
      var myDataTable = new YAHOO.widget.DataTable("myMarkedUpContainer",
      myColumnDefs, myDataSource, myConfigs,
      {caption:"My Caption", summary:"My Summary", }
      );
      </script>
    • y_lsmith
      Anthony, The DataTable constructor will blow away the content of its container node during construction, so by the time the Paginator needs to render, the div
      Message 2 of 4 , Feb 29, 2008
      • 0 Attachment
        Anthony,

        The DataTable constructor will blow away the content of its container
        node during construction, so by the time the Paginator needs to
        render, the div actionButtonsMarkupContainer is no longer in the DOM.

        You'll need to supply a container outside that which the DataTable
        will use as its content container.

        Hope this helps,
        Luke


        --- In ydn-javascript@yahoogroups.com, "agladdish" <agladdish@...> wrote:
        >
        > Hi List,
        >
        > Am having problems getting my DataTable Paginator to render the
        > template links in the div element set in 'containers'.
        > Am using YUI 2.5.0.
        >
        > Re code below, can anyone spot what I'm doing wrog?
        >
        > Thanks,
        > Anthony
        [snip]
      • agladdish
        ... Hi Luke, that makes sense. However, I m trying to place my Paginator s template buttons in the table s section. Can you suggest a way to accomplish
        Message 3 of 4 , Feb 29, 2008
        • 0 Attachment
          > The DataTable constructor will blow away the content of its container
          > node during construction, so by the time the Paginator needs to
          > render, the div actionButtonsMarkupContainer is no longer in the DOM.
          >
          > You'll need to supply a container outside that which the DataTable
          > will use as its content container.

          Hi Luke, that makes sense.
          However, I'm trying to place my Paginator's template buttons in the
          table's <tfoot> section.
          Can you suggest a way to accomplish this, or must it go in a element
          container outside the table itself?

          Thanks for your help!

          Anthony
        • y_lsmith
          ... You ll need to create the Paginator in an element outside the DataTable s container. However, the Paginator supports containers that are not attached to
          Message 4 of 4 , Mar 4, 2008
          • 0 Attachment
            > Hi Luke, that makes sense.
            > However, I'm trying to place my Paginator's template buttons in the
            > table's <tfoot> section.
            > Can you suggest a way to accomplish this, or must it go in a element
            > container outside the table itself?
            >
            > Thanks for your help!
            >
            > Anthony
            >


            You'll need to create the Paginator in an element outside the DataTable's container.  However, the Paginator supports containers that are not attached to the DOM.  So you can use document.createElement('div') to create a div in code, assign that as the Paginator's container, then after the DataTable has rendered, add a tfoot, tr, and td to the DataTable's body table, and insert the div into the td.

            I threw together this example  for you.


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