如何在jquery数据表的每一行上添加一个删除按钮答案

【问题标题】：How to add a delete button on each row of jquery datatables如何在jquery数据表的每一行上添加一个删除按钮
【发布时间】：2015-03-13 17:30:37
【问题描述】：

我正在尝试在我的应用程序中使用使用 ajax 源数据的 jquery 数据表。

我的表格 html 将是

<table id="dynaFormVersionTable" class="table table-striped table-hover dt-responsive" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Form Id</th>
                <th>Form Title</th>
                <th>Version</th> 
                <th>Created Date</th>   
                <th>Modified Date</th>
                <th>Created By</th>
                <th>Select</th>

            </tr>
        </thead>
     </table>

我正在使用 ajax 进行以下调用，以使用 json 形式的所需数据加载数据表

$('#dynaFormVersionTable').dataTable({

        "ajax": {
                "url": "${rc.getContextPath()}/module/dynamic-forms/form-versions",
                type: "GET",
                data: {
                webcontentid: ${webcontentid},
                },
                "dataSrc":  "",
                },

        "columns":[
        {"data": "webContentDefinitionId"},
        {"data": "webContentTitle"},
        {"data": "formVersion"},
        {"data": "createdTime",
        "render": function (data) {
        var date = new Date(data);
        var month = date.getMonth() + 1;
        return  date.getDate() + "/" + (month.length > 1 ? month : "0" + month) + "/"  + date.getFullYear();
        }
        },
        {"data": "updatedTime",
        "render": function (data) {
        var date = new Date(data);
        var month = date.getMonth() + 1;
        return  date.getDate() + "/" + (month.length > 1 ? month : "0" + month) + "/"  + date.getFullYear();
        }
        },
        {"data": "userCreated"},
        {data: null ,
        "sClass" : "center",
        "sDefaultContent" : '<a href = "" class ="editor_edit">Select</a> '
        },
        ],

     });

json数据包含以下详细信息：

[
{  
      "dfWebContentDefinitionId":18,
      "webContentDefinitionId":800,
      "webContentTitle":"DFTest6-edt1",
      "webContentDesc":"DFTest6",
      "webContentKwd":"DFTest6",
      "webContentViewUrl":null,
      "webContentEditUrl":null,
      "webContentMediaUrl":"/files/doc-lib/2015/02/15/11/58/48/246/head/test.jpg",
      "webContentType":"content",
      "officeId":null,
      "createdTime":1426172671199,
      "updatedTime":1426172671199,
      "userCreated":"adm",
      "userModified":"adm",
      "webContentStatus":null,
      "webLinkType":null,
      "webContentId":0,
      "formVersion":3
   }
]

我正在尝试的是在每一行上显示一个名为“选择”的按钮，单击必须选择该行。但我无法设置按钮。

【问题讨论】：

我有点困惑：你想做什么？来自标题：添加删除按钮，来自帖子：选择行。你的意思是选择？

标签： jquery json ajax datatables

【解决方案1】：

很简单，就是在json中从服务器返回html，例如：

将您的列定义为任何其他列(I am omitting a lot of code)

"columns" : [
    //.....omitted code
   //your button column
   {data: "deleteButton", "sClass" : "center"}
]

稍后，在您的 json 数据中

[
{  
      //..omitted code
      "webContentId":0,
      "formVersion":3
      "deleteButton": "<a href=\"\" class=\"editor_edit\">Select</a>"
   }
]

另外，您需要查看Server-side processing 的文档，因为要返回的预期 JSON 数据需要一些参数才能正常工作。

您还应该查看Ajax sourced data 示例。使用 Firebug 等调试工具查看 ajax 请求。

现在，如果您使用 DataTables >=1.10，则需要阅读 columns.data reference，因为它们将 sDefaultContent 更改为 defaultContent。阅读文档here

【讨论】：