web-dev-qa-db-de.com

Wie füge ich in jeder Datatabelle eine Schaltfläche hinzu?

Ich bin Neuling für DataTables. Ich möchte in jeder Zeile eine Schaltfläche zum Bearbeiten und Löschen hinzufügen (wie unter dem Bild)

enter image description here

Ich habe mit Code versucht: 

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",
        ""
    ]
]
 }
37
Sameek Mishra

Grundsätzlich ist Ihr Code in Ordnung, das ist der richtige Weg, dies zu tun. Trotzdem gibt es einige Missverständnisse:

  1. fetchUserData.cfm enthält keine Schlüssel/Wert-Paare. Daher ist es nicht sinnvoll, Schlüssel in mData zu adressieren. Verwenden Sie einfach mData[index]

  2. dataTables erwartet weitere Informationen von Ihrer Serverseite. Zumindest sollten Sie datatables mitteilen, wie viele Elemente sich insgesamt auf Ihrer Serverseite befinden und wie viele davon gefiltert werden. Sie sollten die richtigen Werte aus der Anzahl in Ihrem serverseitigen Skript ermitteln.

    {
     "iTotalRecords":"6",
     "iTotalDisplayRecords":"6",
      "aaData": [
    [
        "1",
        "sameek",
        "sam",
        "sam",
        "[email protected]",
        "1",
        ""
    ],...
    
  3. Wenn die Spaltennamen bereits im HTML-Teil festgelegt wurden, müssen Sie keinen sTitle hinzufügen.

  4. Die mRender-Funktion benötigt drei Parameter:

    • data = Die Daten für diese Zelle, wie in mData definiert
    • type = Der Datentyp (kann meistens ignoriert werden)
    • full = Das vollständige Datenarray für diese Zeile.

Ihre mRender-Funktion sollte also so aussehen:

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

Finde einen funktionierenden Plunker hier

33
mainguy

schauen Sie hier ... das war sehr hilfreich für mich 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

Ich trage mit meinen Einstellungen für Schaltflächen bei: Anzeigen, Bearbeiten und Löschen .. Die letzte Spalte enthält Daten: null Am Ende der Eigenschaft defaultContent wird eine Zeichenfolge mit diesem HTML-Code hinzugefügt. Und da es sich um die letzte Spalte handelt, wird sie beim Anzeigen der Spalten mit der Eigenschaft '-1s' mit dem Index -1 angegeben.

//...
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
], 
//...

Bildbeschreibung hier eingeben

1
user2341112

Diese Lösung funktioniert nicht, wenn responsive datatable verwendet wird

0
NIDIA RAMIREZ

mein Rezept:

datierbare Erklärung: 

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

veranstaltungen:

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