I have a table datatable . Do not tell me how to click on Save to make the page refresh? Datatables.net is used. I tried to use Destroy before loading the data - but nothing happened at the end.

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>

  • Where you have the declaration of the element of the table DataTables type in js, please show the code. You have a line of this type in js: var new_dt = $('...').DataTable({ ? - RifmaMan
  • Just a minute, I'll edit - Andrew Stark
  • @RifmaMan corrected the code - look - Andrew Stark

2 answers 2

You can also use the empty function.

    When you initialize the table, you must put it in the let my_dt = $('#' + tableId).dataTable({ , then, after sending the data saving request, you can access the table and update it - my_dt.ajax.reload(null, false);