web-dev-qa-db-fra.com

jquery dataTables - comment ajouter une option d'édition et de suppression

J'ai le code suivant: http://jsfiddle.net/5ooyertu/1/

À l'heure actuelle, la table est correctement remplie via le côté serveur et ma pagination fonctionne. Mais je voudrais ajouter la possibilité de supprimer et/ou de modifier une ligne. Je voudrais ajouter une colonne appelée "Actions" qui en a deux - une pour une méthode d'édition ... et l'autre pour une méthode de suppression.

Avant d'utiliser dataTables, j'avais une logique JavaScript qui parcourrait un tableau d'enregistrements depuis un Ajax, appelait et remplissait une table régulière avec les données et les hyperliens appropriés.

 for (var i=0; i < data.length; i++) {
  if (data[i].grp == 0) {
     tr.append("<a href='add.html?id=" + data[i].id + "&pid=" + data[i].pid + "&destination=" + data[i].destination + "&name=" + data[i].name.replace("'", "%27") + "'</a><button class='btn btn-xs btn-primary'>Edit</button>&nbsp;</td>");
     tr.append("<button class='btn btn-xs btn-primary' onclick='delete(" + data[i].id + "," + data[i].pid + ");'>Delete</button></td>")

 } else {
     tr.append("<a href='update_group.html?id=" + data[i].id + "&pid=" + data[i].pid + "&destination=" + data[i].destination + "&name=" + data[i].name.replace("'", "%27") + "'</a><button class='btn btn-xs btn-primary'>Edit</button>&nbsp;</td>");
     tr.append("<button class='btn btn-xs btn-primary' onclick='delete(" + data[i].id + "," + data[i].pid + ",true);'>Delete</button></td>")
  }
}

Comme vous pouvez le voir dans l'exemple de code ci-dessus, dans mes liens hypertexte, je dois transmettre quelques données de chaque ligne, soit en tant que partie de la chaîne de requête (dans le cas des modifications), soit simplement en les transmettant en tant que paramètres à un autre Fonction JavaScript appelée "supprimer" qui réside dans le même fichier que ce dataTable. Et c'est conditionnel ... ce qui signifie que les hyperliens changeront selon que grp est vrai/faux.

Je me demande comment je peux changer la logique qui remplit le dataTable pour inclure maintenant ces deux hyperliens?

J'ai trouvé ce lien: http://datatables.net/forums/discussion/5862/creating-an-action-column-for-icons-view-edit-delete# Mais le code n'a pas travailler pour moi et je pense avoir lu quelque part que la méthode fnRender est obsolète maintenant.

Si vous avez des suggestions, je vous en serais reconnaissant.

EDIT 1

J'ai essayé de changer mon code pour qu'il ressemble à ceci:

$(document).ready(function() {
    var selected = [];
    $('#users').DataTable( {

        "serverSide": true,
        "ordering": false,
         aLengthMenu: [
                [10, 25, 50, 100, "-1"],
                [10, 25, 50, 100, "All"]
        ],
        "ajax": "/cgi-bin/test",
        "rowCallback": function( row, data ) {
            if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
                $(row).addClass('selected');
            }
        },
        "columns": 
        [    
                { "data": "id" ,"searchable":false},
                { "data": "name","searchable":true},    
                { "data": "pid", "searchable":true },    
                { "data": "destination", "searchable":true },
                {"mRender": function ( data, type, row ) {
                        return '<a href=add.html?id="'+row[0]+'">Edit</a>';}
                }
        ]
    } );

} );

Notez la référence d'appel à rendre. J'ai également ajouté une nouvelle colonne à ma table dans mon code html. J'ai un hyperlien! Mais malheureusement, le lien est incorrect. la ligne [0] renvoie "non défini". De plus, je ne sais toujours pas comment changer l'hyperlien que je crée en fonction de la valeur du champ "destination". Donc, par exemple, je veux faire quelque chose comme ça: (pseudocode)

if row[i].destination = 'Group' then
                    {"mRender": function ( data, type, row ) {
                            return '<a href=group.html?id="'+row[0]+'">Edit</a>';}
                    }
