Hoe voeg ik een knop toe aan elke rij in de datatabel?

Ik ben een beginner in DataTables. Ik wil een knop toevoegen aan elke rij voor bewerken en verwijderen (zoals onderstaande afbeelding)

Ik heb geprobeerd met 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",
        ""
    ]
]
 }

Antwoord 1, autoriteit 100%

In principe is je code in orde, dat is de juiste manier om dit te doen. Hoe dan ook, er zijn enkele misverstanden:

1. fetchUserData.cfm bevat geen sleutel/waarde-paren. Het heeft dus geen zin om sleutels in mData aan te spreken. Gebruik gewoon mData[index]

2. dataTables verwacht wat meer informatie van je server. Je moet in ieder geval aan datatables vertellen hoeveel items er in totaal op je server staan ​​en hoeveel er zijn gefilterd.
   Ik heb deze informatie zojuist hardcoded naar uw gegevens. U zou de juiste waarden moeten halen uit tellingen in uw serverzijdige script.

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

3. Als je de kolomnamen al hebt ingesteld in het html-gedeelte, hoef je geen sTitle toe te voegen.

4. De mRender-functie heeft drie parameters:

   • data = De gegevens voor deze cel, zoals gedefinieerd in mData
   • type = Het datatype (kan meestal worden genegeerd)
   • full = De volledige gegevensarray voor deze rij.

Dus uw mRender-functie zou er als volgt uit moeten zien:

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

Vind hier

een werkende Plunker

Antwoord 2, autoriteit 33%

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;
            }},
    ],
    }
}

Antwoord 3, autoriteit 30%

kijk hier… dit was erg nuttig voor mij
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 ] );
    } );
} );

Antwoord 4, autoriteit 7%

Ik draag bij met mijn instellingen voor knoppen: bekijken, bewerken en verwijderen.
De laatste kolom bevat gegevens: null
Aan het einde met de eigenschap defaultContent wordt een tekenreeks toegevoegd die HTML-code bevat. En aangezien het de laatste kolom is, wordt deze aangegeven met index -1 door middel van de eigenschap targets bij het aangeven van de kolommen.

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

voer hier de afbeeldingsbeschrijving in

Antwoord 5, autoriteit 5%

Kijk eens.

$(document).ready(function () {     
        $('#datatable').DataTable({
            columns: [
                { 'data': 'ID' },
                { 'data': 'AuthorName' },
                { 'data': 'TotalBook' },
                { 'data': 'DateofBirth' },
                { 'data': 'OccupationEN' },   
                { 'data': null, title: 'Action', wrap: true, "render": function (item) { return '<div class="btn-group"> <button type="button" onclick="set_value(' + item.ID + ')" value="0" class="btn btn-warning" data-toggle="modal" data-target="#myModal">View</button></div>' } },
            ],            
            bServerSide: true,
            sAjaxSource: 'EmployeeDataHandler.ashx'           
        });       
    });

Antwoord 6, autoriteit 2%

mijn recept:

gegevenstabel:

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

evenementen:

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

Antwoord 7

Nou, ik heb zojuist de buttontoegevoegd aan de gegevens.
Bijvoorbeeld,
ik zou als volgt moeten coderen:

$(target).DataTable().row.add(message).draw()

En in messageheb ik een knop als volgt toegevoegd: [blah, blah ... "<button>Click!</button>"]en .. het werkt!