I don't understand why both Bootstrap table and jquery reveal popup plugin is not working together.
If I remove this line <script type="text/javascript" language="javascript" src="media/js/jquery.js"></script>
then Bootstrap sorting and pagination is not working !
if I remove this line <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
then popup plugin is not working !
Html Head section code:
<!--for bootstrap table-->
<link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css">
<script type="text/javascript" language="javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('#example').dataTable();
$('#example tbody').on('click', 'tr', function () {
var name = $('td', this).eq(0).text();
} );
} );
</script>
<!--for bootstrap table end here-->
<!-- for popup box -->
<link rel="stylesheet" href="../style/reveal.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="../js/jquery.reveal.js"></script>
<!-- for popup box end here -->
Html Body section code
<!--for popup box-->
<div id="myModal2" class="reveal-modal3">
</div>
<a id="join_now" class="big-link2" data-reveal-id="myModal2">Popup</a>
<!--for popup box end here-->
<!--for bootstrap table with sorting and pagiantion option-->
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Company</th>
<th>Position</th>
<th>Status</th>
<th>Kit type</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>
</tbody>
</table>
<!--for bootstrap table with sorting and pagiantion option end here-->