web-dev-qa-db-ja.com

列データをハイパーリンクとして作成します（dataTable JQUERY）

私は列をデータテーブルを持つハイパーリンクとして作成しようとしていますが、成功しません。

関数successCallback（responseObj）{

  $(document).ready(function() {
         $('#example').dataTable( {
        "data":responseObj ,
        "bDestroy": true,
        "deferRender": true ,
        "columns": [
                    { "data": "infomation" },
                    { "data": "weblink" },
                ]
  } );

  } );

}

ユーザーがクリックして別のページにリダイレクトできるように、リンクを表示し、その列にハイパーリンクであるWebリンクが必要です。 render を調べましたが、リンクに関する情報が少ないため、成功しません。

私もこれを調べました 例 しかし、それはあまり役に立ちませんでした。

jquerydatatablesdatatables-1.10
24
Undisputed007

つかいます - columns.render セル​​のコンテンツを動的に生成するAPIメソッド。

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

            return data;
         }
      } 
   ]
});

コードとデモンストレーションについては この例 をご覧ください。

53
Gyrocode.com
    $('#example').dataTable( {
  "columnDefs": [ {
    "targets": 0,
    "data": "download_link",
    "render": function ( data, type, full, meta ) {
      return '<a href="'+data+'">Download</a>';
    }
  } ]
} );

ドキュメント から。それは非常に明確で分かりやすいですが、あなたが理解していないことは具体的に何ですか？どのようなエラーが表示されますか？

より完全な例については、 here を参照してください

7
ozz

他の列データに基づいてリンクを追加する場合は、以下のアプローチを使用できます。

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

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

7
Adarsh Madrecha