1

Utilizo uma DataTable para exibir alguns registros, sempre que eu entro em uma determinada página, dou F5, a tabela "demora" para se "compactar", pois a página está carregando todos os registros do meu select.

Creio que a forma ideal seria fazer a página carregar uma quantidade de registros por página selecionada (paginação da table), porém, não sei como fazer isso.

Se eu apenas colocar:

$sql = "SELECT * FROM contas LIMIT 1, 10";

Só irá exibir 10 registros do meu banco obviamente.

Eu usei "pageLength" no script, mas ele também não impede da página carregar todos os registros.

Então, como posso estar usar LIMIT ou outra ferramenta para "impedir" a página de carregar todos os registros de uma vez?

Script que estou utilizando:

// LISTAGEM SCROLL
$(document).ready(function () {
$('#dtHorizontalExample').DataTable({
"scrollX": true,
"pageLength": 10 
});
$('.dataTables_length').addClass('bs-select');
});

Meu SQL:

$sql = "SELECT contas.* , estabelecimento_detalhes.* FROM contas, estabelecimento_detalhes WHERE contas.estabelecimento = estabelecimento_detalhes.estabelecimento AND contas.categoria != 'EMPRESA-X'";

2 Respostas 2

0

Olá, para você fazer isso você precisa usar jQuery Datatable Server-Side vou fazer um exemplo para você ter uma ideia melhor.

Com base em uma tabela, ficaria assim:

<script type="text/javascript">

        $(document).ready(function () {
            $('#myTable').DataTable({
                "ajax": {
                    "url": "/home/loaddataserver",
                    "type": "POST",
                    "datatype":"json"
                },
                "processing": true,
                "serverSide": true,
                "filter": false,
                "orderMulti": false,
                "paging": true,
                "info":false,
                "columns": [
                    { "data": "id", "name": "id", "autoWidth": true },                       //index 0
                    { "data": "nome", "name": "nome", "autoWidth": true },                   //index 1
                    { "data": "fornecedor.nome", "name":"fornecedor.nome", "autoWidth": true },//index 2
                    { "data": "categoria.nome", "name":"categoria.nome", "autoWidth": true },//index 3
                    { "data": "precoDeCusto", "name":"precoDeCusto", "autoWidth": true },  //index 4
                    { "data": "precoDeVenda", "name": "precoDeVenda", "autoWidth": true }, //index 5
                    { "data": "medicao", "name":"medicao", "autoWidth": true }, //index 6
                    { "data": "status", "name":"status", "autoWidth": true } //index 7
                ],
                "language": {
                    "lengthMenu": "Visualizando _MENU_ Registros por página",
                    "zeroRecords": "Não existe registros para visualização",
                    "info": "Mostrando página _PAGE_ de _PAGES_",
                    "infoEmpty": "No records available",
                    "infoFiltered": "(filtered from _MAX_ total records)",
                    "paginate": {
                        "previous": "Página Anterior",
                        "next": "Próxima página"
                    }
                }
            });


    </script>

Na sua controller você precisa fazer o método que vai enviar e receber os dados usando json, segue um exemplo feito no asp.net core:

[HttpPost]
        public IActionResult loaddataserver()
        {

            var draw = Request.Form["draw"].FirstOrDefault();
            var start = Request.Form["start"].FirstOrDefault();
            var length = Request.Form["length"].FirstOrDefault();

            var sortColumn = Request.Form["columns"] + Request.Form["order[0][column]"].FirstOrDefault() + "][name]".FirstOrDefault();
            var sortColumnDir = Request.Form["order[0][dir]"].FirstOrDefault();

            int pageSize = length != null ? Convert.ToInt32(length) : 0;
            int skip = start != null ? Convert.ToInt32(start) : 0;
            int totalRecords = 0;

          //  var v = ( database.Produtos.Include(p => p.Categoria).Include(p => p.Fornecedor).Where(p => p.Id <= 35));
            var v = (database.Produtos.Include(p => p.Categoria).Include(p => p.Fornecedor));

            //SORT
            if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDir)))
            {
             //   v = v.OrderBy(sortColumn + " " + sortColumnDir);
            }

            totalRecords = v.Count();
            var data = v.Skip(skip).Take(pageSize).ToList();
            return Json(new { draw = draw, recordsFiltered = totalRecords, recordsTotal = totalRecords, data = data });

        }
