Please, can you help me with integration datatables bootstrap on my simple table? I add this code, and not working for me.
I also tried to add links of scripts to head, but not working too. What am I doing wrong in this code?
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="jquery/dataTables.bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="jumbotron">
<h3>Požičovňa náradia SEAS</h3>
</div>
<script>
$(document).ready(function() {
$('#tabulka_kariet').DataTable();
});
</script>
<table id="tabulka_kariet" class="table table-bordered">
<thead>
<tr>
<th>Kód karty</th>
<th>Názov karty</th>
<th>Počet ks na všetkých skladoch</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Kód karty</th>
<th>Názov karty</th>
<th>Počet ks na všetkých skladoch</th>
</tr>
</tfoot>
<tr>
<td>13245</td>
<td>Sekacie kladivo Bosch 5184</td>
<td class="pocet">12</td>
</tr>
<tr>
<td>6789</td>
<td>Brúska Bosch 5184</td>
<td class="pocet">7</td>
</tr>
</table>
<?php
?>
</div>
</body>
<script src="bootstrap/js/bootstrap.min.js" />
<script src="jquery/jquery-3.0.0.min.js" />
<script src="jquery/dataTables.bootstrap.min.js" />
<script src="jquery/jquery.dataTables.min.js" />
<script src="jquery/jquery-1.12.4.js" />
</html>
Please, can you help me with integration datatables bootstrap on my simple table? I add this code, and not working for me.
I also tried to add links of scripts to head, but not working too. What am I doing wrong in this code?
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="jquery/dataTables.bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="jumbotron">
<h3>Požičovňa náradia SEAS</h3>
</div>
<script>
$(document).ready(function() {
$('#tabulka_kariet').DataTable();
});
</script>
<table id="tabulka_kariet" class="table table-bordered">
<thead>
<tr>
<th>Kód karty</th>
<th>Názov karty</th>
<th>Počet ks na všetkých skladoch</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Kód karty</th>
<th>Názov karty</th>
<th>Počet ks na všetkých skladoch</th>
</tr>
</tfoot>
<tr>
<td>13245</td>
<td>Sekacie kladivo Bosch 5184</td>
<td class="pocet">12</td>
</tr>
<tr>
<td>6789</td>
<td>Brúska Bosch 5184</td>
<td class="pocet">7</td>
</tr>
</table>
<?php
?>
</div>
</body>
<script src="bootstrap/js/bootstrap.min.js" />
<script src="jquery/jquery-3.0.0.min.js" />
<script src="jquery/dataTables.bootstrap.min.js" />
<script src="jquery/jquery.dataTables.min.js" />
<script src="jquery/jquery-1.12.4.js" />
</html>
-
3
Put your script tags at the top. You're trying to use jQuery & DataTables when they've not been loaded yet. Also check the typo
jquery/jqeuery.dataTables.min.js– Reinstate Monica Cellio Commented Jun 23, 2017 at 13:31 - 1 F12, console will show you your errors. – Matt Commented Jun 23, 2017 at 13:33
- put jquery script ontop of bootstrap, bootstrap needs jquery and your script order is wrong – Dennington-bear Commented Jun 23, 2017 at 13:34
-
aka - move your script elements to your
headtag – Adjit Commented Jun 23, 2017 at 13:34
2 Answers
Reset to default 3You had three problems one I didnt notice and one I found out while helping.
- You called your jquery before your script was loaded(My ments on the post are wrong). Call this after the script loads this is why people were telling you to add your scripts into the head.
- You used two versions of jQuery. This should not be done as the final jQuery to load will be the one you use. If you intend to use multiple jQuery files look at no conflict between versions
- You load jQuery after bootstrap where it should load before because bootstrap uses jQuery. Below will run if you want to test it. Change the script urls to your local ones and it should still run. change the css links too to your local one
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="jquery/dataTables.bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables/1.10.15/css/jquery.dataTables.min.css"></link>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h3>Požičovňa náradia SEAS</h3>
</div>
<table id="tabulka_kariet" class="table table-bordered">
<thead>
<tr>
<th>Kód karty</th>
<th>Názov karty</th>
<th>Počet ks na všetkých skladoch</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Kód karty</th>
<th>Názov karty</th>
<th>Počet ks na všetkých skladoch</th>
</tr>
</tfoot>
<tr>
<td>13245</td>
<td>Sekacie kladivo Bosch 5184</td>
<td class="pocet">12</td>
</tr>
<tr>
<td>6789</td>
<td>Brúska Bosch 5184</td>
<td class="pocet">7</td>
</tr>
</table>
<?php
?>
</div>
</body>
<!-- Jquery -->
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Datatables -->
<script src="https://cdn.datatables/1.10.15/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('#tabulka_kariet').DataTable();
});
</script>
</html>As said in the ments you need to place the jQuery scripts above the bootstrap link. This is because bootstrap needs jQuery to work so you need to load jQuery before bootstrap loads
Try it like this:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="bootstrap/js/bootstrap.min.js" />
<script src="jquery/jquery-3.0.0.min.js" />
<script src="jquery/dataTables.bootstrap.min.js" />
<script src="jquery/jquery.dataTables.min.js" />
<script src="jquery/jquery-1.12.4.js" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="jquery/dataTables.bootstrap.min.css" />
</head>