1

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.

Layout com o DataTables

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.

Layout depois da importação sugerida.

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">&times;</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.

2 Respostas 2

2

Olá!

Existe internacionalização para esse plugin, olha aqui:

https://cdn.datatables.net/plug-ins/1.10.11/i18n/
2
  • Cara, valeu mesmo pelo retorno. Consegui fazer a tradução. Abraço! 29/05/2016 às 14:21
  • Marca aí como util... 31/05/2016 às 0:47
2
$('.table').DataTable({
        language:{
        "sEmptyTable": "Nenhum registro encontrado",
        "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
        "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
        "sInfoFiltered": "(Filtrados de _MAX_ registros)",
        "sInfoPostFix": "",
        "sInfoThousands": ".",
        "sLengthMenu": "_MENU_ resultados por página",
        "sLoadingRecords": "Carregando...",
        "sProcessing": "Processando...",
        "sZeroRecords": "Nenhum registro encontrado",
        "sSearch": "Pesquisar",
        "oPaginate": {
            "sNext": "Próximo",
            "sPrevious": "Anterior",
            "sFirst": "Primeiro",
            "sLast": "Último"
        },
        "oAria": {
            "sSortAscending": ": Ordenar colunas de forma ascendente",
            "sSortDescending": ": Ordenar colunas de forma descendente"
        }
    }
2
  • 1
    Tem certeza que a resposta é essa? Pelo que eu entendi ele quer estilizar(css) os botões. Analise sua resposta e a pergunta. 27/10/2017 às 10:57
  • Mas se vc tiver certeza, antes de mostrar o código, explique como ele funciona, aonde tem que ser colocado e tudo mais que possa deixar sua resposta mais completa e legivel. 27/10/2017 às 10:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .