Javascript 如何在datatable中的每一行上添加按钮？

我是数据表的新手。我想在每一行添加编辑和删除按钮（如下图所示）

我尝试了以下代码：

测试.cfm

用户ID
名称
用户名
帕索德
电子邮件
活跃的
命令

$（文档）.ready（函数（）{
var oTable=$（“#myDataTable”）.dataTable({
//“bServerSide”：正确，
“sAjaxSource”：“fetchUserData.cfm”，
“bProcessing”：正确，
“sPaginationType”：“完整编号”，
“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”：空，
“可移植”：错误，
“mRender”：函数（o）{返回“”；}
}
]
});
} );

fetchUserData.cfm

{
“aaData”：[
[
"1",
“sameek”，
“山姆”，
“山姆”，
"sameek@test.com",
"1",
""
],
[
"2",
“阿伦·辛格”，
“阿伦”，
“阿伦”，
"arunsingh@test.com",
"0",
""
],
[
"9",
“s”，
“sam3”，
“sam3”，
"ss@s.com",
"0",
""
],
[
"10",
“sameek mishra”，
“sam56”，
“山姆”，
"same@s.com",
"0",
""
],
[
"11",
“纳伦德拉·库马尔”，
“纳伦德拉”，
“导航”，
"sa@sa.com",
"1",
""
],
[
"12",
“测试”，
“测试”，
“测试”，
"test2@test.com",
"1",
""
]
]
}

基本上，您的代码是正常的，这是正确的方法。无论如何，有一些误解：

fetchUserData.cfm不包含键/值对。因此，在mData中寻址键是没有意义的。只需使用

mData[index]

dataTables希望从服务器端获得更多信息。至少您应该告诉datatables您的服务器端总共有多少项以及有多少项被过滤。 我只是把这些信息硬编码到你的数据中。您应该从服务器端脚本中的计数中获得正确的值

{
 "iTotalRecords":"6",
 "iTotalDisplayRecords":"6",
  "aaData": [
[
    "1",
    "sameek",
    "sam",
    "sam",
    "sameek@test.com",
    "1",
    ""
],...

如果已经在html部分中设置了列名，则不需要添加缝合线

mRender函数采用三个参数：

• 数据=此单元格的数据，如mData中所定义
• type=数据类型（大多数情况下可以忽略）
• full=此行的完整数据数组

因此，您的mRender函数应该如下所示：

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

“mRender”：函数（数据、类型、完整）{
返回“”；
}

---

找到一个可以工作的打捞器

看看这里。。。这对我很有帮助

$（文档）.ready（函数（）{
变量表=$（“#示例”）。数据表（{
“ajax”：“data/arrays.txt”，
“columnDefs”：[{
“目标”：-1，
“数据”：空，
“默认内容”：“单击！”
} ]
} );
$（#示例tbody'）。在（'单击'，'按钮'，函数（）上）{
var data=table.row（$（this.parents（'tr'））.data（）；
预警（数据[0]+”的薪资为：“+数据[5]）；
} );
} );

我对按钮的设置进行了贡献：查看、编辑和删除。 最后一列包含以下数据：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
], 
//...

/。。。
栏目：[
{title:，“data”：null，defaultContent:'}，//Si pone da error al cambiar de paginas la column a index con numero de fila
{标题：“Id”，“数据”：“Id”，默认内容：“”，“可见”：false}，
{标题：“Nombre”，“数据”：“Nombre”}，
{标题：“阿佩利多”，“数据”：“阿佩利多”}，
{标题：“Documento”，“data”：“tipo_Documento.siglas”}，
{标题：“数字”，“数据”：“数字文档”}，
{标题：“Fec.Nac.”，格式：'dd/mm/yyyy'，“数据”：“fecha_nacimiento”}，//格式
{标题：“Teléfono”，“数据”：“telefono1”}，
{标题：“电子邮件”，“数据”：“电子邮件1”}
，{title:，“data”：null}
],
columnDefs：[
{
“可搜索”：错误，
“可订购”：错误，
“目标”：0
},
{ 
宽度：“3%”，
目标：0//la primer columna tendra una anchura del 20%德拉塔布拉
},
{
目标：-1、/-1是最后一列，0是第一列
数据：空，
默认内容：“”
},
{orderable:false，searchable:false，targets:-1}//Ultima columna no orderable para botone
], 
//...

我的食谱：

数据表声明：

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

var table=$（'#示例'）。数据表（{
数据：你的数据，
栏目：[
{数据：“id”}，
{数据：“名称”}，
{数据：“父”}，
{数据：“日期”}，
{data:“id”，render:function（数据、类型、行、元）{
返回类型=='显示'？
'' :
数据；
}},
],
}
}

嗯，我刚刚在数据中添加了

按钮。
例如
我应该这样编码：

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

在
消息中，我添加了如下按钮：
[blah，blah…”点击！
然后..它工作了！
看一看

$(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'           
        });       
    });

$（文档）.ready（函数（）{
$（'#datatable'）。datatable({
栏目：[
{'data'：'ID'}，
{'data'：'AuthorName'}，
{'data'：'TotalBook'}，
{'data'：'DateofBirth'}，
{“数据”：“职业”}，
{'data'：nul
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;
            }},
    ],
    }
}

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

$(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'           
        });       
    });