【问题标题】:Render column function(data,type,full) on Jquery datatable with complex header not working在具有复杂标题的 Jquery 数据表上呈现列函数(数据、类型、完整)不起作用
【发布时间】:2017-06-02 08:00:50
【问题描述】:

我是 jquery 的新手,并试图从带有复杂标头的 json 响应设计数据表。

到目前为止,数据是根据要求填充的,但现在我想根据 json 数据或其他列数据更改同一数据表中的一些列数据。

在一个简单的 jquery 数据表中,使用 function(data,type,full) 渲染列的功能有助于通过编写 full[columnIndex] 来访问其他列,但在复杂的标题数据表上它不起作用并给出未定义的值.

请帮助我,让我知道我应该编写什么代码才能动态访问数据表的其他列。

这是我的代码:

$('#example').dataTable({
    "responsive": true,
    "aaData": data,
    "aoColumns": [{
            "sTitle": "EVENT ID",
            "defaultContent": "",
            "mData": "eventId",
            "render": function(val, type, full) {
                //alert("event id :: " + val + "  ::: " + full[0]+"  ::: "  );
                return '<td id=event>' + val + '</td>';
            }
        },
        { "mData": "ecid_1.ecid" },
        { "mData": "ecid_1.name" },
        { "mData": "ecid_1.address" },
        { "mData": "ecid_2.ecid" },
        { "mData": "ecid_2.name" },
        { "mData": "ecid_2.address" },
        {
            "sTitle": "EVENT DATE",
            "defaultContent": ""
        },
        {
            "defaultContent": "",
            "render": function(val, type, full) {
                var event = full[0];
                //data[0].eventId
                alert(event);
                if (val == "" || val == null) {
                    //alert('<input align="left" id="radio1" type="radio" name="action'+i+'" value="Approve">Approve</input><br/><input align="left" id="radio2" type="radio" name="action'+i+'" value="Reject">Reject</input>');
                    return '<input align="left" id="radio1" type="radio" name="action" value="Approve" onclick="updateEvent(&#39;' + event + '&#39;,&#39;' + full[1] + '&#39;,&#39;approve&#39;,&#39;' + full[4] + '&#39;,&#39;' + +'&#39;);">Approve</input><br/><input align="left" id="radio2" type="radio" name="action" value="Reject" onclick="updateEvent(&#39;' + event + '&#39;,&#39;' + full[1] + '&#39;,&#39;reject&#39;,&#39;' + full[4] + '&#39;,&#39;' + +'&#39;);">Reject</input>';
                } else {
                    return val;
                }
                //alert("action:::"+data);
            }
        },
        {
            "sTitle": "ACTION DATE",
            "defaultContent": ""
        },
        {
            "sTitle": "ACTION COMMENTS",
            "defaultContent": "",
            "render": function(data, type, full) {
                if (full[4] == "" || full[4] == null) {
                    //alert('<input align="left" id="radio1" type="radio" name="action'+i+'" value="Approve">Approve</input><br/><input align="left" id="radio2" type="radio" name="action'+i+'" value="Reject">Reject</input>');
                    return '<textarea  id="comment" type="text" name="comment" value"aaa"></textarea>';
                } else {
                    return '<textarea readonly style="background-color:#D3D3D3;"  id="comment" name="comment">' + data + '</textarea>';
                }
                //alert("action:::"+data);
            }
        },
        {
            "render": function(data, type, full) {
                var table = $('#example').DataTable();
                var rowIndex = $(this).closest('tr').index();
                //alert(full[2]);
                return '<a href="/MatchMergeAPI/jsp/details.jsp#someRoute?ecid1=' + full[1] + '&ecid2=' + full[2] + '&event=' + full[0] + '"><img src="/MatchMergeAPI/img/eventDetails.jpeg" alt="" style="width: 120px; height: 50px;" /></a>';
            }
        }
    ]
});

我的数据表现在看起来像这样:

您可以在哪里看到 ACTION 列,该列应该根据渲染功能提供一个单选按钮,但现在提供数据数组

【问题讨论】:

    标签: javascript jquery html datatables


    【解决方案1】:

    好的,经过多次尝试,我也找到了解决方案。 在 render function(data, type, full) 内部,我们得到了 full 内部的行数据数组,所以要获取任何一个列值,我们必须使用键从数组中实际获取它,并且键与json 对象。

    所以如果我想在任何其他列中获取 eventId,那么代码将如下所示:

           function(data,type,full){
             var eventId = full['eventId'];
             return eventId;
            }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-11-13
      • 1970-01-01
      • 2016-03-25
      • 1970-01-01
      • 2012-11-02
      • 2018-09-15
      • 1970-01-01
      • 2022-12-15
      相关资源
      最近更新 更多