Entrar Ainda não tem acesso?
2
respostas

[Dúvida] [DataTables] - Paginação

por Anderson da Silva Machado
| 166.8k xp | 126 posts
Analista de Sistemas Junior

Olá,

Estou usando uma biblioteca chamada "DataTables" que é uma biblioteca que permite adicionar recursos de interatividade e manipulação de elementos de tabelas no HTML.

Entretanto, mesmo seguindo a documentação e tentando personalizar a atualização dos atributos, porém a listagem da API que possui 20 elementos só aparece 10 e não mostra a páginação no canto inferior.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

        <!--jQuery-->
        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
        <!-- DATA TABLES -->
        <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
         <!-- Bootstrap JS -->
         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
         <!-- Bootstrap CSS -->
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
         <!--Deixar em portugues o datatables-->
         <script src="./pt-BR.json"></script>


</head>
<body>
        <div id="content"></div>
        <table id="dataTable" class="table table-bordered">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Item</th>
                <th scope="col">Description</th>
            </tr>
            </thead>
            <tbody id="tableBody">
            <!-- Os itens da tabela serão adicionados dinamicamente aqui pelo JavaScript -->
                
            </tbody>
      </table>
    </div>

    <script>

    let qtdElementosPorPagina;
    let paginaAtual;


    let testeNovo;

    $(document).ready(function() {
        let teste = null;

        $('#dataTable').DataTable({
            serverSide: true,
            ajax: {
                url: 'http://localhost:8080/lista',
                type: 'GET',
                dataType: 'json',
                data: function (d) {
                    // Adicione as variáveis customizadas aos parâmetros da solicitação
                    d.start = 0;
                    d.length = qtdElementosPorPagina;
                    d.start = paginaAtual;
                    
                    d.page = paginaAtual; // Corrigido para 'page'

                    console.log(d);

                    teste = d;

                    // Retorne os parâmetros modificados
                    return d;
                },
                dataSrc: function(json) {
                    // Este bloco de código é executado após a conclusão bem-sucedida da solicitação Ajax
                    console.log("Dados de sucesso:", json);
                    
                    testeNovo = json;

                    qtdElementosPorPagina = json.pageable.pageSize;
                    paginaAtual = json.pageable.pageNumber;

                    return json.content; // Retorna a propriedade 'content' como fonte de dados
                },
                error: function (xhr, textStatus, error) {
                    // Lide com erros, se necessário
                    console.error("Erro na requisição Ajax:", textStatus, error);
                }
            },
            columns: [
                { data: 'id' },
                { data: 'item' },
                { data: 'description' }
            ],
            paging: true,
            language: {
                url: "./pt-BR.json"
            }
        });
    });

    </script>
    
</body>
</html>

mostrando o seguinte texto:

Mostrando 0 até 0 de 0 registro(s) (Filtrados de NaN registros) Anterior12345…NaNPróximo

O json é este:

{"content":[{"id":1,"item":"item 1","description":"describe 1"},{"id":2,"item":"item 2","description":"describe 2"},{"id":3,"item":"item 3","description":"describe 3"},{"id":4,"item":"item 4","description":"describe 4"},{"id":5,"item":"item 5","description":"describe 5"},{"id":6,"item":"item 6","description":"describe 6"},{"id":7,"item":"item 7","description":"describe 7"},{"id":8,"item":"item 8","description":"describe 8"},{"id":9,"item":"item 9","description":"describe 9"},{"id":10,"item":"item 10","description":"describe 10"}],"pageable":{"sort":{"empty":true,"sorted":false,"unsorted":true},"offset":0,"pageNumber":0,"pageSize":10,"paged":true,"unpaged":false},"totalPages":2,"totalElements":20,"last":false,"size":10,"number":0,"sort":{"empty":true,"sorted":false,"unsorted":true},"numberOfElements":10,"first":true,"empty":false}

Pelo endpoint:

http://localhost:8080/lista

Fonte:

2 respostas
por Renan Cezar Wuicik
| 3167.2k xp | 6165 posts
Instrutor Suporte Educacional Start By Alura

Olá Anderson! Tudo ok contigo?

