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请求。

如果您想要一个更定制的答案，可能需要编辑问题以包含数据库模式的细节和示例查询。