Xem hình ảnh hoặc hình ảnh bên trong Jquery DataTable

Question

Tôi có thể biết nếu có thể đưa hình ảnh hoặc hình ảnh vào các hàng của DataTables (http://datatables.net/) và làm cách nào để thực hiện nó?

Answer 1

[sửa: lưu ý rằng mã và giải thích sau đây sử dụng API DataTables trước đó (1.9 trở xuống?); nó dịch dễ dàng vào API hiện tại (trong hầu hết các trường hợp, chỉ cần mương ký hiệu Hungary ("fnRowCallback" chỉ trở thành "rowCallback"), nhưng tôi vẫn chưa làm như vậy, khả năng tương thích ngược vẫn ở vị trí tôi tin, nhưng bạn nên tìm kiếm các công ước mới hơn nếu có thể]

gốc trả lời sau:

---

gì Daniel nói là sự thật, nhưng không nhất thiết phải nói như thế nào nó được thực hiện Và có rất nhiều cách Dưới đây là những chính.. :

1) Nguồn dữ liệu (máy chủ hoặc cách khác) cung cấp thẻ hình ảnh hoàn chỉnh như một phần của tập dữ liệu. Đừng quên thoát khỏi bất kỳ nhân vật nào cần thoát cho JSON hợp lệ

2) Nguồn dữ liệu này cung cấp một hoặc nhiều trường có thông tin bắt buộc. Ví dụ: một trường có tên "liên kết hình ảnh" chỉ có phần Images/PictureName.png. Sau đó, trong fnRowCallback bạn sử dụng dữ liệu này để tạo một thẻ hình ảnh.

"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) Tương tự như trên, nhưng thay vì thêm toàn bộ thẻ, bạn chỉ cập nhật lớp có hình ảnh làm nền. Bạn sẽ làm điều này cho các hình ảnh được lặp đi lặp lại các yếu tố chứ không phải là một phần hoặc duy nhất của dữ liệu.

Answer 2

Bạn có nghĩa là một hình ảnh bên trong một cột của bảng?

Vâng, chỉ cần đặt thẻ hình ảnh html

như thế này

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

thay vì đưa dữ liệu (một số string) vào một cột chỉ cần đặt thẻ html trên ....

Answer 3

có, cách đơn giản (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>