af_imi4 af_imi4 - 1 year ago 170
CSS Question

Bootstrap datatables styling

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?

Answer Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download