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:
-
fetchUserData.cfm bevat geen sleutel/waarde-paren. Het heeft dus geen zin om sleutels in mData aan te spreken. Gebruik gewoon
mData[index]
-
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", "" ],...
-
Als je de kolomnamen al hebt ingesteld in het html-gedeelte, hoef je geen sTitle toe te voegen.
-
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 button
toegevoegd aan de gegevens.
Bijvoorbeeld,
ik zou als volgt moeten coderen:
$(target).DataTable().row.add(message).draw()
En in message
heb ik een knop als volgt toegevoegd: [blah, blah ... "<button>Click!</button>"]
en .. het werkt!