Question

我正在使用此函数使用数据库中的值填充表

我有一个过滤器，因此可以搜索

但是当我更新我的桌子时，删除旧的html并插入新的html，页面非常简短，没有任何东西，所以它是空白的，如果我输入一个长的话，它看起来很难看像＆＃34; bobby＆＃34;

这样的句子

那5个键盘功能和5个刷新功能，我希望你能理解我的目标，我希望它能让它看起来流畅

function getData(filter) {
$.ajax({
    url: '/Person/GetData',
    type: 'GET',
    data: { Filter: filter },
    success: function (data) {

        // Template for HTML
        var template = '';

        // Loop through the data
        $.each(data, function (index, value) {

            // Values from the database
            var personId = value['Id'];
            var firstName = value['FirstName'];
            var lastName = value['LastName'];
            var age = value['Age'];

            // Template for a new <tr>
            template += '<tr id="' + personId + '">' +
                            '<td col-lg-4">' + firstName + '</td>' +
                            '<td col-lg-4">' + lastName + '</td>' +
                            '<td col-lg-2">' + age + '</td>' +
                            '<td><a class="del-link col-lg-2">Slett</a></td>' +
                        '</tr>';

        });

        // Add the template to the table body
        $('tbody').html(template);
    }
});

}

Answer 1

这里有两个不同的问题：

但是当我更新我的表时，删除旧的html并插入新的一，页面非常短暂没有任何东西，所以它是空白的，它如果我输入像“bobby”这样的长句话，看起来很难看。

您应该始终期望AJAX请求（尤其是随后插入内容的请求）花费的时间比预期的要长。您应该使用某种动画图形来显示正在动态加载内容。有很多方法可以做到这一点（在StackOverflow上搜索'AJAX loader animation'）。

你的背对背查看也没有帮助你......基本上每个后续查找都会清空页面内容，迭代数据，然后将其插入DOM。多次这样做（正如你所说）不仅没有必要，而且会给你的服务器和客户端的浏览器带来负担。

这是5个键盘功能和5个刷新，我希望你明白我的意思我正在谈论，我希望它看起来很顺利

您应该使用setTimeout方法，以便不对每个keyup执行查找（当keyup是这个顺序时）。这很容易理解。它本质上是一个“计时器”，只要你的事件（keyup）发生就会启动它。如果用户在计时器运行时触发了键盘事件，则启动/重置计时器。计时器结束后，执行AJAX调用。

e.g。使用sudo编码，这就是我如何处理这个问题（试图保持简单）

onKeyUp event
清除之前设置的setTimeout（）
启动新的setTimeout（）（在计时器完成后调用函数）
---
当setTimeout（）执行函数...
显示动画
执行AJAX调用
使用数据构建内容
成功时插入DOM或在失败时插入错误消息
隐藏动画（成功或失败）

平滑刷新/显示更新的表数据

1 个答案: