[英]How do I add button on each row in datatable?
我是 DataTables 的新手。 我想在每一行添加按钮进行编辑和删除(如下图)
我试过代码:
测试.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",
"sameek@test.com",
"1",
""
],
[
"2",
"arun singh",
"arun",
"arun",
"arunsingh@test.com",
"0",
""
],
[
"9",
"s s",
"sam3",
"sam3",
"ss@s.com",
"0",
""
],
[
"10",
"sameek mishra",
"sam56",
"sam",
"same@s.com",
"0",
""
],
[
"11",
"narendra kumar",
"narendra",
"nav",
"sa@sa.com",
"1",
""
],
[
"12",
"test test",
"test",
"test",
"test2@test.com",
"1",
""
]
]
}
基本上你的代码没问题,这是正确的方法。 总之,有一些误解:
fetchUserData.cfm 不包含键/值对。 所以在 mData 中寻址键是没有意义的。 只需使用mData[index]
dataTables 期望您的服务器端提供更多信息。 至少你应该告诉数据表你的服务器端总共有多少项目以及有多少项目被过滤。 我只是将此信息硬编码到您的数据中。 您应该从服务器端脚本中的计数中获得正确的值。
{ "iTotalRecords":"6", "iTotalDisplayRecords":"6", "aaData": [ [ "1", "sameek", "sam", "sam", "sameek@test.com", "1", "" ],...
如果已经在 html 部分设置了列名,则不需要添加 sTitle。
mRender 函数接受三个参数:
所以你的 mRender 函数应该是这样的:
"mRender": function(data, type, full) {
return '<a class="btn btn-info btn-sm" href=#/' + full[0] + '>' + 'Edit' + '</a>';
}
在这里找到一个工作的Plunker
看看这里...这对我很有帮助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 ] );
} );
} );
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;
}},
],
}
}
我贡献了我的按钮设置:查看、编辑和删除。 最后一列有 data: null 在属性 defaultContent 的末尾添加了一个字符串,表示 HTML 代码。 并且由于它是最后一列,因此在指示列时通过targets 属性用索引-1 指示。
//...
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
],
//...
我的食谱:
数据表声明:
defaultContent: "<button type='button'....
事件:
$('#usersDataTable tbody').on( 'click', '.delete-user-btn', function () { var user_data = table.row( $(this).parents('tr') ).data(); }
看一看。
$(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'
});
});
使用响应式数据表时,此解决方案不起作用
好吧,我只是在数据中添加了button
。 例如,我应该这样编码:
$(target).DataTable().row.add(message).draw()
而且,在message
,我添加了这样的按钮: [blah, blah ... "<button>Click!</button>"]
并且......它有效!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.