2012-01-30 93 views
1

我開發了一個ASP頁面,顯示人表(YUI數據表),並有搜索框。如果在搜索框中搜索數據,則使用ajax回發更新數據表。YUI數據表與AJAX

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

     <!-- Dependencies --> 
     <script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
     <script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script> 
     <script src="http://yui.yahooapis.com/2.9.0/build/datasource/datasource-min.js"></script>   
     <script src="http://yui.yahooapis.com/2.2.2/build/connection/connection-min.js" type="text/javascript"></script> 
     <!-- Source files --> 
     <script src="http://yui.yahooapis.com/2.9.0/build/datatable/datatable-min.js"></script> 
     <style type="text/css"> 
      /* basic skin styles */ 
      .yui-skin-sam .yui-dt table { 
       margin:0; 
       padding:0; 
       font-family:arial;font-size:inherit; 
       border-collapse:separate;*border-collapse:collapse;border-spacing:0; /* since ie6 and ie7 behave differently */ 
       border:0; 
      } 

      .yui-skin-sam .yui-dt th, 
      .yui-skin-sam .yui-dt th a { 
       font-weight:normal; 
       text-decoration:none; 
       color:#000; /* header text */ 
       vertical-align:bottom; 
       background-color:#EEEEFF; 
      } 

      .yui-skin-sam .yui-dt th { 
       margin:0; 
       padding:0; 
       border:0; 
       border-top: 1px Solid #CCCCCC; 
       border-bottom: 1px Solid #CCCCCC; 
       font-weight: bold; 
      } 

      .yui-skin-sam .yui-dt tr.yui-dt-first td { 
       border:0; /* tbody top border */ 
       border-bottom: 1px Solid #CCCCCC; 
      } 

      .yui-skin-sam .yui-dt th .yui-dt-liner { 
       white-space:nowrap; 
       background-color:#EEEEFF; 
      } 

      .yui-skin-sam .yui-dt-coltarget { 
       width: 5px; 
      } 

      .yui-skin-sam .yui-dt td { 
       margin:0; 
       padding:0; 
       border:none; 
       border-bottom: 1px Solid #CCCCCC; 
       text-align:left; 
      } 

      /* sortable columns */ 
      .yui-skin-sam thead .yui-dt-sortable { 
       cursor:pointer; 
      } 

      .yui-skin-sam th.yui-dt-asc, 
      .yui-skin-sam th.yui-dt-desc { 
       background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -100px; /* sorted header gradient */ 
       background-color:#EEEEFF; 
      } 

      /* striping */ 
      .yui-skin-sam tr.yui-dt-even { background-color:#FFF; } /* white */ 
      .yui-skin-sam tr.yui-dt-odd { background-color:#F9F9F9; } /* light blue */ 
      .yui-skin-sam tr.yui-dt-even td.yui-dt-asc, 
      .yui-skin-sam tr.yui-dt-even td.yui-dt-desc { background-color:#FFF; } /* light blue sorted */ 
      .yui-skin-sam tr.yui-dt-odd td.yui-dt-asc, 
      .yui-skin-sam tr.yui-dt-odd td.yui-dt-desc { background-color:#F9F9F9; } /* dark blue sorted */ 

      /* disable striping in list mode */ 
      .yui-skin-sam .yui-dt-list tr.yui-dt-even { background-color:#FFF; } /* white */ 
      .yui-skin-sam .yui-dt-list tr.yui-dt-odd { background-color:#FFF; } /* white */ 
      .yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-asc, 
      .yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-desc { background-color:#F9F9F9; } /* light blue sorted */ 
      .yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-asc, 
      .yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-desc { background-color:#F9F9F9; } /* light blue sorted */ 

     </style> 
    </head> 
    <body class="yui-skin-sam"> 
     <input type="text" id="Search" /><input type="button" value="Search" onclick="myDataTable.AjaxSearch();" /> 
     <div id="PersonContainer"> 
     <table id="PersonTable"> 
      <tr> 
       <td>Mg Mg</td> 
       <td>22</td> 
       <td>Factory Worker</td> 
      </tr> 
      <tr> 
       <td>Ko Ko</td> 
       <td>21</td> 
       <td>General Worker</td> 
      </tr> 
      <tr> 
       <td>Aung Aung</td> 
       <td>25</td> 
       <td>Office Staff</td> 
      </tr> 
      <tr> 
       <td>Aung Ko</td> 
       <td>22</td> 
       <td>Office Staff</td> 
      </tr> 
      <tr> 
       <td>Mg Aye</td> 
       <td>25</td> 
       <td>Office Staff</td> 
      </tr> 
      <tr> 
       <td>Min Aung</td> 
       <td>25</td> 
       <td>Office Staff</td> 
      </tr> 
     </table> 
     </div> 
     <script type="text/javascript"> 

      var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("PersonTable")); 
      myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE; 

      myDataSource.responseSchema = { 
       fields: [ 
        { key: "Name"}, 
        { key: "Age" }, 
        { key: "Occupation" } 
       ] 
      }; 

      var myColumnDefs = [ 
       { key: "Name", sortable:true}, 
       { key: "Age", sortable:true}, 
       { key: "Occupation", sortable:true} 
      ]; 

      var myDataTable = new YAHOO.widget.DataTable("PersonContainer", myColumnDefs, myDataSource); 

      myDataTable.AjaxSearch = function(){ 
       var sUrl = "AjaxTest1.asp"; 
       var callback = { 
        success: function(o) { 
          if (window.DOMParser) 
           { 
            parser = new DOMParser(); 
            xmlDoc = parser.parseFromString(o.responseText,"text/xml"); 
           } 
           else // Internet Explorer 
           { 
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
            xmlDoc.async="false"; 
            xmlDoc.loadXML(o.responseText); 
           } 

           var myDataSource = new YAHOO.util.DataSource(xmlDoc); 
           myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML; 
           alert(o.responseText); 

           myDataSource.responseSchema = { 
            resultNode: "person", 
            fields: [ 
             { key: "Name"}, 
             { key: "Age" }, 
             { key: "Occupation" } 
            ] 
           }; 

           var myColumnDefs = [ 
            { key: "Name", sortable:true}, 
            { key: "Age", sortable:true}, 
            { key: "Occupation", sortable:true} 
           ]; 

           var myDataTable = new YAHOO.widget.DataTable("PersonContainer", myColumnDefs, myDataSource); 
         }, 
        failure: function(o) { 
         alert("AJAX doesn't work"); //FAILURE 
         } 
        } 

       var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback); 
      };   

     </script> 
    </body> 
</html> 

即返回XML數據:

<?xml version=""1.0""?> 
<person><Name>Aung Aung</Name><Age>25</Age><Occupation>Developer</Occupation></person> 
<person><Name>Mg Mg</Name><Age>20</Age><Occupation>Programmer</Occupation></person> 

返回數據是兩行。但數據表顯示了一行。我怎樣才能做到這一點顯示返回行?

回答

0

我不確定這是否相關,但我已經看到了一些情況下,如果沒有提供ID,YUI只是一個。在這些情況下,我們看到由於它關閉了此Id而丟失了行。我想要的第一個想法是爲Id添加一個字段或列def,然後在返回的XML數據中包含一個唯一的Id。