Aggiorna tabella dati jQuery

Question

Sono state molte domande su questo argomento, ma non ne ho mai trovato uno che funzionasse per me. Ho una tabella HTML semplice e semplice in cui il corpo viene riempito con righe da una chiamata AJAX. Quindi voglio aggiornare la tabella con il plugin DataTable ma non funziona. Ho una tabella HTML che assomiglia a questo:

<table id="myTable"> 
    <thead> 
    <tr> 
      <th>1</th> 
      <th>2</th> 
      <th>3</th> 
      <th>4</th> 
      <th>5</th> 
    </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

Nel mio jQuery Pageload

$(document).ready(function(){ 
     var oTable = $('#myTable').dataTable({ 
      "aoColumns": [ 
       { "bSortable": false }, 
       null, null, null, null 
      ] 
     }); 
}); 

E infine il mio sulla funzione di cambio dropdownlist

$("#dropdownlist").on("change", function() { 
     $("tbody").empty(); 
      $.ajax({ 
       type: "POST", 
       url: "@Url.Action("ActionHere", "Controller")", 
       dataType: "json", 
       success: function (data) { 
        $.each(data, function (key, item) { 
         $("tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>"); 
        }); 
       } 
      }) 
     var oTable = $('#myTable').dataTable(); // Nothing happens 
     var oTable = $('#myTable').dataTable({ // Cannot initialize it again error 
       "aoColumns": [ 
        { "bSortable": false }, 
        null, null, null, null 
       ] 
      }); 
     }); 

L'accodamento e così via è stato modificato per accorciarlo, ecc. quindi non focalizzarti troppo su di esso.

Fondamentalmente la domanda è come aggiornare la tabella, posso fare la mia AJAX e aggiungere nuovi dati alla tabella, ma il plugin datatable non si aggiorna con essa. Ho provato altre cose come

. FnDraw (falso);

Ma non fa nulla Mentre ottengo un errore JSON da

fnReloadAjax()

Degli indizi su quanto sia per aggiornare la tabella?

Answer 1

Prova questo

Inizialmente si inizializza la tabella in modo chiaro prima che tavolo

$('#myTable').dataTable().fnDestroy();

Poi inizializzare di nuovo dopo il successo ajax

$('#myTable').dataTable(); 

Ti piace questa

$("#dropdownlist").on("change", function() { 
     $("tbody").empty(); 
      $.ajax({ 
       type: "POST", 
       url: "@Url.Action("ActionHere", "Controller")", 
       dataType: "json", 
       success: function (data) { 
        $.each(data, function (key, item) { 
         $("tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>"); 
        }); 
       } 
      }) 
     $('#myTable').dataTable().fnDestroy(); 
     $('#myTable').dataTable({ // Cannot initialize it again error 
       "aoColumns": [ 
        { "bSortable": false }, 
        null, null, null, null 
       ] 
      }); 
     }); 

DEMO

Answer 2

So che questo è un vecchio post, ma ho appena indagato sul problema e trovo il modo più semplice per risolverlo in pagine man DataTable: https://datatables.net/reference/api/ajax.reload%28%29 Tutto quello che devi chiamare table.ajax. ricaricare();

Answer 3

Ho fatto qualcosa che riguarda questo ... Di seguito è riportato un esempio di javascript con ciò di cui hai bisogno. C'è una demo su questo qui: http://codersfolder.com/2016/07/crud-with-php-mysqli-bootstrap-datatables-jquery-plugin/

//global the manage member table 
var manageMemberTable; 

function updateMember(id = null) { 
    if(id) { 
     // click on update button 
     $("#updatebutton").unbind('click').bind('click', function() { 
      $.ajax({ 
       url: 'webdesign_action/update.php', 
       type: 'post', 
       data: {member_id : id}, 
       dataType: 'json', 
       success:function(response) { 
        if(response.success == true) {      
         $(".removeMessages").html('<div class="alert alert-success alert-dismissible" role="alert">'+ 
           '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+ 
           '<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+ 
          '</div>'); 

         // refresh the table 

         manageMemberTable.ajax.reload(); 

         // close the modal 
         $("#updateModal").modal('hide'); 

        } else { 
         $(".removeMessages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+ 
           '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+ 
           '<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+ 
          '</div>'); 

         // refresh the table       
         manageMemberTable.ajax.reload(); 

         // close the modal 
         $("#updateModal").modal('hide'); 
        } 
       } 
      }); 
     }); // click remove btn 
    } else { 
     alert('Error: Refresh the page again'); 
    } 
} 

Answer 4

Dalla versione 1.10.0 in poi è possibile utilizzare ajax.reload() api.

var table = $('#myTable').DataTable(); 
table.ajax.reload(); 

tenere a mente di utilizzare $('#myTable').DataTable() e non $('#myTable').dataTable()

Answer 5

var table = $('#product_table').DataTable({ 
    "bProcessing": true, 
    "serverSide": true, 
    responsive: true, 
    "ajax": { 
     url: get_base_url + "product_table", // json datasource 
     type: "post", // type of method ,GET/POST/DELETE 
     error: function() { 
      $("#employee_grid_processing").css("display", "none"); 
     } 
    } 
}); 

//call this funtion 
$(document).on('click', '#view_product', function() { 
    table.ajax.reload(); 
});