Detecting interaction with JQuery Datatables

Question

I apologize in advance but I am a newbie at JS.

I have a asp.net mvc project that requires a real-time representation of data. Using datatables (jquery) ajax features I have been able to incrementally get information from the database and reload the table. However when the reload function is called the table is redrawn therefore any interaction the user had with the datatable is reset.

I think the best way to solve this problem is to detect some kind of user interaction with the datatable and temporarily pause the setincrement function (so that the table won't reload). Then wait for so many seconds after interaction and then continue to start the reload process again.

I don't know JS enough to be able to program any such detection or even pause and/or reset the incrementer. Any help would be greatly appreciated whether it be answering my question directly or with a better solution.

Here is my current JS for scripting the reload (and setting the datatable):

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

What you can do is render a link to a modal view that loads the record that was clicked on with a partial view to edit the record. This would allow the table to continually refresh while the user edits the record in the modal window.

This is relatively easy to do with any modal plugin and a JavaScript function to load the full record into a partial view, and load that partial view as the HTML for the modal, part of which you can find in my answer here.

If you did this using Bootstrap modals, having added a button to your datatable for each row with attributes (mine are pseudocode-ish) class="editDrop" and data-dropid='@currentDrop.id', the code would look something like:

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

The individual buttons you need to render on each row will (if using Bootstrap css) look something like:

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

This will then require a controller action that returns a partial view of your Edit form:

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

    return PartialView(drop);
}

The above assumes you would be using your domain model (the class Drop) as your view model for the edit view. You should look into using View models instead. More info on those here and here.

Good luck!