Comment actualiser un simple Datatables table lors de l'ajout de nouvelles lignes avec jQuery

Je pensais que ce serait simple, mais je ne peux pas trouver une référence qui n'est pas à propos de l'ajax chargement de données ou des données fournies dans un tableau. Je suis à l'aide de tables de données existante sur une table HTML avec ce code de base:

  $('table.wizard').dataTable({
        lengthChange: false,
        iDisplayLength: 100,
        order: [[9, 'desc']]
    });

Je suis d'ajouter des lignes à une table, de manière dynamique, comme les données des enregistrements comme ceci:

var $body = $('table.wizard tbody');
$tr = $("<tr>").appendTo($body).attr({ 'id': 'sku' + item.MerchantSKU, 'data-sku': item.MerchantSKU });
//then append the individual tds
[snip]
//Now how to tell the datatables it has changed?

Comment puis-je informer les tables de données sur les nouvelles lignes?

OriginalL'auteur Gone Coding | 2015-02-14

  1. 7

    Après quelques expériences, que la documentation et les exemples ne sont pas très claires pour les DOM tables, il s'avère que vous pouvez utiliser le même row.add() méthode d'ajout de HTML TRs comme vous le feriez pour les objets et les tableaux. Vous appelez ensuite la draw() méthode pour faire les changements visibles:

    par exemple

    dt.row.add($tr);
dt.draw();

    JSFiddle: http://jsfiddle.net/TrueBlueAussie/HEDvf/2205/

    Malheureusement, elle ne permettra de vous rafraîchir les ajouts apportés avec jQuery (qui est idéalement ce que je voulais vraiment pour permettre la transparence dans l'utilisation des tables de données) 🙁

    Solution finale (pour l'instant):

    J'ai ajouté une coutume appendRow() jQuery extension, qui vérifie si la table est un DataTable et redirige l'ajouter via les tables de données de l'api en cas de besoin:

    //Assume we only append to one table at a time (otherwise rows need to be cloned)
$.fn.appendRow = function ($rows) {
    if ($(this).parent().hasClass("dataTables_wrapper")) {
        var dt = $(this).dataTable().api();
        $rows.each(function () {
            dt.row.add(this);
        });
        dt.draw();
    } else {
        $(this).append($rows);
    }
}

    JSFiddle: http://jsfiddle.net/TrueBlueAussie/HEDvf/2212/

    un liner: dt.ligne.ajouter de dollars (tr).draw();
    n'est-ce pas votre code répond à votre question déjà?
    Je suis à la recherche d'un moyen qui permet de jQuery ajouts indépendant de tables de données, afin de permettre d'une même table pour être utilisable avec des tables de données sur on ou off. Si le vôtre avait travaillé qui aurait été plus proche
    Ensuite, vous devez écrire une fonction qui vérifie si votre table est enveloppé par un élément de dataTables_wrapper classe de style, et si oui, appelez les tables de données actualisation du code, autrement appel de la plaine actualisation de table de code (si tu as un peu)
    Bonne idée. Au moins, il n'ont qu'un seul chemin d'accès du code. Je vais probablement l'envelopper comme un $(element).appendRow() jQuery extension et de le poster ici.

    OriginalL'auteur Gone Coding