Bootstrap datatables styling

Question

I'm using Bootstrap and the jQuery datatables plugin. Now it's showing the default style and Bootstrap style at the same time. For example the pagination shows the bootstrap button inside the default pagination button.

<!DOCTYPE html>

<html>

  <head>

    <title></title>

    <meta charset="UTF-8">

    <link href="./libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <link href="./libs/bootstrap/css/jumbotron-narrow.css" rel="stylesheet">

    <link href="./libs/css/styles.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">

  </head>

  <body>

    <dir class="container">

      <div class="col-md-12">

        <h2>Catàleg de peticions</h2>

      </div>

      <div class="col-md-12">

        <div class="col-md-3">

          <a href="create.php" class=" btn btn-default action-btn">Nou registre</a>

        </div>

        <div class="col-md-3">

          <button class="btn btn-default action-btn" id="edit-btn">Editar Registre</button>

        </div>

        <div class="col-md-3">

          <button class="btn btn-default action-btn" id="edit-tree-btn">Editar Arbre</button>

          <!--a href="create.php?edit-tree=true" class="btn btn-default" id="edit-btn">Editar Arbre</a>-->

        </div>

        <div class="col-md-3">

          <button class="btn btn-default action-btn"  id="delete-btn">Eliminar</button>

        </div>

        <div class="col-md-3">

          <a href="gestioci/" class="btn btn-default action-btn">Associar CI</a>

        </div>

        <div class="col-md-3">

          <a href="download.php" download="cataleg_peticions.csv" class="btn btn-default action-btn">Exportar</a>

        </div>

        <div class="col-md-3">

          <button class="btn btn-default action-btn" id="backup-btn">Backup</button>

        </div>

        <div class="col-md-3">

          <button class="btn btn-default action-btn" id="restore-backup-btn">Restaurar Backup</button>

        </div>

        </div>

          <div class="col-md-12" style="margin-top: 10px">

            <form action="load_csv.php" method="post" enctype="multipart/form-data" id="upload-form">

              <div class="col-md-6">

                <input type="file" name="csv-file"  id="csv-file">

              </div>

              <div class="col-md-3 offset-md-6">

                <input class="btn btn-default" type="submit" name="submit" value="Importar">

              </div>

            </form>

          </div>

        </dir>

        <table class="table-bordered table-hover table-fixed" id="mytable">

          <thead>

            <tr>

              <th>Confimar</th>

              <th>Árbol Completo</th>

              <th>Títol</th>

              <th>Descripció</th>

              <th>Code</th>

              <th>Parent Code</th>

            </tr>

          </thead>

          <?php

            if ($stmt = sqlsrv_query($conn,$query)) {

              while($tmp = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_NUMERIC)) {

                echo setTableFile($tmp);

              }

            }

          ?>

        </tr>

      </table>

    </div>

    <script src="./libs/jquery-3.2.1.min.js"></script>

    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>

    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>

    <script src="./libs/script.js"></script>

  </body>

</html>

I think the scripts order is correct. What could be the problem? Do I have to set something on datatables to use bootstrap?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Adding this to an answer as it doesnt display well in comments.

Try replacing both bootstrap and datatables css with these links: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css

These are the stylesheets given in the example here: https://datatables.net/examples/styling/bootstrap.html

It also looks like (in the example) the link for

src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js">

must be referenced before

 src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js">

Also

From looking at your code you are missing the <tbody> tag in your markup. This is essential for Datatables. Your markup/PHP should look something like this:

<table class="table-bordered table-hover table-fixed" id="mytable">
    <thead>
       <tr>
         <th>Confimar</th>
         <th>Árbol Completo</th>
         <th>Títol</th>
         <th>Descripció</th>
         <th>Code</th>
         <th>Parent Code</th>
       </tr>
    </thead>
    <tbody>
         <?php
            if ($stmt = sqlsrv_query($conn,$query)) 
            {
              while($tmp = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_NUMERIC)) 
              {
                 //remember to echo out a row for each line returned in the loop
                 echo '<tr>';
                 echo setTableFile($tmp);
                 echo '</tr>'
              }
            }
         ?>
   </tbody>
</table>

Bootstrap datatables styling

Also

Sign up