6
  • Muito obrigado pela resposta, só tenho uma duvida na segunda parte, aonde devo colocar ela? no arquivo mencionando na URL? Commented 15/04/2020 às 14:35
  • A segunda parte e o código do controller, você está usando MVC no php ? veja no link "url": "/home/loaddataserver", está enviando um post para uma controller, se a resposta ajudou, não esquece de marca como solução para ajudar outras pessoas também
    – Harry
    Commented 15/04/2020 às 14:38
  • Desculpa a ignorância, sou bem leigo/novo nesse rumo, não possuo esse diretório e nem algo parecido, aparentemente não uso "MVC" então... mas se eu criar um arquivo, mencionar na url e colocar a segunda parte, funcionara? Commented 15/04/2020 às 14:44
  • Sim, vai funcionar, desque esteja trazendo os dados corretos, porque o que postei e um exemplo, você tem que ajustar para os dados da sua tabela, basta seguir como modelo
    – Harry
    Commented 15/04/2020 às 14:47
  • Sim sim, vou tentar aqui e ja te retorno... estou usando o seu código e um site que explica bem também site, desde já, obrigado! Commented 15/04/2020 às 14:51
0

Boa tarde, CTJR_Tecnico, também sou novo por aqui, mas se eu entendi direito, nas minhas páginas, quando quero limitar o tanto de registro que quero mostrar no DataTable, eu coloco está linha: iDisplayLength: 10,

Vou colocar meu código, espero que te ajude.

    <script>
            $(document).ready(function() {
                var table = $('#tabela').DataTable( {
                  initComplete: function () {
                    this.api().columns().every( function () {
                      var column = this;
                      var select = $('<select><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                          var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                          );

                          column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                        } );

                      column.data().unique().sort().each( function ( d, j ) {
                                select.append( '<option value="'+d+'">'+d+'</option>' )
                            } );
                        } );
                    },

                    dom: 'lBfrtip',

                    buttons: [
                        'excelHtml5',
                    {
                            extend: 'colvis',
                            collectionLayout: 'fixed four-column',
                            text: 'Visualização'
                        },
                        {
                            extend: 'colvisGroup',
                            text: 'Mostrar tudo',
                            show: ':hidden'
                        }
                    ],

                    iDisplayLength: 10, //está linha fará com que traga até 10 registros na minha página.
                    bPaginate: true, //coloco verdadeiro para ter paginação.
                    bInfo: true, //coloco verdadeiro também para trazer as informações das páginas.
                                    bFilter: true,
                                    "bAutoWidth": false,
                                    "bRetrieve": true,
                                    "bDestroy": true,
                                    "oLanguage": {
                                        "sEmptyTable":     "Nenhum registro encontrado na tabela",
                                        "sInfo": "Mostrar _START_ até _END_ do _TOTAL_ registros",
                                        "sInfoEmpty": "Mostrar 0 até 0 de 0 Registros",
                                        "sInfoFiltered": "(Filtrar de _MAX_ total registros)",
                                        "sInfoPostFix":    "",
                                        "sInfoThousands":  ".",
                                        "sLengthMenu": "Mostrar _MENU_ registros por pagina",
                                        "sLoadingRecords": "Carregando...",
                                        "sProcessing":     "Processando...",
                                        "sZeroRecords": "Nenhum registro encontrado",
                                        "sSearch": "Pesquisar: ",
                                        "oPaginate": {
                                            "sNext": "Proximo",
                                            "sPrevious": "Anterior",
                                            "sFirst": "Primeiro",
                                            "sLast":"Ultimo"
                                        },
                                        "oAria": {
                                            "sSortAscending":  ": Ordenar colunas de forma ascendente",
                                            "sSortDescending": ": Ordenar colunas de forma descendente"
                                        }
                                    },

                });
            } );
        </script>
8
  • Olá, obrigado pela respostas, não sei se "limitar" é a palavra certa, só quero que a DataTable não carregue todos os registros de uma vez, e sim, que carregue de 10 em 10... eu sei como exibir 5 em 5, 10 em 10, e etc... Commented 15/04/2020 às 17:01
  • Intendi, é isso mesmo, bom eu pelo menos colocando: iDisplayLength: 10, bPaginate: true, vou trazer só 10 registros na minha páginha, aí eu passo para a próxima e vejo os próximos 10 e assim por diante, mas tenho todos os registros do meu select já preparados para mostrar. Commented 15/04/2020 às 17:06
  • Vou testar, qualquer duvida eu te falo, obrigado! Commented 15/04/2020 às 17:07
  • Bom, adicionei ao meu script, e aparentemente não funcionou... a página ainda "demora"... <script> $(document).ready(function () { $('#tabela').DataTable({ "scrollX": true, "iDisplayLength": 10, //está linha fará com que traga até 10 registros na minha página. }); $('.dataTables_length').addClass('bs-select'); }); </script> Commented 15/04/2020 às 17:14
  • Ela demora para carregar mas trás os 10 registros na primeira página, ou ela demora para carregar e trás e trás mais 10 registros na página? Commented 15/04/2020 às 17:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .