Question

我正在尝试在我的应用程序中使用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
   }
]

我想要的是显示一个名为＆＃39;选择＆＃39;的按钮。在每一行上点击必须选择的行。但是我无法设置按钮。

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＆gt; = 1.10，则需要阅读columns.data reference，因为它们会更改sDefaultContent defaultContent。阅读文档here

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

1 个答案: