如何使用渲染功能在数据表中添加json数组

Question

I want to append json array into one popover attribute called data-content. I am using jQuery DataTables plugin to perform UI functionalities. Using data variable table is populated with the data.

How could I insert titleDescription array from data variable into the attribute name called as data-content inside a tag in js , check my fiddle and go to datatable function there inside columnDefs there is render function. In that function I have return and append a tag, there only I have to append titleDescription array.

Check this JSFiddle for demonstration.

Answer 1

You can use the row attribute, and have the data in a non visible column. Check the example 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 ] }
        ]
    } );
} );

That would do the trick.

Answer 2

You just need to add another column at the last of each row then you can access it from row like this

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>';                  
}

Here is working fiddle

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

Answer 3

I'm not sure what library you were using for your pop over so I used tooltipster seeing as you had jQuery already for the DataTable. Your data didn't have everything you needed either so I've altered it a wee bit:

$(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();
    }
  });
});

Working JSFiddle . Hope that helps!