Question

我需要帮助以无限滚动填充下拉列表。我创建了一个正常的下拉列表，其中所有数据都会进行，但加载数据需要花费大量时间。这是我的代码。

function GetSelectedWorldList(){

   var el = $('#<%=lstAvail.ClientID%>');
    var selValues = [
    <asp:Repeater ID="lstSelect" runat="server">
    <ItemTemplate>
    '<%# Eval("slc_code")%>'
    </ItemTemplate>
    <SeparatorTemplate>
    ,
    </SeparatorTemplate>
    </asp:Repeater>
    ];
    console.log(selValues);
    $(el).select2("val", selValues);


}

Answer 1

您需要查看通过ajax加载数据，而不是一次性加载数据。

然后你可以让你的初始查询选择较少的数据，这取决于你的sql可能更快（请注意，如果按顺序排在前十位可能仍然很慢）。当您需要更多数据时，您将对另一个返回额外数据的Url进行AJAX调用。然后可以将其接收并添加到页面中。

最基本的就是来自https://www.sitepoint.com/jquery-infinite-scrolling-demos/的样本，尽管还有库和更有效的方法：

   $(document).ready(function() {
    var win = $(window);

    // Each time the user scrolls
    win.scroll(function() {
        // End of the document reached?
        if ($(document).height() - win.height() == win.scrollTop()) {
            $('#loading').show();

            $.ajax({
                url: 'get-post.aspx',
                dataType: 'html',
                success: function(html) {
                    $('#posts').append(html);
                    $('#loading').hide();
                }
            });
        }
    });
});

无限滚动数据库中的数据

1 个答案: