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

Question

Могу ли я узнать, можно ли поместить рисунки или изображения в строки таблиц данных (http://datatables.net/) и как это сделать?

Answer 1

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

Answer 2

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

Answer 3

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

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

как это

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

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