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

How to add a search box to a data table

Expand Messages
  • nymblewyke
    I have this code that works great. It fills in a datatable with pagination. I use a server side perl script to read a flat file. That all works. I need to add
    Message 1 of 1 , Sep 30, 2008
    • 0 Attachment
      I have this code that works great. It fills in a datatable with
      pagination. I use a server side perl script to read a flat file. That
      all works.

      I need to add the ability to filter the results. I have the two search
      fields, a column and then a string in that column.

      What I am missing is how do the results when I hit submit, get back to
      the javascript so that I can use something like the requery method
      that I found in the forum.

      I'm a little confused by the action="#" in the form description. I
      would expect that to be a url.

      As a side problem, if I change button-min.js to button-debug.js I get
      an error. So I think I am missing an include that I need.

      Here is the code that works (except for search)

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <title>FISMA REPORT</title>

      <style type="text/css">
      /*margin and padding on body element
      can introduce errors in determining
      element position and are not recommended;
      we turn them off as a foundation for YUI
      CSS treatments. */
      body {
      margin:0;
      padding:0;
      }
      </style>

      <style type="text/css">
      #paginated {
      text-align: center;
      }
      #paginated table {
      margin-left:auto; margin-right:auto;
      }
      #paginated .yui-pg-container a {
      color: #00d;
      }
      #paginated .yui-pg-pages a {
      text-decoration: underline;
      }
      #paginated, #paginated .yui-dt-loading {
      text-align: center; background-color: transparent;
      }

      .formdiv {
      position:relative;
      width:420px;
      }

      #buttons {
      width:420px;
      padding-top:10px;
      }
      </style>

      <link rel="stylesheet" type="text/css"
      href="../../yui/build/fonts/fonts-min.css" />
      <link rel="stylesheet" type="text/css"
      href="../../yui/build/datatable/assets/skins/sam/datatable.css" />
      <link rel="stylesheet" type="text/css"
      href="../../yui/build/button/assets/skins/sam/button.css">
      <script type="text/javascript"
      src="../../yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
      <script type="text/javascript"
      src="../../yui/build/connection/connection-debug.js"></script>
      <script type="text/javascript"
      src="../../yui/build/json/json-debug.js"></script>
      <script type="text/javascript"
      src="../../yui/build/element/element-beta-debug.js"></script>
      <script type="text/javascript"
      src="../../yui/build/datasource/datasource-beta-debug.js"></script>
      <script type="text/javascript"
      src="../../yui/build/datatable/datatable-beta-debug.js"></script>
      <script type="text/javascript"
      src="../../yui/build/yuiloader/yuiloader-beta.js"></script>
      <script type="text/javascript"
      src="../../yui/build/button/button-min.js"></script>

      </head>

      <body class=" yui-skin-sam" >

      <h1>FISMA REPORT</h1>

      <form method="post" action="#" id="testform" name="testform">
      <div class="formdiv"><label>Column: </label>
      <select id="columnselect" name="columnselect">
      <option value=""></option>
      <option value="Status">Status</option>
      <option value="Submitter">Submitter</option>
      <option value="Date">Date</option>
      </select></div>
      <div class="formdiv"><label>Search: </label><input
      class="field" type="text" name="searchstring"></div>
      <div id="buttons"><button id="myReset" name="myReset"
      type="reset">Reset</button> <button id="mySubmit" name="mySubmit"
      type="submit">Submit</button></div>
      </form>

      <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

      <div id="json"></div>

      <script type="text/javascript">

      YAHOO.example.PERL_JSON = new function() {

      //define a reset Button object
      var yuiReset = new YAHOO.widget.Button("myReset", {
      disabled:true
      });

      //define a submit Button object
      var yuiSubmit = new YAHOO.widget.Button("mySubmit", {
      disabled:true
      });

      //define the unDisableReset function
      var unDisableReset = function() {

      //set disabled state to false
      yuiReset.set("disabled", false);
      }

      //execute unDisableReset when keypress event detected
      var fields = YAHOO.util.Dom.getElementsByClassName("field");
      YAHOO.util.Event.addListener(fields, "keypress", unDisableReset);

      //define the unDisableSubmit function
      var unDisableSubmit = function() {

      var count = 0;

      //check each field completed
      for (x = 0; x < fields.length; x++) {
      if (fields[x].value != "") {
      count++;
      if (count == fields.length) {
      //if each field completed set disabled state to false
      yuiSubmit.set("disabled", false);
      }
      }
      }
      }

      //execute unDisableSubmit when keypress event detected
      YAHOO.util.Event.addListener(fields, "keypress", unDisableSubmit);

      var SubmitSearch = function() {
      alert ("SubmitSearch");
      }

      var SubmitButton = new YAHOO.widget.Button("mySubmit");
      SubmitButton.on("click", SubmitSearch);

      var myColumnDefs = [
      {key:"Status", label:"Status", sortable:true},
      {key:"Submitter", label:"Submitter", sortable:true},
      {key:"Low_Side_Compartment", label:"Low Side Compartment",
      sortable:true}
      ];

      var myDataSource = new
      YAHOO.util.DataSource("../../cgi-bin/FISMA/FISMA_JSON_read.pl?");
      myDataSource.connMethodPost = true;
      myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
      myDataSource.responseSchema = {
      fields: ["Status","Submitter,"Low_Side_Compartment"]
      };

      var oConfigs = {
      paginator: new YAHOO.widget.Paginator({
      rowsPerPage: 15
      }),
      initialRequest: "results=50"
      };

      YAHOO.widget.DataTable.prototype.requery = function(newRequest) {
      this.getDataSource().sendRequest((newRequest ===
      undefined?this.get('initialRequest'):newRequest),
      this.onDataReturnInitializeTable, this);
      };

      myDataTable = new YAHOO.widget.DataTable("json", myColumnDefs,
      myDataSource,
      oConfigs);

      };

      var loader = new YAHOO.util.YUILoader();
      loader.insert({
      require: ['fonts','dragdrop','logger'],
      base: '../../yui/build/',

      onSuccess: function(loader) {

      YAHOO.util.Event.addListener(YAHOO.util.Dom.get("loglink"), "click",
      function(e) {
      YAHOO.util.Event.stopEvent(e);
      YAHOO.log("This is a simple log message.");
      });

      // Put a LogReader on your page
      this.myLogReader = new YAHOO.widget.LogReader();
      }
      });

      </script>

      <!--END SOURCE CODE FOR EXAMPLE =============================== -->

      </body>
      </html>


      ANy help would be greatly appreciated.
    Your message has been successfully submitted and would be delivered to recipients shortly.