Ajouter une nouvelle ligne au-dessus de jQuery datatables

J'ai besoin d'ajouter une nouvelle ligne dans une table de données qui doivent être placés dans le haut de la table et j'ai utilisé le tri plugin, mais il a échoué.

Quelqu'un peut-il m'aider à résoudre ce problème?

Vous pouvez avoir un modèle de row stockée dans une variable. Vous pouvez obtenir la première ligne de la table $('table').find('tr:first') et .prepend(rowTemplate)
Désolé, Puisqu'il a la pagination, ça ne marchera pas, il sera ajouté en haut de la dernière page .
Pourriez-vous apporter un charme de ce que vous faites?
oui... Fait un échantillon.. cochez cette jsfiddle.net/cvLRg/41
depuis les lignes de réorganiser sur le tri, l'ajout d'une ligne à haut peut être difficile. Vous pouvez faire quelque chose comme ceci jsfiddle.net/dhirajbodicherla/cvLRg/56 (cacher la première colonne). Mais cela ne fonctionnera pas si vous triez colonne et ils ou d'ajouter des

OriginalL'auteur Tony Jose | 2015-04-10

  1. 3

    Au bout d'un certain temps je pourrais résoudre ce problème dans ma table avec le construit en afin() fonction. (Pas de plugin supplémentaire nécessaire)

        var table = $('#adapterTable').DataTable();

    $('#newButton').on( 'click', function () {
        var row = ["<button id='savebutton'>save</button>","<input name='titel'/>"];
        table.row.add(row).draw( false );

        table.order([1, 'asc']).draw();
        table.order([0, 'asc']).draw();
    } );

    Cela fonctionne parce que mon tableau a de l'ID dans la première colonne et le champ de texte dans la deuxième colonne.

    Ma ligne insérée contient un bouton "enregistrer" dans la colonne ID et un champ de saisie dans la deuxième colonne.

    Si maintenant je sorte la deuxième Colonne ascendante de la zone d'entrée sera affichée sur le dessus.
    Pour rétablir l'ordre en ID je viens de faire un autre ordre() sur la colonne ID. Ce en quelque sorte de ne pas modifier la ligne avec le bouton, il suffit de les lignes avec des valeurs numériques.

    table.order([0, 'asc']).draw();

    C'est aussi plus d'une solution et il dépend du contenu de votre table. Avec Texte en clair, vous pourriez avoir à le combiner avec un colonne masquée juste pour passer commande, ou un autre truc. Mais vous pouvez utiliser datatable fonctions et n'ont pas besoin de manipuler la table directement.

    Salut, j'ai essayé vos solutions, mais je ne sais pas pourquoi le texte d'entrée n'est pas disponible pour être rempli. Savez-vous pourquoi,.?
    je ne sais pas si j'ai bien compris votre question. vous pouvez écrire un texte dans la zone de saisie d'une valeur d'attribut: <input value='yourtext" >

    OriginalL'auteur Yush0

  2. 2

    Cette solution de contournement peut aider:

    • Ajouter la ligne de l'objet datatable via l'api (de sorte que vous aurez à disposition les données lorsque vous triez ou de la pagination)
    • Ne pas redessiner (donc la nouvelle ligne n'est pas dessiné en bas)
    • Ajouter la même ligne vers le haut de la table via .prepend()
    var employersTable = $('#employersTable').DataTable();
$('#addRow').click(function(){
    var row = $('<tr>')
        .append('<td>added row</td>')
        .append('<td>Test 2</td>')
        .append('<td>123</td>')
        .append('<td>2014-05-09</td>')
        .append('<td>No</td>')
        .append('<td>blub</td>')

    employersTable.row.add(row);
    $('#employersTable tbody').prepend(row);
});

    Important (peut-être) inconvénient: il ne sera pas paginer automatiquement lorsque vous ajoutez des lignes.

    Exemple de travail à votre JSFiddle.

    C'est une mauvaise solution pour manipuler la table directement comme cela rompt la commande et la pagination.
    Je sais, c'est pourquoi je l'ai appelé une "solution de contournement". Depuis ce que l'OP a demandé, par définition, est rupture de la commande, j'ai pensé qu'il pourrait être assez bon. Aussi, depuis que j'ai ajouter la ligne de données, sur votre prochaine interaction avec la datatable, le tri et la pagination ne fonctionne de nouveau.
    You rock !!! Enfin une méthode de travail
    Si vous utilisez cette méthode, base datatable fonctionnalités ne fonctionneront pas!

    OriginalL'auteur Ángela

  3. 0

    La méthode add de pousser la ligne de aiDisplayMaster tableau dans jquery.dataTables.js. Ainsi, vous pouvez modifier l'emplacement des lignes dans aiDisplayMaster. ce qui suit est le code.

    table = $("table").dataTable() //not DataTable() function
dt = table.api()
obj = {"id":131,"name":" 111  test"}
dt.row.add(obj);
var aiDisplayMaster = table.fnSettings()["aiDisplayMaster"];
irow = aiDisplayMaster.pop();
aiDisplayMaster.unshift(irow);
dt.draw();

    OriginalL'auteur robin