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

Question

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

我试过代码:

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

Answer 1

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

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

Answer 2

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

Answer 3

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