I am working with Wenhixin bootstrap-table.js. My table should look below.
The code for creating the table is 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 the url image to an image, the table looks like below
To get the profile picture in the table, I wrote the code below.
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);
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 the URL that is retrieved from the server. It became difficult for me to put this image in the image column (as shown in the screenshot). Now I am wondering how to place this image dynamically created by Bootstrap-table.js Quick answers will be highly appreciated.
source
share