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ê:

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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 -->
<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 -->
<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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script>
$(document).ready(function () {
$('#example').DataTable();
});
</script>
<script> $(document).ready(function () { $('#example').DataTable(); }); </script>
<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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$(document).ready(function() {
$('#example').DataTable( {
"paging": false,
"ordering": false,
"info": false
} );
} );
$(document).ready(function() { $('#example').DataTable( { "paging": false, "ordering": false, "info": false } ); } );
$(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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$(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)"
}
});
});
$(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)" } }); });
$(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.

Deixe um comentário