Image not displaying in jtable?

Question

I am using jtable from jtable.org. The problem is that I have an image stored in my database(MySQL) and I want to display that image on webpage using jtable with other columns. All other columns are displaying correctly but the image is not displaying. This is my HTML code:

    <html>
  <head>

    <link href="themes/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
    <link href="Scripts/jtable/themes/lightcolor/blue/jtable.css" rel="stylesheet" type="text/css" />

    <script src="scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script src="Scripts/jtable/jquery.jtable.js" type="text/javascript"></script>

  </head>
  <body>
    <div id="PeopleTableContainer" style="width: 960px;"></div>
    <script type="text/javascript">

        $(document).ready(function () {

            //Prepare jTable
            $('#PeopleTableContainer').jtable({
                title: 'Table of people',
                actions: {
                    listAction: 'PersonActions.php?action=list',
                    updateAction: 'PersonActions.php?action=update'

                },
                fields: {
                    PersonId: {
                        key: true,
                        create: false,
                        edit: false,
                        list: false
                    },
                    Name: {
                        title: 'Product',
                        width: '20%'
                    },
                    SellingPrice: {
                        title: 'Selling Price',
                        width: '15%',
                    },
                    CostPrice: {
                        title: 'Cost Price',
                        width: '15%',
                    },
                    Remarks: {
                        title: 'Remarks',
                        width: '15%',
                    },
                    Stock: {
                        title: 'Stock',
                        width: '15%',
                    },
                    Pic: {
                        title: 'Image',
                        width: '50%',
                        edit: false
                    }
                }
            });

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

        });

    </script>

  </body>
</html>

And This is my SELECT query with other functions:

//Get records from database

$result = mysql_query("SELECT * FROM people;");

    //Add all records to an array
    $rows = array();
    while($row = mysql_fetch_array($result))
    {
        $rows[] = $row;
    }

    //Return result to jTable
    $jTableResult = array();
    $jTableResult['Result'] = "OK";
    $jTableResult['Records'] = $rows;
    print json_encode($jTableResult);

score 0 · Answer 1 · edited May 23 '17 at 10:31

When I faced the same problem the following link helped: Dynamically add images to JTable cells

Sorry, I wish I still had my old code and I know giving links is frowned upon. Maybe anyone else stumbling onto this page may find it useful.

The fact that the image is from your database shouldn't make a difference unless you aren't properly retrieving it. Try it with a local image, and if you can get that to work then you have isolated the issue down to improperly getting an image from the database. In the past I;ve tried only having the link to the image on the database which pointed me to my ftp server. This means that I don't have to transfer the image in resultSet, but simply get it through FTP.

score 0 · Accepted Answer · answered Feb 15 '14 at 14:03

0

I figured out the alternate way, if we store address of image in database and than simply populate our columns with address(link) of the image.

answered Feb 15 '14 at 14:03

Syed Haziq Hamdani

91
10

Image not displaying in jtable?

2 Answers2