DataTables demora muito para carregar devido qtde de dados

11 respostas Resolvido
nodejsjavamysqlprogramaçãojavascript
F

Fala pessoal, olha só, tenho uma aplicação WEB desenvolvida em NodeJS, Javascript, Bootstrap e utilizo como banco de dados um servidor MySQL.

Meu problema é que quando entro numa tela que possui uma DataTable a DataTable está demorando demais para carregar, chega a ficar mais de 2 minutos processando até chegar ao final, por favor, podem me ajudar se existe uma outra forma de eu popular ela, abaixo como estou fazendo:

Rota que entra na tela de materiais:
rotas.get('/material', pageMaterial);

Ao acessar a rota acima entra no codigo abaixo que envia as informações para tela:

pageMaterial: (req, res) => {
       page = './includes/cadastros/inc_material';
               
       //Esta é a consulta que traz todos os registros para popular a DataTable
       let query = "SELECT * FROM `tb_cadastro_material`";

       db.query(query, (err, results, fields) => {
       //Passa o conteúdo das variáveis para a página principal
       res.render('./pageAdmin', {
       DTMaterial: results,//Aqui recebe os dados para popular a DataTable
            page
      });
    });
  })();
}

E aqui é meu arquivo ejs (Frontend) onde tenho o DataTable recebendo os dados passados na variável acima DTMaterial:

<tbody>
     <!-- Detalhes: Dados da tabela -->
     <% DTMaterial.forEach((row, index) => { %>
            <tr>
                 <td><%= row.cod %></td>
                 <td><%= row.material %></td>
                 <td style="min-width: 150px;"><%= row.descricao %></td>
                 <td><%= row.multiplo %></td>
                 <td><%= row.familia %></td>
                 <td><%= row.grupo %></td>
                 <td style="min-width: 150px;"><%= row.observacao %></td>
            </tr>
     <% }) %>

Este é o resultado depois que carrega 100%, mas está demorando demais pra carregar:


Dados fictícios

11 Respostas

J

Primeiro debuga pra saber onde está a demora. Se é no retorno da query do banco, resposta da requisição do backend node ou no preenchimento do data grid no front.

P

Quantas linhas tem a tabela na Base de Dados? As 10 que mostras? Ou mais?

F

cerca de 30 mil linhas @pmlm

P

E não estás a obter sempre os 30000 registos para mostrar só 10?

F

A consulta em si está tendo retorno rápido viu, problema mesmo esta sendo renderizar as quase 30 mil linhas no frontend, estou usando a DataTable do Bootstrap 4, abaixo inicialização dela:

<script>
    //TBtable
    $(function () {
        $("#TBtable").DataTable({ //Aqui coloca o id da tabela desejada           
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": false,
            "info": true,
            "autoWidth": false,
            "responsive": true,
        });
    });
<script>

PS: Já fiz o teste colocando false em tudo na configuração acima, mesmo assim demora para renderizar as quase 30 mil linhas

E este é o resultado após carregamento completo:


P

O que deve ser feito nesses casos é obteres apenas 10 linhas de cada vez da base de dados. Para que obter e renderizar 30000 linhas quando só queres mostrar 10?

Deves fazer uma query com o count do total de registos, para saberes quantas registos tens no total.

SELECT count(*) FROM `tb_cadastro_material`

E outra query para obter os 10 registos da página atual. Será algo assim

SELECT * FROM `tb_cadastro_material` ORDER BY cod LIMIT 10 OFFSET X

em X deves colocar, para cada página, (pagina-1)*10, ou seja 0 para a página 1; 10 para a página 2, … e assim serão apresentados os 10 registos a partir do indicado

E

Concordo com pmlm. O ideal é implementar um processo de paginação que busque a quantidade de dados do banco que será apresentado no momento e então atualize a quantidade conforme passar as páginas.

F

Rapaz, eu entendi e acredito que essa realmente seria a solução, porém não faço a mínima ideia e até agora não consegui aplicar essa consulta no meu render e na minha DataTable mantendo todos os recursos do componente como paginação, filtros e classificação utilizáveis, teria que carregar 10 registros mas se o usuário consultar no campo de pesquisa da DataTable um registro que não está dentro desses 10 não está localizando entende.

P

Estás a dizer-me que cada vez que fazes uma pesquisa estás a percorrer a tua lista com 30k registos a procurar os match em vez de fazer nova query na bd com o where respectivo?
Isso é responsabilidade do servidor e deve ser feita novamente uma query na bd, seja via HTTP GET ou websocket.

F

Pessoal, acreditam que ainda não consegui resolver… se alguém souber de algum exemplo, algum projeto disponível para que eu possa utilizar como exemplo agradeço, mas deve ser Javascript e Node.JS ok e não PHP.

F
Solucao aceita

Solução aqui: [RESOLVIDO] Renderizar dataTable com milhares de linhas - Node.JS, JavaScript e MySQL

Criado 10 de março de 2021
Ultima resposta 28 de abr. de 2021
Respostas 11
Participantes 4