web-dev-qa-db-fra.com

Comment puis-je ajouter un bouton sur chaque ligne dans datatable?

Je suis novice pour DataTables. Je veux ajouter un bouton sur chaque ligne pour modifier et supprimer (comme ci-dessous l'image)

enter image description here

J'ai essayé avec le code: 

Test.cfm 

<table id="myDataTable" class="table table-striped table-bordered">
<thead>
    <tr>
        <th>UserID</th>
        <th>Name</th>
        <th>UserName</th>
        <th>Passowrd</th>
        <th>Email</th>
         <th>IsActive</th>
         <th>Command</th>
    </tr>
</thead>
<tbody> 
</tbody>


$(document).ready(function () {
    var oTable = $('#myDataTable').dataTable({
       // "bServerSide": true,
        "sAjaxSource": "fetchUserData.cfm",
        "bProcessing": true,
        "sPaginationType": "full_numbers",
        "aoColumns": [
            { "mData": null },
            { "mData": "Name", "sTitle": "Name" , "sWidth": "20%"},
            { "mData": "UserName", "sTitle": "UserName", "sWidth": "20%" },
            { "mData": "Passowrd","sTitle": "Passowrd", "sWidth": "20%"  },
            { "mData": "Email","sTitle": "Email"  , "sWidth": "20%"},
            { "mData": "IsActive","sTitle": "IsActive" , "sWidth": "20%" },
            {
                "mData": null,
                "bSortable": false,
               "mRender": function (o) { return '<a href=#/' + o.userid + '>' + 'Edit' + '</a>'; }
            }
        ]
    });

} );

fetchUserData.cfm 

{
"aaData": [
    [
        "1",
        "sameek",
        "sam",
        "sam",
        "[email protected]",
        "1",
        ""
    ],
    [
        "2",
        "arun singh",
        "arun",
        "arun",
        "[email protected]",
        "0",
        ""
    ],
    [
        "9",
        "s s",
        "sam3",
        "sam3",
        "[email protected]",
        "0",
        ""
    ],
    [
        "10",
        "sameek mishra",
        "sam56",
        "sam",
        "[email protected]",
        "0",
        ""
    ],
    [
        "11",
        "narendra kumar",
        "narendra",
        "nav",
        "[email protected]",
        "1",
        ""
    ],
    [
        "12",
        "test test",
        "test",
        "test",
        "[email protected]",
        "1",
        ""
    ]
]
 }
javascriptjquerydatatables
37
Sameek Mishra

En gros, votre code est correct, c'est la bonne façon de procéder. Quoi qu'il en soit, il y a quelques malentendus:

  1. fetchUserData.cfm ne contient pas de paires clé/valeur. Il n’a donc aucun sens de s’adresser aux clés dans mData. Il suffit d'utiliser mData[index]

  2. dataTables attend quelques informations supplémentaires de la part de votre serveur. Au moins, vous devriez indiquer à datatables le nombre total d'éléments contenus sur votre serveur et le nombre d'éléments filtrés ... Je viens de coder cette information en dur dans vos données Vous devriez obtenir les bonnes valeurs à partir des nombres dans votre script côté serveur.

    {
 "iTotalRecords":"6",
 "iTotalDisplayRecords":"6",
  "aaData": [
[
    "1",
    "sameek",
    "sam",
    "sam",
    "[email protected]",
    "1",
    ""
],...

  3. Si les noms de colonne sont déjà définis dans la partie html, vous n'avez pas besoin d'ajouter sTitle.

  4. La fonction mRender prend trois paramètres:

    • data = Les données pour cette cellule, telles que définies dans mData
    • type = Le type de données (peut être ignoré principalement)
    • full = Le tableau de données complet pour cette ligne.

Donc, votre fonction mRender devrait ressembler à ceci:

  "mRender": function(data, type, full) {
    return '<a class="btn btn-info btn-sm" href=#/' + full[0] + '>' + 'Edit' + '</a>';
  }

Trouver un Plunker de travail ici

33
mainguy

jetez un coup d'oeil ici ... c'était très utile pour moi https://datatables.net/examples/ajax/null_data_source.html

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": "data/arrays.txt",
        "columnDefs": [ {
        "targets": -1,
        "data": null,
        "defaultContent": "<button>Click!</button>"
    } ]
} );

$('#example tbody').on( 'click', 'button', function () {
    var data = table.row( $(this).parents('tr') ).data();
    alert( data[0] +"'s salary is: "+ data[ 5 ] );
    } );
} );
6
plassede senra
var table =$('#example').DataTable( {
    data: yourdata ,
    columns: [
        { data: "id" },
        { data: "name" },
        { data: "parent" },
        { data: "date" },

        {data: "id" , render : function ( data, type, row, meta ) {
              return type === 'display'  ?
                '<a href="<?php echo $delete_url;?>'+ data +'" ><i class="fe fe-delete"></i></a>' :
                data;
            }},
    ],
    }
}
1
Majid.r

Je contribue avec mes paramètres pour les boutons: afficher, modifier et supprimer . La dernière colonne a des données: nullA la fin avec la propriété defaultContent est ajoutée une chaîne que le code HTML. Et comme il s’agit de la dernière colonne, il est indiqué avec index -1 au moyen de la propriété target lors de l’indication des colonnes.

//...
columns: [
    { title: "", "data": null, defaultContent: '' }, //Si pone da error al cambiar de paginas la columna index con numero de fila
    { title: "Id", "data": "id", defaultContent: '', "visible":false },
    { title: "Nombre", "data": "nombre" },
    { title: "Apellido", "data": "apellido" },
    { title: "Documento", "data": "tipo_documento.siglas" },
    { title: "Numero", "data": "numero_documento" },
    { title: "Fec.Nac.", format: 'dd/mm/yyyy', "data": "fecha_nacimiento"}, //formato
    { title: "Teléfono", "data": "telefono1" },
    { title: "Email", "data": "email1" }
    , { title: "", "data": null }
],
columnDefs: [
    {
        "searchable": false,
        "orderable": false,
        "targets": 0
    },
    { 
      width: '3%', 
      targets: 0  //la primer columna tendra una anchura del  20% de la tabla
    },
    {
        targets: -1, //-1 es la ultima columna y 0 la primera
        data: null,
        defaultContent: '<div class="btn-group"> <button type="button" class="btn btn-info btn-xs dt-view" style="margin-right:16px;"><span class="glyphicon glyphicon-eye-open glyphicon-info-sign" aria-hidden="true"></span></button>  <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button><button type="button" class="btn btn-danger btn-xs dt-delete"><span class="glyphicon glyphicon-remove glyphicon-trash" aria-hidden="true"></span></button></div>'
    },
    { orderable: false, searchable: false, targets: -1 } //Ultima columna no ordenable para botones
], 
//...

entrez la description de l'image ici

1
user2341112

ma recette:

déclaration datatable: 

defaultContent: "<button type='button'....

événements:

$('#usersDataTable tbody').on( 'click', '.delete-user-btn', function () { var user_data = table.row( $(this).parents('tr') ).data(); }
0
Rolando