CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Martin Jašek
Martin Jašek

Reputation: 77

DataTables bootstrap not working

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>

Upvotes: 0

Views: 22478

Answers (2)

Rick Nijhuis
Rick Nijhuis

Reputation: 446

As said in the comments 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>

Upvotes: -1

Dennington-bear
Dennington-bear

Reputation: 1782

You had three problems one I didnt notice and one I found out while helping.

  1. You called your jquery before your script was loaded(My comments 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.
  2. 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
  3. 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.net/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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Datatables -->
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
      $(document).ready(function() {
        $('#tabulka_kariet').DataTable();
      });
    </script>
</html>

Upvotes: 3

Related Questions