Обнаружение взаимодействия с JQuery Datatables

Question

Я заранее извиняюсь, но я новичок в JS.

У меня есть проект asp.net mvc, который требует представления данных в режиме реального времени. Используя функции ajax datatables (jquery), я смог постепенно получать информацию из базы данных и перезагружать таблицу. Однако, когда функция перезагрузки вызывается, таблица перерисовывается, поэтому любое взаимодействие пользователя с данным datatable сбрасывается.

Я думаю, что лучший способ решить эту проблему - обнаружить какое-то взаимодействие пользователя с данным datatable и временно приостановить функцию setincrement (чтобы таблица не перезагружалась). Затем подождите столько секунд после взаимодействия, а затем снова начните процесс перезагрузки.

Я не знаю, достаточно ли JS для программирования любого такого обнаружения или даже паузы и/или сброса инкремента. Любая помощь была бы очень признательна, будь то ответ на мой вопрос напрямую или с лучшим решением.

Вот мой текущий JS для написания сценариев перезагрузки (и установив 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

Что вы можете сделать, это делает ссылку на вид модальный, который загружает запись, которая была нажата на с частичным чтобы отредактировать запись. Это позволит постоянно обновлять таблицу, когда пользователь редактирует запись в модальном окне.

Это относительно легко сделать с любым модальным плагином и функцией JavaScript, чтобы загрузить полную запись в частичный вид и загрузить это частичное представление как HTML для модального, часть которого вы можете найти в моем ответе here ,

Если вы сделали это, используя Bootstrap модальности, добавив кнопку на DataTable для каждой строки с атрибутами (шахтные являются псевдокод-МОГ) 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> 

Это будет требовать действие контроллера, который возвращает частичное представление вашего редактирования формы:

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

    return PartialView(drop); 
} 

выше предполагает, что вы будете использовать вашу модель предметной области (класс Drop) в качестве модели представления для вида редактирования. Вместо этого вы должны изучить модели просмотра. Более подробная информация об этих here и here.

Удачи вам!