javascript - Including image in Wenhixin bootstrap-table - Stack Overflow

admin管理员组

文章数量:1343687

I am working with Wenhixin bootstrap-table.js. My table should look the below table. Code for creating table is given below

<table class="table-bodered" data-classes="table table-hover table-condensed" data-toggle="table" data-url="http://localhost:1337/users" data-pagination="true" data-search="true" data-height="600">
                                                    <thead>
                                                        <tr>
                                                            <th data-field="profile_url">Picture</th>
                                                            <th data-field="fullname">Name</th>
                                                            <th data-field="SerialNo">Phone Number</th>
                                                            <th data-field="username">Login ID</th>
                                                            <th data-field="Image">Action</th>

                                                        </tr>
                                                    </thead>
                                                </table>

However, without converting image-url to image, the table looks like the below one

In order to get profile picture in the table , I have written the below code.

var data;

        $.ajax({
            type: "GET",
            url: "http://localhost:1337/users",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "",
            success: function (data) {
                console.log(data); //This is your result 

                console.log(data[1].profile_url);
                for (var i = 0; i < data.length; i++) {
                    var node = document.createElement("LI");
                    var x = document.createElement("IMG");

                    x.setAttribute("src", data[1].profile_url);
                    x.setAttribute("width", "304");
                    x.setAttribute("width", "228");
                    x.setAttribute("alt", "The Pulpit Rock");
                    node.appendChild(x);
                    document.getElementById("myList").appendChild(node);

                }

            }
        });

From there, I could get the image from url which is fetched from server. This became difficult for me to place this image in the column of Picture (As it is shown in the screenshot). Now, I am wondering how to place this image to which is dynamically created by Bootstrap-table.js Quick answers will be much appreciated.

I am working with Wenhixin bootstrap-table.js. My table should look the below table. Code for creating table is given below

<table class="table-bodered" data-classes="table table-hover table-condensed" data-toggle="table" data-url="http://localhost:1337/users" data-pagination="true" data-search="true" data-height="600">
                                                    <thead>
                                                        <tr>
                                                            <th data-field="profile_url">Picture</th>
                                                            <th data-field="fullname">Name</th>
                                                            <th data-field="SerialNo">Phone Number</th>
                                                            <th data-field="username">Login ID</th>
                                                            <th data-field="Image">Action</th>

                                                        </tr>
                                                    </thead>
                                                </table>

However, without converting image-url to image, the table looks like the below one

In order to get profile picture in the table , I have written the below code.

var data;

        $.ajax({
            type: "GET",
            url: "http://localhost:1337/users",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "",
            success: function (data) {
                console.log(data); //This is your result 

                console.log(data[1].profile_url);
                for (var i = 0; i < data.length; i++) {
                    var node = document.createElement("LI");
                    var x = document.createElement("IMG");

                    x.setAttribute("src", data[1].profile_url);
                    x.setAttribute("width", "304");
                    x.setAttribute("width", "228");
                    x.setAttribute("alt", "The Pulpit Rock");
                    node.appendChild(x);
                    document.getElementById("myList").appendChild(node);

                }

            }
        });

From there, I could get the image from url which is fetched from server. This became difficult for me to place this image in the column of Picture (As it is shown in the screenshot). Now, I am wondering how to place this image to which is dynamically created by Bootstrap-table.js Quick answers will be much appreciated.

• javascript
• image
• bootstrap-table

Share Improve this question Follow edited Nov 12, 2015 at 9:33 shumana chowdhury asked Nov 12, 2015 at 9:12 shumana chowdhuryshumana chowdhury 1,88222 gold badges1616 silver badges3434 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

you can use cell format

<body>
    <div class="container">
        <h1>Format</h1>
        <p>Use <code>formatter</code> column option to format the display of bootstrap table column.</p>
        <table id="table"
               data-toggle="table"
               data-height="460"
               data-url="../json/data1.json">
            <thead>
            <tr>
                <th data-field="profile_url" data-formatter="imageFormatter">Picture</th>
            </tr>
            </thead>
        </table>
    </div>
<script>

    function imageFormatter(value, row) {
      return '<img src="'+value+'" />';
    }
</script>

you can refer to the document

http://issues.wenzhixin.cn/bootstrap-table/#options/format.html

本文标签： javascriptIncluding image in Wenhixin bootstraptableStack Overflow