题 如何在数据表中的每一行添加按钮?


我是DataTables的新手。我想在每一行添加按钮进行编辑和删除(如下图所示)

enter image description here

我试过代码:

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

31
2018-03-18 06:28


起源




答案:


基本上你的代码没问题,这是正确的方法。无论如何,有一些误解:

  1. fetchUserData.cfm不包含键/值对。因此,在mData中解决密钥没有意义。只是用 mData[index]

  2. dataTables期望从您的服务器端获得更多信息。至少你应该告诉datatables你的服务器端总共有多少项目以及过滤了多少项目。 我刚刚将这些信息硬编码到您的数据中。您应该从服务器端脚本中的计数中获取正确的值。

    {
     "iTotalRecords":"6",
     "iTotalDisplayRecords":"6",
      "aaData": [
    [
        "1",
        "sameek",
        "sam",
        "sam",
        "sameek@test.com",
        "1",
        ""
    ],...
    
  3. 如果您已在html部分中设置了列名,则无需添加sTitle。

  4. mRender函数有三个参数:

    • data =此单元格的数据,如mData中所定义
    • type =数据类型(大多数可以忽略)
    • full =此行的完整数据数组。

所以你的mRender功能应如下所示:

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

找一个有效的Plunker 这里


29
2018-03-18 10:16



如果要将多个按钮添加到单个列,您将如何执行此操作? - ale10ander
我实际上回答了这个。你要做的是返回每个按钮的数组。 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>');。当然,新的array()的使用是不受欢迎的(使用[]),但这个想法是站立的。 - ale10ander
是否可以在预数据表转换中添加按钮 <html>?我的页面有6列,但最右边的2列是静态按钮。当我每行放置它们时,然后使用服务器端获取具有4个键值对的JSON对象数组,HTML在开头显示2个按钮,但随后立即隐藏它们。 - Kevin Meredith


看看这里......这对我很有帮助 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 ] );
    } );
} );

5
2017-09-25 14:47





我提供按钮的设置:查看,编辑和删除。 最后一列有数据: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
], 
//...

在此处输入图像描述


1
2018-04-11 22:29