datatables – 如何在datatable中的每一行添加按钮

我是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>

<script>
 
$(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",{ "mData": "IsActive","sTitle": "IsActive",{
            "mData": null,"bSortable": false,"mRender": function (o) { return '<a href=#/' + o.userid + '>' + 'Edit' + '</a>'; }
        }
    ]
});

});

</script>

fetchUserData.cfm

{
"aaData": [
    [
        "1","sameek","sam","sameek@test.com","1",""
    ],[
        "2","arun singh","arun","arunsingh@test.com","0",[
        "9","s s","sam3","ss@s.com",[
        "10","sameek mishra","sam56","same@s.com",[
        "11","narendra kumar","narendra","nav","sa@sa.com",[
        "12","test test","test","test2@test.com",""
    ]
]
 }

请帮帮我。

谢谢

解决方法

基本上你的代码是可以的，这是正确的方法。无论如何，有一些误会：

> fetchUserData.cfm不包含键/值对。所以在mData中解密密钥是没有意义的。只需使用mData [index]
> dataTables需要您的服务器端的一些更多信息。至少你应该告诉数据库，总共有几个项目在你的服务器端，有多少个被过滤。
我刚刚将这个信息硬编码到你的数据。您应该从服务器端脚本中的计数中获取正确的值。

{
 "iTotalRecords":"6","iTotalDisplayRecords":"6","aaData": [
[
    "1",""
],...

>如果您在html部分中已经设置了列名，则不需要添加sTitle。
> 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 here

datatables – 如何在datatable中的每一行添加按钮

解决方法

猜你在找的jQuery相关文章