web-dev-qa-db-ja.com

Jquery DataTable内の画像または画像を表示する

DataTables（http://datatables.net/）の行に画像または画像を配置することが可能かどうか、またそれをどのように実行できるかを知っていてもよいですか？

datatablesimage
15
Anderson Karu

[編集：次のコードと説明では、以前のDataTables API（1.9以前？）を使用しています。現在のAPIに簡単に変換できます（ほとんどの場合、ハンガリー語の表記を破棄します（たとえば、「fnRowCallback」は単に「rowCallback」になります））が、まだそうしていません。後方互換性はまだあると思いますが、可能な場合は新しい規則を探します]

元の返信は次のとおりです。

ダニエルの言うことは本当ですが、それがどのように行われたかを必ずしも言うわけではありません。そして、多くの方法があります。主なものは次のとおりです。

1）データソース（サーバーなど）は、データセットの一部として完全なイメージタグを提供します。有効なJSONにエスケープする必要がある文字をエスケープすることを忘れないでください

2）データソースは、1つ以上のフィールドに必要な情報を提供します。たとえば、「イメージリンク」というフィールドには、Images/PictureName.png部分。次に、fnRowCallbackでこのデータを使用してイメージタグを作成します。

"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
  var imgLink = aData['imageLink']; // if your JSON is 3D
  // var imgLink = aData[4]; // where 4 is the zero-Origin column for 2D

  var imgTag = '<img src="' + imgLink + '"/>';
  $('td:eq(4)', nRow).html(imgTag); // where 4 is the zero-Origin visible column in the HTML

  return nRow;
}

3）上記と同様ですが、タグ全体を追加するのではなく、画像を背景として持つクラスを更新するだけです。これは、1回限りのデータや一意のデータではなく、繰り返し要素である画像に対して行います。

15
Greg Pettit

はい、簡単な方法（Jquery Datatable）

    <script>
        $(document).ready(function () {
            $('#example').dataTable({
                "processing": true, // control the processing indicator.
                "serverSide": true, // recommended to use serverSide when data is more than 10000 rows for performance reasons
                "info": true,   // control table information display field
                "stateSave": true,  //restore table state on page reload,
                "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]],    // use the first inner array as the page length values and the second inner array as the displayed options
                "ajax":{
                    "url": "@string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"))/Home/AjaxGetJsonData",
                    "type": "GET"
                },
                "columns": [
                    { "data": "Name", "orderable" : true },
                    { "data": "Age", "orderable": false },
                    { "data": "DoB", "orderable": true },
                    {
                        "render": function (data, type, JsonResultRow, meta) {
                            return '<img src="Content/'+JsonResultRow.ImageAddress+'">';
                        }
                    }
                ],
                "order": [[0, "asc"]]
            });
        });
    </script>

enter image description here

12
Arun Prasad E S

テーブルの列内の画像ですか？

はい、html画像タグを配置するだけです

このような

<img src="Images/PictureName.png">

データ（文字列）を列に配置する代わりに、上記のhtmlタグを配置するだけです。

7
Daniel

Asp.net core DataTables次のコードは、WWWrootのフォルダーとDBフィールドImagePathのパスから画像を取得します

{
   "data": "ImagePath",
   "render": function (data) {
       return '<img src="' + data + '" class="avatar" width="50" height="50"/>';
       }
 }
0
R J