Ajax調用HTML表

Question

我已經有一個函數，我從數據庫中獲取數據並將其填充到組合框更改事件的HTML表中，基本上我正在使用ajax進行此操作。

但每次我在組合框更改時都調用數據庫時效率不高。所以，現在我決定在頁面加載時將數據填充到html表格中，然後從HTML表格中過濾出來，而不是每次進入數據庫並對其進行過濾。

那麼有沒有什麼辦法從組合框更改事件的HTML表中過濾數據？或者有可能在html表上調用ajax？

謝謝。

Answer 1

您可以將每個<tr>上的類與組合框項目上的值匹配。選擇某個選項時，顯示具有與所選選項的值相匹配的類的所有行。

<select id="options" multiple="multiple"> 
    <option value="red">Red</option> 
    <option value="green">Green</option> 
    <option value="blue">Blue</option> 
    <option value="yellow">Yellow</option> 
    <option value="black">Black</option> 
</select> 

<table> 
    <tr class="red green"> 
     <td>red or green</td> 
    </tr> 
    <tr class="blue"> 
     <td>blue</td> 
    </tr> 
    <tr class="yellow black"> 
     <td>yellow or black</td> 
    </tr> 
    <tr class="blue yellow"> 
     <td>blue or yellow</td> 
    </tr> 
</table> 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $("select#options").change(function() { 
     var selections = []; 

     $(this).children(':selected').each(function (index, option) { 
      selections.push(option.value); 
     }); 

     console.log(selections); 
     $("table tr").each(function (index, row) { 
      $(row).hide(); 
      for(var i = 0; i < selections.length; i++) { 
       if($(row).hasClass(selections[i])) { 
        $(row).show(); 
        break; 
       } 
      } 
     }); 
    }); 
</script> 

這很有趣。 jsfiddle

Answer 2

最合適的解決方案取決於有多少數據以及是否需要不同的表連接。

您可以將數據存儲在JavaScript數組中，然後從該數組中檢索所需的數據並構建HTML表。

您可以使用庫來促進數據上的SQL查詢。看看jslinq。例如：

var myList = [ 
     {FirstName:"Chris",LastName:"Pearson"}, 
     {FirstName:"Kate",LastName:"Johnson"}, 
     {FirstName:"Josh",LastName:"Sutherland"}, 
     {FirstName:"John",LastName:"Ronald"}, 
     {FirstName:"Steve",LastName:"Pinkerton"} 
     ]; 

var exampleArray = JSLINQ(myList) 
     .Where(function(item){ return item.FirstName == "Chris"; }) 
     .OrderBy(function(item) { return item.FirstName; }) 
     .Select(function(item){ return item.FirstName; }); 

如果你不想只是爲所有的數據和頁面，那麼你可以使用AJAX來檢索數據，因爲它的需要，並將其存儲，這樣，如果（即有大量的數據。）它再次需要，你已經在瀏覽器中得到它。換句話說，每次從實際數據庫獲取新數據時，都會將該數據添加到當前存儲的任何數據，直到最終可能在瀏覽器中擁有完整的數據庫副本。

根據數據的複雜性，您需要想出一種方法來了解您是否已經獲得了瀏覽器中所需的數據，或者是否需要新的AJAX請求。

如果您想要一個更定製的答案，可能需要編輯問題以包含數據庫模式的細節和示例查詢。