如何使用渲染函數在數據表中追加json數組

我想將json數組附加到一個名爲data-content的popover屬性中。我正在使用jQuery DataTables插件來執行UI功能。使用data變量表填充數據。如何使用渲染函數在數據表中追加json數組

我怎麼能插入來自data可變titleDescription陣列成JS稱爲data-content內a標記的屬性名稱，檢查我的小提琴，到數據表功能有內部columnDefs有render功能。在那個函數中，我有返回並追加a標記，那裏只有我必須追加titleDescription數組。

檢查此JSFiddle進行演示。

來源

2016-08-25 angu manikandan

您可以使用行屬性，並將數據放在不可見的列中。檢查例子 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 ] } 
     ] 
    }); 
});

那會做的伎倆。

來源

2016-08-25 14:04:33

你只需要在最後每行的另一列添加，那麼你可以從一行訪問它像這樣

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/

來源

2016-08-25 14:27:47

小提琴不工作 –

我已經更新了小提琴鏈接檢查現在 –

當像這樣構建HTML時，您需要在諸如「<', '>」這樣的'row [4]'中編碼HTML實體。如果'titleDescription'包含這些符號，它將打破標記。否則，這是一個正確的答案。 –

我不是確定你使用的是什麼庫，所以我使用tooltipster，因爲你已經有了jQuery的DataTable。您的數據沒有你所需要的一切要麼所以我已經改變了它一丁點：

$(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。希望有所幫助！

來源

2016-08-26 15:52:42 annoyingmouse

如何使用渲染函數在數據表中追加json數組

回答

相關問題