1
Hello, I used a tutorial I found on Youtube to use Datatables in my project. I managed to make everything work but the look didn’t get very cool as you can see below.
So looking I found a section on the site of Datatables with a stylized demo with Bootstrap 3, it was then that I imported the two links that the site suggested, but it was not exactly the same. I would like to know how to make changes, for example, in the English language and style the pagination buttons. Below the layout after importing the suggested links.
Follow the code of the page:
<!DOCTYPE html>
System X
<link rel="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('<script src="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>
I’d appreciate it if someone could help.
Man, thanks so much for the return. I got the translation. Hug!
– Guilherme Ramalho
Mark there as useful...
– Luciano Bezerra