检测与 JQuery 个数据表的交互

Question

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

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

我认为解决此问题的最佳方法是检测某种用户与数据的交互table 并暂时暂停 setincrement 函数（这样 table 就不会重新加载） .然后交互之后等这么多秒再继续重新开始reload过程。

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

这是我当前用于编写重新加载脚本（和设置数据table）的 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

您可以做的是将 link 渲染到模态视图，该视图加载被单击的记录，并在局部视图中编辑记录。这将允许 table 在用户编辑模态 window 中的记录时不断刷新。

这对于任何模态插件和 JavaScript 函数来说都相对容易，可以将完整记录加载到部分视图中，并将该部分视图加载为模态部分的 HTML其中你可以在我的回答中找到 here.

如果您使用 Bootstrap 模式执行此操作，则为具有属性的每一行添加一个按钮到您的数据table（我的是伪代码）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>

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

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

    return PartialView(drop);
}

以上假定您将使用域模型（class Drop）作为编辑视图的视图模型。您应该改为使用 View 模型。有关 and here.

的更多信息

祝你好运！

检测与 JQuery 个数据表的交互

Detecting interaction with JQuery Datatables

javascript

ajax

asp.net-mvc

datatables

jquery-datatables