Hello, I used a tutorial I found on Youtube to use DataTables in my project. I managed to make everything work but the look was not very cool as you can see below.
SolookingforasectionontheDataTablessiteitselfwithastylizeddemowithBootstrap3,itwasthenthatIimportedthetwolinksthatthesitesuggested,butitdidnotlookexactlythesame.I'dliketoknowhowIcanmakechanges,forexample,tothelabelsthatareinEnglishandstylizethepagingbuttons.Belowthelayoutafterimportingthesuggestedlinks.
Hereisthecodeforthepage:
<!DOCTYPEhtml>SystemX
<linkrel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/menu.css" rel="stylesheet">
</head>
<body>
<?php include_once('./menu_administrador.php'); ?>
<div class="container-fluid">
<div class="col-lg-12">
<?php
if (isset($_SESSION['cadastro_inserido'])) {
?>
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong><?php echo $_SESSION['cadastro_inserido']; ?></strong>
</div>
<?php
unset($_SESSION['cadastro_inserido']);
}
?>
<div class="panel panel-primary">
<div class="panel-heading">ALUNOS</div>
<br />
<div id="filtros">
<a id="voltar_pagina" href="menu.php" class="btn btn-primary" title="Voltar ao início"><span class="glyphicon glyphicon-home"></span></a>
<a id="add_aluno" href="cadastrar_aluno.php" class="pull-right btn btn-primary" title="Adicionar Aluno"><span class="glyphicon glyphicon-plus"></span></a>
</div>
<br>
<div class="table-responsive">
<table id="tabela_alunos" class="table table-condensed">
<thead>
<tr>
<th>#</th>
<th>Nome</th>
<th>Instituição</th>
<th>Turno</th>
<th>Ônibus</th>
<th>Ação</th>
</tr>
</thead>
<tbody>
<?php
$aluno = seleciona_alunos();
while ($registro = mysql_fetch_array($aluno)) {
?>
<tr>
<td><?php echo $registro['id']; ?></td>
<td><?php echo $registro['nome']; ?></td>
<td><?php echo $registro['instituicao']; ?></td>
<td style="width:150px"><?php echo $registro['turno']; ?></td>
<td style="width:150px"><?php echo $registro['numero_bus']; ?></td>
<td style="width:150px">
<a href="javascript:;" class="btn btn-info" title="Ver tudo" data-toggle="modal" data-target="#modal_dados_<?php echo $registro['id']; ?>"><span class="glyphicon glyphicon-eye-open"></span></a>
<a href="editar_aluno.php?id=<?php echo $registro['id']; ?>" class="btn btn-warning" title="Editar"><span class="glyphicon glyphicon-edit"></span></a>
<a href="javascript:func()" onclick="confirmaExclusao('<?php echo $registro['id']; ?>', '<?php echo $registro['nome']; ?>')" class="btn btn-danger" title="Remover"><span class="glyphicon glyphicon-trash"></span></a>
<?php echo info_modal($registro['id'], $registro['nome'], $registro['instituicao'], $registro['turno'], $registro['numero_bus']) . "\n"; ?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script>window.jQuery||document.write('<scriptsrc="js/vendor/jquery.min.js"><\/script>');</script>
<script src="js/bootstrap.min.js"></script>
<script src="datatables/media/js/jquery.dataTables.js" type="text/javascript"></script>
<!-- Scripts -->
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#tabela_alunos').dataTable();
});
</script>
</body>
Thank you if anyone can help.