javascript - 检测与 JQuery 数据表的交互

Question

我提前道歉，但我是 JS 的新手。

我有一个 ASP.NET MVC 项目，需要实时表示数据。使用数据表(jquery)ajax 功能，我能够增量地从数据库获取信息并重新加载表。然而，当调用重新加载函数时，表将被重新绘制，因此用户与数据表的任何交互都会被重置。

我认为解决这个问题的最好方法是检测某种用户与数据表的交互并暂时暂停setincrement函数(这样表就不会重新加载)。然后交互后等待这么多秒然后继续再次启动重新加载过程。

我对 JS 的了解不够，无法对任何此类检测进行编程，甚至无法暂停和/或重置增量器。无论是直接回答我的问题还是提供更好的解决方案，我们都将不胜感激。

这是我当前用于编写重新加载脚本(并设置数据表)的 JS:

$(document).ready(function () {
        var table = $('#myDataTable').DataTable({
            autoWidth: false,
            bProcessing: false,
            sAjaxSource: '@Url.Action("GetDropData", "Drops")',

            "columns":
            [
                { "width": "10%" },
                { "width": "50%" },
                { "width": "40%" }
            ]
        });

        setInterval(function () {

            table.ajax.reload(null, false); // user paging is not reset on reload

        }, 500);

    });

Answer 1

您可以做的是渲染一个指向模态视图的链接，该模态视图加载通过部分 View 单击以编辑记录的记录。当用户在模式窗口中编辑记录时，这将允许表不断刷新。

使用任何模态插件和 JavaScript 函数来将完整记录加载到部分 View 中，并将该部分 View 加载为模态的 HTML，这都是相对容易的，您可以在我的答案 here 中找到其中的一部分。

如果您使用 Bootstrap 模式执行此操作，则为带有属性的每一行添加一个按钮(我的是伪代码) class="editDrop" 和 data-dropid= '@currentDrop.id'，代码如下所示:

<div class="modal fade" id="editDropModal" tabindex="-1" 
     role="dialog" aria-labelledby="editDropModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" 
                     aria-hidden="true">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" 
                     data-dismiss="modal">Close</button>
                <button type="button btnSaveRecord" 
                     class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $('.editDrop').click(function(event){
        event.preventDefault();

        var dropId = $(this).data("dropid");

        $.ajax({
            url: '@Url.Content("~/Drops/_EditDrop")',
            data: {
                id: dropId
            },
            success: function(response) {
                $('#editDropModal').find('.modal-body').html(response);
            }
        });
    });
</script>

您需要在每行上呈现的各个按钮(如果使用 Bootstrap css)看起来像这样:

<button class="btn btn-sm btn-success" data-toggle="modal" 
    data-target="#editDropModal">Edit</button>

这将需要一个 Controller 操作来返回编辑表单的部分 View :

public PartialResult _EditDrop(int id) {
    var drop = db.Drops.Find(id);

    return PartialView(drop);
}

上面假设您将使用域模型(Drop 类)作为编辑 View 的 View 模型。您应该考虑使用 View 模型。有关 here 和 here 的更多信息。

祝你好运!