How to modify the default Datatables + Bootstrap layout

Asked

Viewed 5,961 times

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.

Layout com o DataTables

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.

Layout depois da importação sugerida.

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

I’d appreciate it if someone could help.

2 answers

2


Hello!

There is internationalization for this plugin, look here:

https://cdn.datatables.net/plug-ins/1.10.11/i18n/
  • Man, thanks so much for the return. I got the translation. Hug!

  • Mark there as useful...

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"
        }
    }
  • 1

    Are you sure that’s the answer? From what I understand he wants to style (css) the buttons. Analyze his answer and the question.

  • But if you are sure, before showing the code, explain how it works, where it has to be placed and everything else that can make your answer more complete and readable.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.