$( function() {
$( "#dialog1" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000,
width: "auto",
height: "auto",
position: "left",
},
hide: {
effect: "explode",
duration: 1000,
width: "auto",
height: "auto",
position: "left",
}
});
$( "#opener1" ).on( "click", function() {
$( "#dialog1" ).dialog( "open" );
});
});
HTML:
<p id="opener1" style="color:green; margin: 0%">show table</p>
<div id="dialog1" title="Number of entry failed.">
<table class="table table-bordered sortable table-hover" id="mytable">
<thead>
<tr>
<th>Id</th>
<th>Title</th>
<th>Url</th>
<th>View All Info</th>
</tr>
</thead>
<tbody>
{% for lists in details %}
<tr>
<td>{{ lists.id }}</td>
<td>{{ lists.title }}</td>
<td><a href="{{ lists.url }}" target="_blank">{{ lists.url }}</a></td>
<td>
<button id="opener">View</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>