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>
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">
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>