使用Jquery jTable在单元格中显示图像

时间:2013-08-11 17:42:51

标签: jquery html jquery-jtable

我正在使用JQuery jTable插件来显示我的表记录。

$(document).ready(function () {

        //Prepare jTable
        $('#PeopleTableContainer').jtable({
            title: 'Table of people',
            paging: true,
            pageSize: 2,
            sorting: true,
            defaultSorting: 'Name ASC',
            actions: {
                listAction: 'PersonActionsPagedSorted.php?action=list',
                createAction: 'PersonActionsPagedSorted.php?action=create',
                updateAction: 'PersonActionsPagedSorted.php?action=update',
                deleteAction: 'PersonActionsPagedSorted.php?action=delete'
            },
            fields: {
                PersonId: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                Name: {
                    title: 'Author Name',
                    width: '40%'
                },
                Age: {
                    title: 'Age',
                    width: '20%'
                },
                RecordDate: {
                    title: 'Record date',
                    width: '30%',
                    type: 'date',
                    create: false,
                    edit: false
                },
                Photo: {
                    title: 'Photo',
                    width: '50%',
                    type: 'img',
                    create: false,
                    edit: false
                }
            }
        });

        //Load person list from server
        $('#PeopleTableContainer').jtable('load');

    });

您可以看到的最后一列是Photo。我已将照片路径存储在mysql表的相应表中。我想在最后一栏中显示图像。这可以使用这个插件吗? 我正在用PHP开发它。

感谢。

1 个答案:

答案 0 :(得分:6)

这应该解决你的问题:

Photo: {
          title: "Photo",
          width: '50%',
          edit: false,
          create: false,
          display: function (data) {
                return '<img src=' + data.record.ImageURL + ' />';
           }
 }