web-dev-qa-db-fra.com

Actualiser la table de données jQuery

Il y a eu beaucoup de questions à ce sujet mais je n’en ai jamais trouvé qui me convienne. J'ai un tableau HTML simple et clair dont le corps est rempli de lignes d'un appel AJAX . Ensuite, je souhaite mettre à jour le tableau avec le plug-in DataTable mais cela ne fonctionne pas . J'ai un code HTML tableau qui ressemble à ceci:

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

Dans mon pageload jQuery

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

Et enfin ma fonction de changement sur 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'annexe et ainsi de suite a été modifiée pour la raccourcir, etc., donc ne vous concentrez pas trop dessus.

Fondamentalement, la question est de savoir comment mettre à jour la table, je peux faire mon AJAX et ajouter de nouvelles données à la table, mais le plug-in datatable ne se met pas à jour avec elle . J'ai essayé d'autres choses comme 

.fnDraw (false);

Mais cela ne fait rien. Alors que je reçois une erreur JSON de 

fnReloadAjax ()

Des indices sur la façon d'actualiser la table?

ajaxjqueryjquery-datatables
13
HenrikP

Essaye ça

Initialement, vous avez initialisé la table, alors commencez par effacer cette table.

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

Puis initialiser à nouveau après le succès ajax

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

Comme ça

$("#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
                ]
            });
        });

DÉMO

25
Sridhar R

Je sais que ceci est un ancien message, mais je viens d’enquêter sur le problème et je trouve le moyen le plus simple de le résoudre dans les pages de manuel DataTable: https://datatables.net/reference/api/ajax.reload%28 % 29 Tout ce dont vous avez besoin d’appeler table.ajax.reload ();

3
Marco
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();
});
2
Hariharan.P

J'avais fait quelque chose qui se rapporte à cela ... Voici un exemple de code javascript avec ce dont vous avez besoin. Il y a une démo sur ceci ici: 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');
    }
}
1
Mwangi Thiga