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

Datatable: very large recordset and XML (not JSON). Problem with pagination

Expand Messages
  • ing.lupin
    Hi everyone, I m in trouble with the datatable and pagination. I try to explain myself: I have a large DB (such as 50.000 records) and I want to display all of
    Message 1 of 2 , Sep 3, 2007
    • 0 Attachment
      Hi everyone,
      I'm in trouble with the datatable and pagination.
      I try to explain myself:

      I have a large DB (such as 50.000 records) and I want to display all
      of them in the datatable.
      I also want to show them by 50 on each time; I know I can do it by
      server-side pagination, but I cant' figure out how I can do!
      I've read and studied the example on Server-Side Pagination, but it do
      all the things with JSON, and I don't want to use that technology, I
      want to use only XML.
      I read anything in the forums, did all the tries, and so on.

      My big problem is in the "doBeforeCallback" function, especially in
      the "Get Paginator values" section. I can't retrieve the paginator
      values, so the links to the previous and next 50 items doesn't
      refresh, and they point to the same query, even if I click on next 50
      (or prev 50).

      Can anyone help me?

      I post my source code, but if you have a working example, it's better.
      Thank you very much.






      <script type="text/javascript">
      // Global init var to run Loader only once
      var gRunInit = true;
      var gRunDataTable = true;
      YAHOO_config = {
      load: {
      require: ['yahoo'],
      base: '../yui/build/',
      onLoadComplete: function(loader) {
      if(gRunInit) {
      gRunInit = false;

      YAHOO.example.checkJson = function(name, loaderCallback) {
      if (Object.prototype.toJSONString) {
      loaderCallback();
      } else {
      setTimeout(function() {
      YAHOO.example.checkJson(name,
      loaderCallback);
      }, 3);
      }
      };


      loader.addModule({
      name: "json",
      type: "js",
      fullpath: "js/json.js",
      verifier: YAHOO.example.checkJson
      });

      loader.require("fonts", "json", "connection",
      "datatable");

      loader.onLoadComplete = function(loader) {
      if(gRunDataTable) {
      gRunDataTable = false;

      YAHOO.example.ServerPagination = new function() {
      // Column definitions
      var myColumnDefs = [
      {key:"IDIntervento", label:"ID", sortable:true,
      resizeable:true},
      {key:"gruppo", sortable:true,
      resizeable:true},
      {key:"Intervento", sortable:true,
      resizeable:true},
      {key:"Data", sortable:true,
      resizeable:true},
      {key:"Tipo_luogo", sortable:true,
      resizeable:true},
      {key:"Localita", sortable:true,
      resizeable:true},
      {key:"Localita_combo", sortable:true,
      resizeable:true},
      {key:"Indirizzo", sortable:true,
      resizeable:true},
      {key:"IDOspedale", sortable:true,
      resizeable:true},
      {key:"Codice_andata", sortable:true,
      resizeable:true},
      {key:"Codice_ritorno", sortable:true,
      resizeable:true},
      {key:"Orario_inizio", sortable:true,
      resizeable:true},
      {key:"Orario_partenza", sortable:true,
      resizeable:true},
      {key:"Orario_arrivo", sortable:true,
      resizeable:true},
      {key:"Orario_arrivo_ospedale", sortable:true,
      resizeable:true},
      {key:"Orario_finale1", sortable:true,
      resizeable:true},
      {key:"Orario_finale2", sortable:true,
      resizeable:true}
      ];

      // DataSource instance
      this.myDataSource = new
      YAHOO.util.DataSource("server_action.php?");
      this.myDataSource.responseType =
      YAHOO.util.DataSource.TYPE_XML;
      this.myDataSource.responseSchema = {
      resultNode: "Result",
      fields: [{key:"IDIntervento",
      parser:YAHOO.util.DataSource.parseNumber}, "gruppo", "Intervento",
      "Data",
      "Tipo_luogo", "Localita",
      "Localita_combo", "Indirizzo", "IDOspedale", "Codice_andata",
      "Codice_ritorno",
      "Orario_inizio", "Orario_partenza", "Orario_arrivo",
      "Orario_arrivo_ospedale",
      "Orario_finale1", "Orario_finale2"]
      };

      // DataTable instance
      var oConfigs = {
      initialRequest:
      "startIndex=0&results=25" // Initial values
      };
      this.myDataTable = new
      YAHOO.widget.DataTable("serverpagination", 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.example.ServerPagination;
      var oDataTable = oSelf.myDataTable;

      // Get Paginator values



      //*********************************************************************************

      //*********************************************************************************

      //*********************************************************************************
      //
      // HERE
      IS THE PROBLEM //
      //

      //*********************************************************************************

      //*********************************************************************************

      //*********************************************************************************

      /*
      //This doesn't work!
      var oRawResponse =
      oRawResponse.parseJSON(); //JSON.parse(oRawResponse); // Parse the
      JSON data

      //And also these, obviously
      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
      */

      //I tried everything in my mind, but
      nothing works
      //var recordsReturned =
      this.myDataTable.getLength; // How many records this page
      /*
      alert("datasource: " + oSelf.myDataSource.getLength);
      alert("DataTable:" + oDataTable.getRecordSet.getLength);
      alert("total records: " + oDataTable.get("paginator").totalRecords);
      alert(" --- start:" + oDataTable.get("paginator").startRecordIndex);
      alert(" totalResults:" + oDataTable.get("paginator").totalResults);
      */

      // 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;
      };


      // 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) {
      alert("è la prima pag")
      return;
      }
      alert("non è la 1")
      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);
      };
      }
      }
      loader.insert();
      }
      }
      }
      };
      </script>
    • bellavite
      ... CUT ... Hi, I got this error too. I solved it including this javascript: yui examples datatable assets js json.js Giampaolo
      Message 2 of 2 , Oct 8, 2007
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "ing.lupin" <lupin85.luca@...>
        wrote:
        >
        > Hi everyone,
        > I'm in trouble with the datatable and pagination.
        CUT
        > /*
        > //This doesn't work!
        > var oRawResponse =
        > oRawResponse.parseJSON(); //JSON.parse(oRawResponse); // Parse the
        > JSON data

        Hi, I got this error too. I solved it including this javascript:

        yui\examples\datatable\assets\js\json.js

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