Question

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

我有一个asp.net mvc项目，需要实时表示数据。使用datatables（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

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

使用任何模态插件和JavaScript函数将整个记录加载到局部视图中相对容易，并将该部分视图作为模式的HTML加载，其中一部分可以在我的答案中找到{{ 3}}

如果您使用Bootstrap模式执行此操作，为每个具有属性（我的是伪代码）class="editDrop"和data-dropid='@currentDrop.id'的行添加了一个按钮到数据表，代码看起来像：< / p>

<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>

这将需要一个控制器操作，返回编辑表单的部分视图：

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

    return PartialView(drop);
}

以上假设您将使用域模型（类Drop）作为编辑视图的视图模型。您应该考虑使用View模型。有关here和here的更多信息。

祝你好运！

检测与JQuery数据表的交互

1 个答案: