數據表使用json自身中包含的href使單元可點擊

Question

我使用引導數據表來對我的json進行簡單的表示。我用這JSON養活數據表：

{ 
    "manualList":[ 
     { 
     "number":"WFC2062/05", 
     "umtype":"PT,SI", 
     "lang":"DE", 
     "cdnlink":"http://medias.bsh-partner.com/Documents/5550009686_A.pdf", 
     "version":"A", 
     "filelenght":1002357, 
     "urlstatus":true 
     }, 
     { 
     "number":"WFC2062/05", 
     "umtype":"II,IU", 
     "lang":"DE", 
     "cdnlink":"http://medias.bsh-partner.com/Documents/5550009685_B.pdf", 
     "version":"B", 
     "filelenght":6377032, 
     "urlstatus":true 
     }, 
     { 
     "number":"WFC2062/06", 
     "umtype":"PT,SI", 
     "lang":"DE", 
     "cdnlink":"http://medias.bsh-partner.com/Documents/5550009686_A.pdf", 
     "version":"A", 
     "filelenght":1002357, 
     "urlstatus":true 
     }, 
     { 
     "number":"WFC2062/06", 
     "umtype":"II,IU", 
     "lang":"DE", 
     "cdnlink":"http://medias.bsh-partner.com/Documents/5550009685_B.pdf", 
     "version":"B", 
     "filelenght":6377032, 
     "urlstatus":true 
     }, 
     { 
     "number":"WFC2062/07", 
     "umtype":"II,IU", 
     "lang":"DE", 
     "cdnlink":"http://medias.bsh-partner.com/Documents/9000029228_C.pdf", 
     "version":"C", 
     "filelenght":5918430, 
     "urlstatus":true 
     }, 
     { 
     "number":"WFC2062/08", 
     "umtype":"II,IU", 
     "lang":"DE", 
     "cdnlink":"http://medias.bsh-partner.com/Documents/9000029228_C.pdf", 
     "version":"C", 
     "filelenght":5918430, 
     "urlstatus":true 
     } 
    ], 
    "servicetype":"vibki", 
    "errormessage":null, 
    "warning":null 
} 

數據是JSON格式，我想表明與列數的超鏈接，所以我的目標是一個manualList數的文本和超鏈接manuaList的cdnlink的添加一列。但我不知道如何在一列內引用它們。

這裏是我的腳本，創建數據表：

$(document).ready(function() { 
    var link = localStorage.getItem("link_url"); 
    var table = $('#example').DataTable({ 
     "ajax": { 
      "url": link, 
      "dataSrc": "manualList" 
     }, 
     "columns": [ 
      { 
       "data": "cdnlink", 
       "render" : function(data, type, row, meta){ 
        if(type === 'display'){ 
         return $('<a>') 
          .attr('href', data) 
          .text() 
          .wrap('<div></div>') 
          .parent() 
          .html(); 

        } else { 
         return data; 
        } 
       } 
      }, 
      { "data": "lang" } 
     ] 
    }); 
    $('#example') 
     .removeClass('display') 
     .addClass('table table-striped table-bordered'); 
}); 

LINK_URL所賜，我已經上面提到的Ajax響應，所以你可以這個例子JSON評估響應。

下面是簡單的HTML，包括數據表爲例：

<div class="container"> 

    <table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
     <tr> 
      <th>Number</th> 
      <th>Language</th> 
     </tr> 
     </thead> 
     <tfoot> 
     <tr> 
      <th>Number</th> 
      <th>Language</th> 
     </tr> 
     </tfoot> 
    </table></div> 

我希望有人能幫助我，很多預先感謝您的答覆！

Answer 1

我檢查下面的鏈接，使對數據表列渲染：

https://datatables.net/examples/advanced_init/column_render.html

所以，我創建了一個更具隱蔽性柱把cdnlink那裏，從列改爲columnDefs如：

$(document).ready(function() { 
    var link = localStorage.getItem("link_url"); 
    var table = $('#example').DataTable({ 
     "ajax": { 
      "url": link, 
      "dataSrc": "manualList" 
     }, 
     "columnDefs": [ 
      { 
       "data" : "cdnlink", 
       "targets" : 2 
      } 
      , 
      {// 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`. 
       "data" : "number", 
       "render": function (data, type, row) { 
        return $('<a>') 
         .attr({target: "_blank",href: row.cdnlink}) 
         .text(data) 
         .wrap('<div></div>') 
         .parent() 
         .html(); 
       }, 
       "targets": 0 
      }, 
      { 
       "data" : "lang", 
       "targets" : 1 
      }, 
      { "visible": false, "targets": [ 2 ] } 
     ] 
    }); 
    $('#example') 
     .removeClass('display') 
     .addClass('table table-striped table-bordered'); 
}); 

我也是在HTML文件中添加的列：

<div class="container"> 

    <table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
     <tr> 
      <th>Number</th> 
      <th>Language</th> 
      <th>Link</th> 
     </tr> 
     </thead> 
     <tfoot> 
     <tr> 
      <th>Number</th> 
      <th>Language</th> 
      <th>Link</th> 
     </tr> 
     </tfoot> 
    </table></div> 

然後它就像魅力一樣。