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

Re: Datatable, dynamic data, weird behaviour

Expand Messages
  • Christian Tiberg
    Hello again! I ve now found the error, and slapped myself :) Change the line oPayload.sortedBy = {key: oResponse.meta.sort, direction: dir}; to
    Message 1 of 2 , Oct 31, 2008
    • 0 Attachment
      Hello again!

      I've now found the error, and slapped myself :)

      Change the line

        oPayload.sortedBy = {key: oResponse.meta.sort, direction: dir};

      to

        oPayload.sortedBy = {key: oResponse.meta.sort, dir: dir};

      I'm all for typing as little as possible, but that abbreviation caught me where it hurt :(

      Best regards,
       Christian Tiberg


      2008/10/31 Christian Tiberg <ctiberg@...>
      Hello!

      I realized that datatable had a major overhaul, but I didn't realize that my sorting & pagination wasn't working. What's happening after my tries to adapt to 2.6, everything works as expected except one thing.

      My table is initially sorted, and that displays fine. When I click another column to sort, that works too, and the data is returned sorted in another way. The new columns gets the arrow and the coloration to show that it's now the current sort, but the old one still has the same thing too, so each time I click another column, another one gets colored. I could color all columns like this, and that isn't right :(

      Here's some of my code:

      DT = function() {
      var w = [60, 70, 100, "50%", "25%", "25%", 100, 100];
      resizeCols(w, winWidth - 195);
      this.sorteraPa = "Nummer";
      this.sorteraRiktn = "desc";

      var myColumnDefs = [
      {key:"FakturaStatus", label: "Fakt", width: w[0]},
      {key:"Nummer", label: "Projektnr", width: w[1]},
      {key:"Trailer", width: w[2]},
      {key:"Kund", width: w[3]},
      {key:"Fran", label:"Från", width: w[4]},
      {key:"Till", label:"Till", width: w[5]},
      {key:"Lastning", width: w[6]},
      {key:"Lossning", width: w[7]}
      ];
      setupColumns(myColumnDefs);

      this.myDataSource = new YAHOO.util.DataSource("projekt.php?");
      this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
      this.myDataSource.connXhrMode = "queueRequests";
      this.myDataSource.responseSchema = {
      resultsList: "records",
      fields: ["FakturaStatus", "Nummer","Trailer", "Lastning", "Lossning", "Kund", "Fran", "Till"],
      metaFields:{totalRecords: "totalRecords", sort: "sort", dir: "dir"} // Access server-provided dynamic value
      };

      var buildQueryString = function (state,dt) {
      url = "startIndex=" + state.pagination.recordOffset +
        "&results=" + state.pagination.rowsPerPage;
      for (var i=0; i<projektTbl.senasteSokning.length; i++)
      url = url + "&" + projektTbl.senasteSokning[i];
      var dir = state.sortedBy.dir == YAHOO.widget.DataTable.CLASS_DESC ? "desc" : "asc";
      url = url + "&sort=" + state.sortedBy.key + "&dir=" + dir;
      return url;
      };

      this.myPaginator = new YAHOO.widget.Paginator({
      containers         : ['projekt_sidbryt'],
      pageLinks          : 5,
      rowsPerPage        : 400,
      rowsPerPageOptions : [200,400,600],
      alwaysVisible      : false,
      template           : "<strong><span style='color: #a0a0a0'>{CurrentPageReport}</span></strong> {PreviousPageLink} {PageLinks} {NextPageLink} {RowsPerPageDropdown}"
      });

      this.senasteSokning = ["egare=" + inloggadID];
      var myTableConfig = {
      initialRequest         : "egare=" + inloggadID + "&results=" + this.myPaginator.get("rowsPerPage") + "&startIndex=0&sort=Nummer&dir=desc",
      generateRequest        : buildQueryString,
      paginator              : this.myPaginator,
      selection: "standard",
      width: (winWidth - 30) + "px",
      height: (winHeight - 180) + "px",
      scrollable: true,
      renderLoopSize: 50,
      sortedBy: {key: "Nummer", dir: YAHOO.widget.DataTable.CLASS_DESC},
      dynamicData : true,
      MSG_LOADING: "Laddar data...",
      MSG_ERROR: "Felaktiga data mottagna.",
      MSG_EMPTY: "Inga poster hittades."
      };

      this.myDataTable = new YAHOO.widget.DataTable("projektlista", myColumnDefs,
      this.myDataSource, myTableConfig);
      setupTable(this.myDataTable, endraProjekt);
      };
      projektTbl = new DT();

      Here's the setupTable method, used to get common behaviour across all tables:

      function setupTable(tbl, dblCallback)
      {
      tbl.subscribe("rowMouseoverEvent", tbl.onEventHighlightRow);
      tbl.subscribe("rowMouseoutEvent", tbl.onEventUnhighlightRow);
      tbl.subscribe("rowClickEvent", tbl.onEventSelectRow);
      tbl.subscribe("rowDblclickEvent", dblCallback);

      tbl.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
      if (!oPayload) oPayload = {};
      oPayload.totalRecords = oResponse.meta.totalRecords;
      var dir = oResponse.meta.dir == "asc" ? YAHOO.widget.DataTable.CLASS_ASC : YAHOO.widget.DataTable.CLASS_DESC;
      oPayload.sortedBy = {key: oResponse.meta.sort, direction: dir};
      return oPayload;
      }

      // Programmatically select the first row
      tbl.selectRow(tbl.getTrEl(0));
      }

      Best regards,
       Christian Tiberg

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