A API não está recebendo as informações corretas sobre a quantidade total de registros e a quantidade de páginas. Isso pode estar acontecendo porque a estrutura do JSON que você está retornando não é a que a DataTables espera.

A DataTables espera um JSON com a seguinte estrutura:

{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        // seus dados aqui
    ]
}

Onde:

  • draw: é um número que a DataTables envia na solicitação Ajax e espera receber de volta. Isso é usado para garantir que a DataTables esteja trabalhando com a resposta correta para a solicitação.
  • recordsTotal: é o número total de registros no conjunto de dados, independentemente de qualquer filtragem.
  • recordsFiltered: é o número total de registros após a filtragem. Isso será o mesmo que recordsTotal se não houver filtragem.
  • data: é um array de objetos, onde cada objeto é um registro a ser exibido na tabela.

No seu caso, você está retornando um objeto com a propriedade content, que contém os dados a serem exibidos, e outras propriedades como totalPages e totalElements, que parecem ser equivalentes a recordsTotal e recordsFiltered, mas com nomes diferentes.

Para resolver isso, você pode modificar o código do lado do servidor para retornar um JSON na estrutura esperada pela DataTables, ou você pode modificar o código do lado do cliente para adaptar o JSON recebido à estrutura esperada pela DataTables.

Aqui está um exemplo de como você pode fazer isso no lado do cliente:

$('#dataTable').DataTable({
    serverSide: true,
    ajax: {
        url: 'http://localhost:8080/lista',
        type: 'GET',
        dataType: 'json',
        dataSrc: function(json) {
            // Adaptar o JSON recebido à estrutura esperada pela DataTables
            return {
                draw: json.number + 1, // Supondo que 'number' é o equivalente a 'draw'
                recordsTotal: json.totalElements,
                recordsFiltered: json.totalElements, // Supondo que não há filtragem
                data: json.content
            };
        },
        // restante do código...
    },
    // restante do código...
});

Era isso. Espero ter ajudado!

Abraços e bons estudos!

por Anderson da Silva Machado
| 166.8k xp | 126 posts
Analista de Sistemas Junior

Olá, Renan Cezar

Modifiquei o código conforme comentado

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

        <!--jQuery-->
        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
        <!-- DATA TABLES -->
        <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
         <!-- Bootstrap JS -->
         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
         <!-- Bootstrap CSS -->
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
         <!--Deixar em portugues o datatables-->
         <script src="./pt-BR.json"></script>
         
</head>
<body>
        <div id="content"></div>
        <table id="dataTable" class="table table-bordered">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Item</th>
                <th scope="col">Description</th>
                <th scope="col">Describe</th>
            </tr>
            </thead>
            <tbody id="tableBody">
            <!-- Os itens da tabela serão adicionados dinamicamente aqui pelo JavaScript -->
                
            </tbody>
      </table>
    </div>

    <script>
    
    let teste;

    function criaTabela(){
       var tabela = $('#dataTable').DataTable({
            serverSide: true,
            ajax: {
                url: "http://localhost:8080/apiteste/lista",
                type: 'GET',
                cache: false,
                dataType: 'json',
                //dataSrc: 'content',
                dataFilter: function(data){

                    var json = jQuery.parseJSON( data );

                    json.recordsTotal = json.totalElements;
                    json.recordsFiltered = json.totalElements;
                    json.data = json.content;

                    return JSON.stringify( json ); // return JSON string
                },
                data: function (params) {

                    console.log('*******');
                    console.log(params);

                    teste = params;
                    console.log('*******');

                    // Adiciona os parâmetros de página à URL
                    var url = "http://localhost:8080/apiteste/lista";
                    url += '?page=' + params.start;
                    url += '&size=' + params.length;

                    console.log(url);

                    //ajax.url(url).load();
                    return {
                        url: url
                    };
                },
            },
            columns: [
                { data: 'id' },
                { data: 'item' },
                { data: 'description' },
                { data: 'describe' }
            ],
            paging: true,
            language: {
                url: "./pt-BR.json"
            }
        });
    }

    </script>
    
</body>
</html>