Переинициализировать таблицу Datatebles при её обновлении

186
23 июля 2018, 11:40

У меня есть таблица . Не подскажете, как при нажатии на Save сделать так, чтобы страница обновлялась? Используется Datatables.net. Пробовал юзать Destroy перед загрузкой данных - но ничего не происходило по итогу.

function loadPosts(tableId, onSuccess) { 
  $.ajax( { 
    url: "/api/post/getfiltered", method: "POST", data: JSON.stringify( {} 
    ), contentType: "application/json; charset=utf-8", success: function (result) { 
      if ($.fn.DataTable.isDataTable('#'+tableId)) { 
        $('#'+tableId).dataTable().destroy(); 
      } 
      $('#' + tableId).dataTable( { 
        data: preparePostsTableData(result.data), columns: [ { 
          searchable: false 
        } 
        , null, { 
          render: function (data, type, row, meta) { 
            return new Date(data).toLocaleString() 
          } 
        } 
        , null, null, { 
          render: function (data, type, row, meta) { 
            return formatStatus(data); 
          } 
        } 
        , { 
          visible: false 
        } 
        , { 
          className: 'no-wrap', orderable: false, render: function (data, type, row, meta) { 
            return formatActions(data.id, data.blockReason, data.shortText, data.tags); 
          } 
        } 
        ] 
      } 
      ); 
    } 
  } 
  ) 
} 
 
function editPost(id, shortText, tags) { 
  $('#modal')[0].style.display='block'; 
  $('#pstText').val(shortText); 
  $('#pstTags').val(tags); 
  $('#idText').val(id); 
} 
 
function saveChange() { 
  var id=$('#idText').val(); 
  var shortText=$('#pstText').val(); 
  var tags=$('#pstTags').val(); 
  $.ajax( { 
    url: "/api/post/", method: "PUT", contentType: "application/json; charset=utf-8", data: JSON.stringify( { 
      id: id, shortText: shortText, tags: tags 
    } 
    ), success: function (result) { 
      $('#tblUsers').dataTable( { 
        data: preparePostsTableData(result.data) 
      } 
      ); 
    } 
  } 
  ) $('#modal')[0].style.display='none'; 
} 
 
$(document).ready(function () { 
  loadPosts("tblPosts", function () {} 
  ); 
} 
 
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<table id="tblPosts" data-order='[[ 1, "asc" ]]' data-page-length='25'> 
  <thead> 
    <tr> 
      <th>ID</th> 
      <th>Author</th> 
      <th>Date</th> 
      <th>Text</th> 
      <th>Tags</th> 
      <th data-class-name="priority">Status</th> 
      <th>isActive</th> 
      <th data-formatter="formAction">Actions</th> 
    </tr> 
  </thead> 
  <tfoot> 
    <tr> 
      <th>ID</th> 
      <th>Author</th> 
      <th>Date</th> 
      <th>Text</th> 
      <th>Tags</th> 
      <th data-class-name="priority">Status</th> 
      <th>isActive</th> 
      <th data-formatter="formAction">Actions</th> 
    </tr> 
  </tfoot> 
</table> 
 
<div id="modal"> 
  <div class="overlay"></div> 
  <div class="visible"> 
    <h2>Edit</h2> 
    <div class="content"> 
      <div class="form-group" style="display:none;"> 
        <label for="idText">Id:</label> 
        <input type="text" class="form-control" id="idText"> 
      </div> 
      <div class="form-group"> 
        <label for="pstText">Text:</label> 
        <input type="text" class="form-control" id="pstText"> 
      </div> 
      <div class="form-group"> 
        <label for="pstTags">Tags:</label> 
        <input type="text" class="form-control" id="pstTags"> 
      </div> 
    </div> 
    <div class="controlElems"> 
      <button type="button" class="btn btn-outline-success btnSave" onclick="saveChange()"> Save <i class="fa fa-save" aria-hidden="true"></i></button> 
      <button type="button" class="btn btn-outline-primary btnClose" onClick="closeChanges()">Close <i class="fa fa-close" aria-hidden="true"></i> </button> 
    </div> 
  </div> 
</div> 
 
<script type="text/javascript"> 
</script>

Answer 1

При инициализации таблицы вы должны занести ее в переменную let my_dt = $('#' + tableId).dataTable({, тогда, после отправки запроса на сохранение данных вы сможете обратиться к таблице и обновить ее - my_dt.ajax.reload(null, false);

READ ALSO
не проигрывает audio при вызове из JS

не проигрывает audio при вызове из JS

Сайт на aspnet mvc, нужно сделать звуковое сопровождение если новые данные добавились в таблицу

176
Как сделать стрелки slick slider в отдельном контейнере?

Как сделать стрелки slick slider в отдельном контейнере?

Как на картинке нужно чтобы стрелки находились в каком-либо блоке оберткеА этот сам блок был в контейнере контента

231
ERROR 2002 (HY000): Can&#39;t connect to local MySQL server through socket &#39;/var/run/mysqld/mysqld.sock&#39; (111 &ldquo;Connection refused&rdquo;)

ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (111 “Connection refused”)

Пытался поставить на линукс phpmyadminВначале была ошибка, что нет данного файла или каталога, сейчас жалуется на это

172
Вывод данных из нескольких таблиц MySQL

Вывод данных из нескольких таблиц MySQL

Всем приветПодскажите как вывести данные из нескольких таблиц в один dataGridView? У меня есть две таблицы "korzina" и "auth"

191