Question

我想将json数组附加到一个名为data-content的popover属性中。我正在使用jQuery DataTables插件来执行UI功能。使用data变量表填充数据。

如何将titleDescription变量中的data数组插入js中data-content标记内的a名称中的属性名称，检查我的小提琴并转到那里的数据表函数在columnDefs内，有render个函数。在该函数中，我返回并附加a标记，只有我必须附加titleDescription数组。

选中此JSFiddle进行演示。

Answer 1

您可以使用row属性，并将数据放在不可见的列中。检查示例 https://datatables.net/examples/advanced_init/column_render.html

$(document).ready(function() {
    $('#example').DataTable( {
        "columnDefs": [
            {
                // The `data` parameter refers to the data for the cell (defined by the
                // `data` option, which defaults to the column being worked with, in
                // this case `data: 0`.
                "render": function ( data, type, row ) {
                    return data +' ('+ row[3]+')';
                },
                "targets": 0
            },
            { "visible": false,  "targets": [ 3 ] }
        ]
    } );
} );

那就可以了。

Answer 2

您只需要在每行的最后一行添加另一列，然后就可以从此行

中访问它

render : function(data, type, row) {      
   return '<span class="favlist-icon"></span><span class="immediate-attention-icon"> </span> <span class="docx-name-list-link"> <a class="apopoverdata" href="#" data-content="'+row[4]+'" rel="popover" >'+data+'</a></span>';                  
}

这是工作小提琴

https://jsfiddle.net/2cn4b8bz/4/

Answer 3

我不确定您使用哪个库进行弹出，因此我使用了tooltipster，因为您已经为DataTable使用了jQuery。您的数据并不具备您需要的所有内容，因此我对其进行了改动：

$(function() {
  $('#documentListing-data').DataTable({
    data: json.documentAll.document,
    pageLength: 10,
    columns:[
        {
        "data": "documentTitle",
        "title": "Name",
        "render": (data, type, row) => '<a href="' + row.documentUrl + '" class="tooltip" title="' + row.titleDescription + '">' + data + '</a>',
      },
        {
        "data": "category",
        "title":"Category",
        "render": (data, type, row) => data.map((k, v) => k.trim()).join(", "),
      },
        {
        "data": "publishedDate",
        "title":"Published Date"
      },
        {
        "data": "lastUpdatedDate",
        "title": "Last Updated Date"
      },
    ],
    "drawCallback": function(settings) {
      $('.tooltip').tooltipster();
    }
  });
});

工作JSFiddle。希望有所帮助！

如何使用render函数在数据表中追加json数组

3 个答案: