Hoe kan ik de knop toevoegen op elke rij in de datatable?

Ik ben een newbie voor DataTables. Ik wil de knop toevoegen op elke rij voor het bewerken en verwijderen(zoals hieronder afbeelding)

Hoe kan ik de knop toevoegen op elke rij in de datatable?

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",
        ""
    ]
]
 }
InformationsquelleAutor Sameek Mishra | 2014-03-18



6 Replies
  1. 37

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

    1. fetchUserData.cfm niet bevatten sleutel/waarde-paren. Dus het heeft geen zin adres toetsen in mData. Gebruik gewoon mData[index]

    2. dataTables verwacht wat meer info van je serverside. Op zijn minst moet je vertellen datatables hoeveel items er in totaal zijn op uw serverside en hoeveel zijn gefilterd.
      Ik heb net hardcoded deze informatie naar uw gegevens. U moet de juiste waarden uit tellingen in server-sided script.

      {
       "iTotalRecords":"6",
       "iTotalDisplayRecords":"6",
        "aaData": [
      [
          "1",
          "sameek",
          "sam",
          "sam",
          "[email protected]",
          "1",
          ""
      ],...
    3. Als u de kolom namen al in de html-deel, u hoeft toe te voegen sTitle.

    4. De mRender Functie heeft drie parameters:

      • gegevens = De gegevens voor deze cel, zoals gedefinieerd in mData
      • type = gegevenstype (kan worden genegeerd meestal)
      • vol = De volledige data-array voor deze rij.

    Zodat uw mRender functie ziet er als volgt uit:

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

    Vinden een werkende Plunker hier

    • Hoe zou je dit doen als u wilt toevoegen van meerdere knoppen op een enkele kolom?
    • Ik heb eigenlijk antwoordde deze. Wat je dan zou doen is een array van elke knop. return new array('<a class="btn btn-info btn-sm" href=#/' + full[0] + '>' + 'Edit' + '</a>', '<a class="btn btn-info btn-sm" href=#/' + full[0] + '>' + 'Delete' + '</a>');. Natuurlijk, het gebruik van new array() is afgekeurd (gebruik []), maar het idee staat.
    • Is het mogelijk om de knoppen in de pre-datatables-getransformeerd <html>? Mijn pagina is 6 kolommen, maar de meest rechtse 2 statische knoppen. Toen ik met elk van hen per rij, dan is het gebruik van server-side om een array van JSON objecten met 4 sleutel / waarde-paren, de HTML-toont de 2 knoppen in het begin, maar direct daarna verbergt ze.
  2. 8

    een kijkje nemen hier… dit was zeer behulpzaam zijn 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 ] );
        } );
    } );
  3. 5
    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;
                }},
        ],
        }
    }
    • Bij het beantwoorden van een vraag, moet u een toelichting geven samen met u een oplossing, eerder dan enkel het plaatsen van de code. Dit zal het antwoord nuttiger om de originele poster, evenals anderen die kunnen vinden op deze vraag.
    • Geweldig, ik denk dat deze benadering heeft meer zin dan de andere. Toch, ik ben ervaren beetje moeite met het aansluiten van een JS-functie.
  4. 1

    Ik bijdragen met mijn instellingen voor de knoppen: bekijken, bewerken en verwijderen.
    De laatste kolom heeft gegevens: null
    Aan het einde met de eigenschap defaultContent is toegevoegd een tekenreeks die HTML-code. En aangezien het de laatste kolom is aangegeven met de index -1 door middel van de doelen eigendom wanneer vermelding 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 beschrijving van de afbeelding hier

  5. 0

    mijn recept:

    datatable verklaring:

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

    evenementen:

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

    goed, ik heb net toegevoegd button in de gegevens.
    Bijvoorbeeld,
    ik moet de code zoals deze:

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

    En, in message, ik toegevoegd knop zoals deze : [blah, blah ... "<button>Click!</button>"] en … het werkt!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *