レンダリング関数を使用してdatatableにjson配列を追加する方法

Question

json配列をdata-contentという1つのpopover属性に追加したいとします。 jQuery DataTablesプラグインを使用してUI機能を実行しています。 data変数テーブルを使用すると、データが入力されます。

はrender機能がありますどのように私はバイオリンをチェックし、jsの中でdata-contenta内側にタグと呼ばれる属性名にdata変数からtitleDescription配列を挿入でき、columnDefsの内側にあったDataTableの機能にアクセスしてください。その機能では、私は返信して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 ] } 
     ] 
    }); 
}); 

を確認してください。あなただけの、あなたはここでは、この

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

のような行からアクセスすることができ、各行の最後に別の列を追加する必要が

Answer 2

は私はありませんフィドル

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作業を。希望が助けてくれる！