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

如果您想要一個更適合的答案，則可以編輯問題以包括數據庫架構的詳細信息和示例查詢。