JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<table id="table">
</table>
<div style="margin-top:150px;">
get random number from remote page --->http://fiddle.jshell.net/bHmRB/93/show/
<br />
(shoud be append new number to ul element everytime when click link, but it is wrong now!)
<ul id="get-random" style="width: 200px;height:100px;border: 5px solid #337ab7;">
</ul>
</div>
JavaScript
var columns = [{field: "id",title: 'ID',},{field: "link",title: 'LINK'}];
var data = [
{"id": "1","link": "link1"},
{"id": "2","link": "link2"}
];
function dspInformStatus(value, row, index) {
var rtnVal = '<a class="inform-status" data-remote="http://fiddle.jshell.net/bHmRB/93/show/" data-toggle="modal" data-target="#inform-status'
+ index + '">' + value + '</a>';
rtnVal += [
'<div class="modal fade" id="inform-status' + index + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">',
'<div class="modal-dialog">',
'<div class="modal-content"></div>',
'</div>',
'</div>'
].join("");
return rtnVal;
}
var clickInformStatus = {
'click .inform-status': function (e, value, row, index) {
$(this).siblings("#inform-status" + index).on('hidden.bs.modal', function(event){
$("#get-random").append("<li>"+$("#random").html()+"</li>");
$(this).removeData('bs.modal');//noneffective
$(this).data('bs.modal', null);//noneffective
$(this).removeData();//noneffective
});
}
};
$(function () {
columns[1]["formatter"] = dspInformStatus;
columns[1]["events"] = clickInformStatus;
$('#table').bootstrapTable({
columns: columns,
data: data
});
});