web-dev-qa-db-ja.com

JSONデータからDataTablesのレコードフィールドにリンクを作成したい

コミックストリップを作成するサイトのページのアーカイブとして使用するdataTablesテーブルを作成しています。そのアーカイブページで、コミックのタイトルをそのコミックストリップのページへのリンクにしたいのですが。

初期化：

    <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データ：

{ "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"]
] }

「タイトル1」や「タイトル4」などは、その漫画のページへのリンクになります。確かに、私はdataTablesを使ったチョップの方法をあまり持っていないので、ソリューションで明示的にしている可能性がある場合は、それをいただければ幸いです。

jsondatatables
15
Adam

fnRowCallbackオプションを使用する必要があります。 ドキュメント を参照してください。

$('#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;
        },
});
21
jcubic

mRender 関数を 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>';
       }
     }
   ]
});

後で列を追加するときに役立つ、行レベルでDOMを介して列を選択するのではなく、個々の列を列レベルでレンダリングする方法を指定できるため、これはより明確で、おそらくより保守しやすくなります。

24
a darren
$('#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;
        },
});
1
Sohib

最新バージョンを使用している場合v1.10.16使用できます render function コールバック。

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

レンダリング関数を変更しました。 dataは現在の列データのみを参照し、rowオブジェクトはデータの行全体を参照します。したがって、これを使用して、その行の他のデータを取得できます。

現在の列の値に基づいてリンクしたい場合は、

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

私がやろうとしていたことを達成するための答えを得ることができませんでした。

DisplayedColumnをdatatable列に表示したかったのですが、クリックするとリクエストとともにIDが送信されます。 ID列も表示したくありませんでした。

これが私がこれを達成した方法です：

columns: [
  { "data": "ID", "visible" : false },
  { "data": "DisplayedColumn" },
...
columnDefs: [ {
  targets: [1],
  "render": function (data, type, row, meta) {
     return '<a href="/Area/Controller/Action/' + row.ID + '">' + data + '</a>';
   }
}
...

悲しいことに、これは私にとって有効な答えを見つけるのが非常に困難でした。誰かに役立つことを願っています。

0
Spencer Sullivan

以下は、aaDataオブジェクト配列の特定の値を指定して、列セルの変更されたhtmlテキストを取得するために行ったことです。これは機能しますが、htmlマークアップが上記のようにjavascriptにあるため、恐ろしいと感じます。

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);
0
user206890