Chcę utworzyć łącza w polach rekordów w DataTables z danych JSON

Question

Tworzę tabelę dataTables do użycia jako archiwum stron witryny, która tworzy komiks. Na tej stronie archiwum chciałbym, aby tytuł komiksu był linkiem do strony tego komiksu.

Inicjalizacja:

<script type="text/javascript" charset="utf-8"> 
      $(document).ready(function() { 
      $('#example').dataTable({ 
      "bProcessing": true, 
      "sAjaxSource": "archive/archive.txt" 
    }); 
}); 

     </script> 

HTML:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
    <thead> 
     <tr> 
      <th width="20%">Author</th> 

      <th width="25%">Title</th> 
      <th width="25%">Episode</th> 
      <th width="15%">Date</th> 
      <th width="15%">Tags</th> 
     </tr> 
    </thead> 
    <tbody> 


    </tbody> 

</table> 

JSON danych:

{ "aaData": [ 
    ["Bob","Title One","Episode 1","9/30/2010","tag1,tag2,tag3"], 
    ["Bob","Title One","Episode 2","10/2/2010","tag1,tag2,tag3"], 
    ["Bob","Title One","Episode 3","10/4/2010","tag1,tag2,tag3"], 
    ["Bob","Title Four","Episode 1","10/8/2010","tag1,tag2,tag3"], 
    ["Bob","Title Five","Episode 1","10/11/2010","tag1,tag2,tag3"], 
    ["Bob","Title Six","Episode 1","10/12/2010","tag1,tag2,tag3"], 
    ["Kevin","Title Seven","Episode 1","10/15/2010","tag1,tag2,tag3"], 
    ["Kevin","Title Eight","Episode 1","10/17/2010","tag1,tag2,tag3"], 
    ["Kevin","Title Eight","Episode 2","10/20/2010","tag1,tag2,tag3"], 
    ["Kevin","Title Ten","Episode 1","10/22/2010","tag1,tag2,tag3"], 
    ["Kevin","Title Eleven","Episode 1","10/23/2010","tag1,tag2,tag3"], 
    ["Kevin","Title Twelve","Episode 1","10/24/2010","tag1,tag2,tag3"] 
] } 

Gdzie "Tytuł One" lub "Tytuł Four" itp, będzie link do strony strona tego komiksu. Trzeba przyznać, że nie mam zbyt wiele na temat kotletów z tabelami danych, więc jeśli dobrze zrozumiesz w swoim rozwiązaniu, zostanie to docenione.

Answer 1

powinieneś użyć opcji fnRowCallback zobacz documentation.

Answer 2

Poniżej przedstawiłem, co zrobiłem, aby uzyskać zmieniony tekst HTML w komórce kolumny, biorąc pod uwagę pewną wartość w tablicy obiektów aaData. Działa to, ale czuje się okropnie, ponieważ znaczniki html są w javascript jak wyżej.

var dataTableMeta = { "bProcessing": true, 
      "bServerSide": true, 
      "sAjaxSource": url 
           , "aoColumns": aoColumns 
           , "fnServerData": function (sSource, aoData, fnCallback) { 
            $.ajax({ "dataType": 'json', "type": "POST", "url": sSource, "data": aoData, "success": fnCallback, 
             'dataFilter': function (data, type) { 
              var jsObject = jQuery.parseJSON(data); 
              for (var i = 0; i < jsObject.aaData.length; i++) { 
               jsObject.aaData[i].CaseID = '<a href="" >' + jsObject.aaData[i].CaseID + '</a>'; 
              } 
              var jsonString = JSON.stringify(jsObject); 
              return jsonString; 
             } 
            }); 
           } 
     }; 

     $('#caseSearchTable').dataTable(dataTableMeta); 

Answer 3

Można też użyć funkcji mRender z aoColumnDefs:

$('#example').dataTable({ 
    "bProcessing": true, 
    "bServerSide": true, 
    "sAjaxSource": "archive/archive.txt", 
    "aoColumnDefs": [    
    { 
     "aTargets": [ 2 ], // Column to target 
     "mRender": function (data, type, full) { 
     // 'full' is the row's data object, and 'data' is this column's data 
     // e.g. 'full[0]' is the comic id, and 'data' is the comic title 
     return '<a href="/comics/' + full[0] + '">' + data + '</a>'; 
     } 
    } 
    ] 
}); 

To jest bardziej wyraźny i prawdopodobnie bardziej linkujących, ponieważ można określić, w jaki sposób poszczególne kolumny renderowanie na poziomie kolumny, zamiast wybranie ich poprzez DOM na poziomie wiersza, co pomaga, gdy dodajesz kolumny później.

Answer 4

$('#example').dataTable({ 
    "bProcessing": true, 
    "bServerSide": true, 
    "sAjaxSource": "archive/archive.txt" 
    "fnRowCallback": function(nRow, aData, iDisplayIndex) { 
      $('td:eq(2)', nRow).html('<a href="view.php?comic=' + aData[2] + '">' + 
       aData[2] + '</a>'); 
      return nRow; 
     }, 
}); 

Answer 5

Jeśli korzystasz z najnowszej wersji v1.10.16 mogą korzystać render function zwrotnego.

$('#example').dataTable({ 
    "data": responseObj, 
    "columns": [ 
     { "data": "information" }, 
     { 
     "data": "weblink", 
     "render": function(data, type, row, meta){ 
      if(type === 'display'){ 
       data = '<a href="' + row.myid + '">' + data + '</a>'; 
      } 
      return data; 
     } 
     } 
    ] 
}); 

Właśnie zmienił czynią funkcję. data odnosi się tylko do bieżących danych kolumny, a obiekt row odnosi się do całego rzędu danych. Dlatego możemy użyć tego, aby uzyskać wszelkie inne dane dla tego wiersza.

Jeśli przeciwnym razie możesz się łącza na podstawie wartości bieżącej kolumny, można użyć

if(type === 'display'){ 
    data = '<a href="' + data + '">' + data + '</a>'; 
}