如何在数据表的每一行上添加按钮? [英] How do I add button on each row in datatable?

问题描述

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

I am newbie for DataTables. I want to add button on each row for edit and delete(like below image)

我尝试过代码:

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",
        "[e-mail]",
        "1",
        ""
    ],
    [
        "2",
        "arun singh",
        "arun",
        "arun",
        "[e-mail]",
        "0",
        ""
    ],
    [
        "9",
        "s s",
        "sam3",
        "sam3",
        "[e-mail]",
        "0",
        ""
    ],
    [
        "10",
        "sameek mishra",
        "sam56",
        "sam",
        "[e-mail]",
        "0",
        ""
    ],
    [
        "11",
        "narendra kumar",
        "narendra",
        "nav",
        "[e-mail]",
        "1",
        ""
    ],
    [
        "12",
        "test test",
        "test",
        "test",
        "[e-mail]",
        "1",
        ""
    ]
]
 }

推荐答案

基本上你的代码没问题，这是正确的方法.总之，有一些误解:

Basically your code is okay, thats the right way to do this. Anyhow, there are some misunderstandings:

1. fetchUserData.cfm 不包含键/值对.所以在 mData 中寻址键是没有意义的.只需使用 mData[index]

dataTables 需要您的服务器端提供更多信息.至少你应该告诉数据表你的服务器端总共有多少项目以及有多少项目被过滤.我只是将此信息硬编码到您的数据中.您应该从服务器端脚本中的计数中获得正确的值.

dataTables expects some more info from your serverside. At least you should tell datatables how many items in total are on your serverside and how many are filtered. I just hardcoded this info to your data. You should get the right values from counts in your server sided script.

{
 "iTotalRecords":"6",
 "iTotalDisplayRecords":"6",
  "aaData": [
[
    "1",
    "sameek",
    "sam",
    "sam",
    "[e-mail]",
    "1",
    ""
],...

如果已经在html部分设置了列名，则不需要添加sTitle.

If you have the column names already set in the html part, you don't need to add sTitle.

mRender 函数接受三个参数:

The mRender Function takes three parameters:

• data = 此单元格的数据，如 mData 中所定义
• type = 数据类型(大部分可以忽略)
• full = 该行的完整数据数组.

所以你的 mRender 函数应该是这样的:

So your mRender function should look like this:

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

在此处

这篇关于如何在数据表的每一行上添加按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！