[英]Ajax call to HTML Table
我已经有一个函数,可以从数据库中获取数据,并在组合框更改事件中将其填充到HTML表中,基本上我是使用ajax做到这一点的。
但是每次我在组合框更改中调用数据库时,效率都不高。 因此,现在我决定首先在页面加载时将数据填充到html表中,然后从HTML表中过滤掉,而不是每次都去数据库进行过滤。
那么,有没有办法在组合框更改事件中从html表中过滤掉数据? 还是可以在HTML表格上调用Ajax?
谢谢。
您可以在每个<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
最合适的解决方案取决于有多少数据以及是否需要不同的表联接。
您可以将数据存储在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请求。
如果您想要一个更适合的答案,则可以编辑问题以包括数据库架构的详细信息和示例查询。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.