Olá, eu usei um tutorial que achei no Youtube para usar o DataTables no meu projeto. Eu consegui fazer tudo funcionar porém o visual não ficou muito legal como vocês podem ver abaixo.
Então procurando achei uma seção no próprio site do DataTables com uma demo estilizada com Bootstrap 3, foi então que importei os dois links que o site sugeria, porém não ficou exatamente igual. Eu gostaria de saber como faço pra fazer alterações, por exemplo, nas labels que estão em inglês e estilizar os botões da paginação. Abaixo o layout após fazer a importação dos links sugeridos.
Segue o código da página:
<!DOCTYPE html>
Sistema 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>
Agradeço se alguém puder ajudar.