Просмотр изображений или изображений внутри JQuery DataTable

Ответ 1

[edit: обратите внимание, что в следующем коде и объяснении используется предыдущий API DataTables (1.9 и ниже?); он легко переводится в текущий API (в большинстве случаев просто вырезать венгерскую нотацию (например, "fnRowCallback" просто становится "rowCallback" ), но я еще не сделал этого. Обратная совместимость все еще на месте, я полагаю, но вы должны искать возможные соглашения, если это возможно]

Оригинальный ответ следует:

Что говорит Даниил, правда, но не обязательно говорит, как это делается. И есть много способов. Вот основные из них:

1) Источник данных (сервер или другой) предоставляет полный тег изображения как часть набора данных. Не забывайте избегать любых символов, которые нужно экранировать для действительного JSON

2) Источник данных предоставляет одно или несколько полей необходимой информации. Например, поле "ссылка на изображение" имеет только часть 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) Как и выше, но вместо добавления целого тега вы просто обновляете класс с изображением в качестве фона. Вы сделали бы это для изображений, которые являются повторяющимися элементами, а не одноразовыми или уникальными частями данных.

Ответ 2

Вы имеете в виду изображение внутри столбца таблицы?

Да, просто поместите тег html-изображения

как это

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

вместо того, чтобы помещать данные (некоторая строка) в столбец, просто поместите вышеуказанный тег html....

Ответ 3

да, простой способ (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>