Criando tabelas com o DataTables.js

Neste artigo rápido mostrarei como o plugin DataTables.js, um plugin para a biblioteca do Jquery. Ele permite transformar tabelas HTML (<table>) em componentes completos com funcionalidades de ordenação, filtros, paginação e muito mais.

Requisitos

Utilizar o DataTables.js é bem simples, basta você:

Incluir o jquery (versão 3.3.1+), pode ser do link: https://code.jquery.com/jquery-3.3.1.js
Incluir o arquivo css: https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css
O arquivo JS: https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js

E dentro de seu script ou arquivo JavaScript o seguinte trecho de código

$(document).ready( function () {
    $('#myTable').DataTable();
//Onde o #myTable é o ID da tabela que você quer estilizar
} );

Exemplo básico

Esse exemplo é baseado no exemplo do próprio site, mas colocarei diversas customizações um único post para ser mais direto.

Código Fonte

[download id=”1446″]

HTML

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
<!-- Mais um monte de registros para mostrar a funcionalidade de paginação.
Caso queira, baixe o arquivo inteiro no link a seguir -->

CSS

apenas o link da biblioteca

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />

JavaScript

Além das bibliotecas do dataTables o arquivo main.js terá o código mencionado anteriormente

<script>
    $(document).ready(function () {
        $('#example').DataTable();
    });
</script>

Com isso você obterá o seguinte resultado:

Escolhendo as funcionalidades

Caso você precise de algo mais simples, é possível remover algumas funcionalidades do datatables na hora que você chama o método. Para este exemplo, só precisaremos mexer no arquivo JS conforme abaixo:

$(document).ready(function() {
    $('#example').DataTable( {
        "paging":   false,
        "ordering": false,
        "info":     false
    } );
} );

Com isso os dados de paginação, ordenação e informação serão ocultados. Para saber quais dados você pode exibir/ocultar, veja na documentação deles neste link: https://datatables.net/reference/option/ o item “DataTables – Features”

Passando para o Português

A biblioteca é legal com muitas funcionalidades, mas vivemos no Brasil e ter as informações em Inglês pode se tornar um problema para algumas pessoas. Felizmente podemos alterar os textos da tabela manipulado o objeto “language” conforme o exemplo abaixo:

$(document).ready(function () {
    $('#example').DataTable({
        "language": {
            "lengthMenu": "Display _MENU_ records per page",
            "zeroRecords": "Nothing found - sorry",
            "info": "Showing page _PAGE_ of _PAGES_",
            "infoEmpty": "No records available",
            "infoFiltered": "(filtered from _MAX_ total records)"
        }
    });
});

Para mais detalhes de todas as informações que podem ser alteradas, acesse: https://datatables.net/reference/option/language.

Conclusão

É possível observar que este é um ótimo plugin com diversas funcionalidades e simples de trabalhar. Aprendi tudo que precisava apenas com a documentação do Site deles, que é simples e direta. Espero que você que está lendo possa se beneficiar dessa biblioteca também e caso você tenha alguma duvida ou sugestão, por favor deixe seu comentário aqui para nós.