else
                    {"mRender": function ( data, type, row ) {
                            return '<a href=add.html?id="'+row[0]+'">Edit</a>';}
                    }
end

EDIT 2

Ce code semble fonctionner:

$ (document) .ready (function () {var selected = []; $ ('# users'). DataTable ({

        "serverSide": true,
        "ordering": false,
         aLengthMenu: [
                [10, 25, 50, 100, "-1"],
                [10, 25, 50, 100, "All"]
        ],
        "ajax": "/cgi-bin/test",
        "rowCallback": function( row, data ) {
            if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
                $(row).addClass('selected');
            }
        },
        "columns": 
        [    
                { "data": "id" ,"searchable":false},
                { "data": "name","searchable":true},    
                { "data": "pid", "searchable":true },    
                { "data": "destination", "searchable":true },
                {"mRender": function ( data, type, row ) {
                        return '<a href=add.html?id='+row.id+'>Edit</a>';}
                }
        ]
    } );

maintenant, je dois juste trouver comment le rendre conditionnel.

javascriptjqueryhtmljquery-datatables
6
dot

Voici un exemple supposant ce qui suit:

  • Population Ajax
  • La ligne de données est un tableau contenant 4 colonnes
  • Votre ligne de données contient l'identifiant sur la première colonne
  • Vous n'affichez pas l'ID sur la table donc vous le cachez

Il ne devrait pas être difficile de l'adapter à vos besoins. Vérifier columns utilisation

var datatablesOptions = {
    "serverSide": true,
    "ajaxSource": '[yourAjaxUrl]',
    "processing": true,
    "columns": [
        { bVisible = false }, // assume this is the id of the row, so don't show it
        null,
        null,
        null,
        /* EDIT */ {
            mRender: function (data, type, row) {
                return '<a class="table-edit" data-id="' + row[0] + '">EDIT</a>'
            }
        }
        /* DELETE */ {
            mRender: function (data, type, row) {
                return '<a class="table-delete" data-id="' + row[0] + '">DELETE</a>'
            }
        },              
     ]
};
$('#table').dataTable(datatablesOptions);

[~ # ~] modifier [~ # ~]

Dans le cas où vous auriez besoin d'un rendu conditionnel différent selon destination que vous pourriez faire

mRender: function (data, type, row) {
    if (row.destination == "d1") {
        return '<a href="destination1?id=' + row.id + '">EDIT</a>'
    }else (row.destination == "d2"){
        return '<a href="destination2?id=' + row.id + '">EDIT</a>'
    } else {
        // some error telling that destination value is unexpected
    }
}
10
Claudio Redi

jetez un œil à ma partie Extrait de colonnes

columns: [
    { 'data': 'LastName' },
    { 'data': 'FirstMidName' },
    { 'data': 'EnrollmentDate' },
    {// this is Actions Column 
        mRender: function (data, type, row) {
            var linkEdit = '@Html.ActionLink("Edit", "Edit", new {id= -1 })';
            linkEdit = linkEdit.replace("-1", row.ID);

            var linkDetails = '@Html.ActionLink("Details", "Details", new {id= -1 })';
            linkDetails = linkDetails.replace("-1", row.ID);

            var linkDelete = '@Html.ActionLink("Delete", "Delete", new {id= -1 })';
            linkDelete = linkDelete.replace("-1", row.ID);

            return linkDetails + " | " + linkEdit + " | " + linkDelete;
        }
    }

et ceci est un extrait de mon Json

{ID: 1, LastName: "Alexander", FirstMidName: "Carson", EnrollmentDate: "/Date(1126386000000)/",…}

Notez que j'utilise ASP.Net MVC donc Html.ActionLink juste renvoyant un lien

et les résultats sont enter image description here

6
Basheer AL-MOMANI

DataTables prend en charge les opérations de modification et de suppression. La suppression est assez simple, comme ceci:

$('#id tbody').on('click', function(){
    table
        .row($(this).parents('tr'))
        .remove()
        .draw();
});

Découvrez cet exemple: https://editor.datatables.net/examples/simple/inTableControls.html

1
CrazyPaste