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

Question

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

我的表格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形式的所需数据加载datatable

$('#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
   }
]

我正在尝试的是在每一行上显示一个名为'Select‘的按钮，并单击该按钮，在该按钮上必须选择该行。但是我不能设置按钮。

Answer 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