Ir para conteúdo
Luccas Gaulia

DataTables (AJAX+PHP), Search, Sorting e Pagination não funcionam (Congelamento da tabela)

Recommended Posts

O DataTables está funcionando, todos os Buttons funcionam e chamam a tabela, estou utilizando load para abrir a tabela por ajax, faz o reload normalmente, porém as demais ações não, como:

  • Paginação, clica na página 2, muda as descrições abaixo e o número da página, mas não muda as linhas;

  • Buscar, não funciona, porém utilizando uma busca externa com myFunction de uma coluna, funciona;

  • Ordenar, não funciona, o ícone até muda para baixo ou para cima...

O que estou entendendo que os valores puxados pelo Ajax da lista gerado pelo PHP estão estáticas e nada muda.

Quando utilizava o foreach dentro da página e listava tudo, funciona corretamente... Estava querendo separar para poder trabalhar com reload e colocar inserir e editar com modais sem precisar atualizar a página.

equipAll.php

<?php

include '../datasourceGestao.php';

$datasource = new datasource();

$result = $datasource->getAllEquip();

$row = array();	

foreach ($result as $array) {
    $row[] = array('admin_id' => $array['admin_id'],
	    'first_name' => $array['first_name'],
	    'last_name' => $array['last_name'],
	    'email' => $array['email'],
	    'gender' => $array['gender'],
	    'birth_date' => $datasource->invertDate($array['birth_date']),
	    'telephone' => $array['telephone'],
	    'mobile' => $array['mobile'],
	    'nivel' => $array['nivel'],
	    'status' => $array['status']
    );
}

$output = array(
	"draw"       =>  intval($_POST["draw"]),
	"iTotalRecords" => count($row),
	"iTotalDisplayRecords" => count($row),
	"aaData" => $row
);

$response = json_encode($output);
echo $response;

?>
$(document).ready(function () {

  var table = $('#myTable').DataTable( {
        dom: 'Bfrtip', 
        processing:true,
        serverSide:true,
        ajax:{
          "url": "php_action/equipAll.php",
          "type":"POST"
        },
        autoWidth: false,
        responsive: true,
        orderCellsTop: true,
        bFilter: true,
        fixedHeader: false,
        deferRender: true,
        pagingType: "full_numbers", 
        lengthMenu: [
            [ 10, 25, 50, -1 ],
            [ '10 linhas', '25 linhas', '50 linhas', 'Todos' ]
        ],
        searching: true,
        select: true,        
        select: {
            style: 'multi+shift',
        },    
        columns: [
          { data: 'admin_id' },
          { data: 'action' },
          { data: 'first_name'},
          { data: 'last_name' },
          { data: 'email' },
          { data: 'gender',
              "defaultContent": "",
              "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                if("1"==sData){
                  $(nTd).html("<i class='fas fa-venus ze-icon-m'></i>");
                } 
                else if("2"==sData){
                  $(nTd).html("<i class='fas fa-mars ze-icon-m'></i>");
                }                  
                else{
                  $(nTd).html("<i class='fas fa-venus-mars ze-icon-m'></i>");
                }  
              }
            },
            { data: 'birth_date' },
            { data: 'telephone' },
            { data: 'mobile' },
            { data: 'nivel',
                "defaultContent": "",
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                  if("1"==sData){
                    $(nTd).html("<i class='fas fa-user-tie ze-icon-m'></i>");
                  }  
                  else{
                    $(nTd).html("<i class='fas fa-user ze-icon-m'></i>");
                  }  
                }
            },
            { data: 'status',
                "defaultContent": "",
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                  if("2"==sData){
                    $(nTd).html("<i class='fas fa-toggle-on ze-icon-m'></i>");
                  }  
                  else{
                    $(nTd).html("<i class='fas fa-toggle-off ze-icon-m'></i>");
                  }  
                }  
            }            
        ],
        columnDefs: [
            {
                "targets": [ 0 ],
                "visible": true,
                "searchable": true,
                "data": "admin_id"
            },
            {
                "targets": [ 1 ],
                "data": null,
                "defaultContent": "<div class='btn-group' role='group' aria-label='Button group with nested dropdown'><div class='btn-group' role='group'><button id='btnGroupDrop1' type='button' class='btn btn-secondary dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'><i class='fas fa-cogs ze-icon-m' aria-hidden='true'></i></button><div class='dropdown-menu' aria-labelledby='btnGroupDrop1'><button type='button' class='btn btn-link' id='Detail' name='Detail'><i class='fas fa-eye ze-icon-m' aria-hidden='true'></i></button><button type='button' class='btn btn-link' id='Edit' name='Edit'><i class='fas fa-edit ze-icon-m'></i></button><button type='button' class='btn btn-link' id='confirmDelete' name='confirmDelete'><i class='fas fa-trash-alt ze-icon-m'></i></button><button type='submit' class='btn btn-link' id ='confirmStatus' name='confirmStatus'><i class='fas fa-toggle-on ze-icon-m'></i></button></div></div></div> "
            },            
            {
                "targets": [ 2 ],
                "visible": true,
                "searchable": true,
                "data": "first_name"
            },
            {
                "targets": [ 3 ],
                "visible": true,
                "searchable": true,
                "data": "last_name"
            },
            {
                "targets": [ 4 ],
                "visible": true,
                "searchable": true,
                "data": "email"
            },
            {
                "targets": [ 5 ],
                "visible": false,
                "searchable": true,
                "data": "gender",
            },
            {
                "targets": [ 6 ],
                "visible": false,
                "searchable": true,
                "data": "birth_date"
            },
            {
                "targets": [ 7 ],
                "visible": false,
                "searchable": true,
                "data": "telephone"
            },
            {
                "targets": [ 8 ],
                "visible": false,
                "searchable": true,
                "data": "mobile"
            },
            {
                "targets": [ 9 ],
                "visible": false,
                "searchable": true,
                "data": "nivel"
            },
            {
                "targets": [ 10 ],
                "visible": false,
                "searchable": false,
                "data": "status"
            }    
        ],
        buttons: [
            {
              extend:    '',
              text:      '<i class="fa fa-user-plus ze-icon-gg" style="color:blue;"></i>',
              titleAttr: 'Novo Registro',
              action: function (e, node, config){
                $('#myModalInsert').modal('show')
              }
            },
            {
              extend:    'pageLength',
              text:      '<i class="fas fa-list-ol ze-icon-gg" style="color:purple;"></i>',
              titleAttr: 'Mostrar',                   
            },   
            {
              extend:    'copyHtml5',
              text:      '<i class="fas fa-copy ze-icon-gg" style="color:gray;"></i>',
              titleAttr: 'Copiar',       
              key: {
                key: 'c',
                altKey: true
              },
              exportOptions: {
                modifier: {
                  page: 'current',
                  columns: ':visible'              
                }
              }  
            },
            {
	            extend:    'excelHtml5',
              text:      '<i class="fas fa-file-excel ze-icon-gg" style="color:green;"></i>',
              titleAttr: 'Excel',
              exportOptions: {
	              modifier: {
	                page: 'current',
                  columns: ':visible'              
	              }
	            }            	
            },            
            {
              extend:    'pdfHtml5',
              text:      '<i class="far fa-file-pdf ze-icon-gg" style="color:red; background-color:transparent;"></i>',
              titleAttr: 'PDF',
              orientation: 'A4', //portrait or landscape
              alignment: 'center',     
              pageSize:  'LEGAL',
              exportOptions: {
                  columns: ':visible'                 
              }        
            },
            {
              extend:    'print',
              text:      '<i class="fas fa-print ze-icon-gg" style="color:orange;"></i>',
              titleAttr: 'Print',
              exportOptions: {
                columns: ':visible'              
              }          
            },
            {
              extend:    'colvis',
              text:      '<i class="fas fa-columns ze-icon-gg"></i>',
              titleAttr: 'Alterar Colunas Visiveis',
              "columns": ':not(.noVis)'         
        	  },
            {
              extend:    'selectNone',
              text:      '<i class="fas fa-th ze-icon-gg"></i>',
              titleAttr: 'Remover todos os selecionados'
            },
            {
              extend:    'selectRows' ,
              text:      '<i class="fas fa-minus ze-icon-gg"></i>',
              titleAttr: 'Selecionar linha(s)'
            },           {
              extend:    'selectColumns',
              text:      '<i class="fas fa-th-large ze-icon-gg"></i>',
              titleAttr: 'Selecionar coluna(s)'
            },
            {
              extend:    'selectCells',
              text:      '<i class="fas fa-object-group ze-icon-gg"></i>',
              titleAttr: 'Selecionar celula(s)'
            }                                           
        ],
        language: {
          "decimal":        "",
          "emptyTable":     "Não avaliação deste registro",
          "info":           "Mostrar de _START_ a _END_ de _TOTAL_ registros",
          "infoEmpty":      "Mostrar 0 de 0 de 0 registros",
          "infoFiltered":   "(Total de _MAX_ registros de entradas)",
          "infoPostFix":    "",
          "thousands":      ",",
          "lengthMenu":     "Mostrar _MENU_ registros",
          "loadingRecords": "Carregando...",
          "processing":     "Processando...",
          "search":         "Buscar:",
          "zeroRecords":    "Não há registros",
          "paginate": {
              "first":      "<<",
              "last":       ">>",
              "next":       ">",
              "previous":   "<" 
          },
          "loadingRecords": '&nbsp;',
          "processing": 'Processando...',        
          "aria": {
            "sortAscending":  ": Coluna ativa em ordem ascendente",
            "sortDescending": ": Coluna ativa em ordem descendente"
          },
          "select": {
              "rows": {
                "_": "(Selecionado %d linhas)",
                "0": "(Nenhuma linha selecionada)",
                "1": "(Selecionado 1 linha)"
              },
              "columns": {
                "_": "(Selecionado %d colunas)",
                "0": "(Nenhuma coluna selecionada)",
                "1": "(Selecionado 1 coluna)"
              }
          },
          "buttons": {
              "copy": "Copiar para a área de transferência",
              "copyTitle": "Cópia bem sucedida",
              "copySuccess": {
                  "1": "Uma linha copiada com sucesso",
                  "_": "%d linhas copiadas com sucesso"
              }
          }                      
        }

  });
<table id="myTable" class="table table-striped table-hover display nowrap dataTable" cellspacing="0">
   <thead class="thead-dark">
    <th class="ze-center" data-priority="1">ID</th>
   	<th class="ze-center" data-priority="1">Opções</th>
   	<th class="w-50" data-priority="1">Nome</th>
    <th class="w-50" data-priority="1">Sobrenome</th>
    <th class="ze-center">E-mail</th>
    <th class="ze-center">Gênero</th>
    <th class="ze-center">Dt Nasc.</th>
    <th class="ze-center">Telefone</th>
    <th class="ze-center">Mobile</th>
    <th class="ze-center">Nivel</th>
    <th class="ze-center">Status</th>
   </thead>
   <tbody>

<?php
    if (count($result) == 0) {
?>
      <td colspan="4">Não há Membros Cadastrados</td>
<?php
    }
    else {   	

	foreach ($result as $array) {
?>
    <tr>
      <td><?php echo utf8_encode($array['admin_id']); ?></td>
  	  <td>
	    </td>
	  <td class="ze-left">
      <?php echo utf8_encode($array['first_name']); ?>
	  </td>
    <td><?php echo utf8_encode($array['last_name']); ?></td>   
    <td><?php echo utf8_encode($array['email']); ?></td>
    <td><?php echo ($array['gender'] == 1 ? "Masculino" : "Feminino"); ?></td>
    <td><?php echo utf8_encode($array['birth_date']); ?></td>
    <td><?php echo utf8_encode($array['telephone']); ?></td>
    <td><?php echo utf8_encode($array['mobile']); ?></td>
    <td><?php echo utf8_encode($array['nivel']); ?></td>
    <td><?php echo utf8_encode($array['status']); ?></td>
	</tr>
  <?php }
  } ?>
	</tbody>
   <tfoot class="thead-dark">
    <th class="ze-center">ID</th>
   	<th class="ze-center">Opções</th>
   	<th>Nome</th>
    <th>Sobrenome</th>
    <th class="ze-center">E-mail</th>
    <th class="ze-center">Gênero</th>
    <th class="ze-center">Dt Nasc.</th>
    <th class="ze-center">Telefone</th>
    <th class="ze-center">Mobile</th>
    <th class="ze-center">Nivel</th>
    <th class="ze-center">Status</th>
   </tfoot>
</table>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por violin101
      Caros amigos, saudações.
       
      Humildemente peço desculpa por postar uma dúvida que tenho.

      Preciso salvar no MySql, os seguinte Registro:

      1 - Principal
      ====> minha dúvida começa aqui
      ==========> como faço para o Sistema Contar Automaticamente o que estiver despois do 1.____?
      1.01 - Matriz
      1.01.0001 - Estoque
      1.01.0002 - Oficina
      etc

      2 - Secundário
      2.01 - Loja_1
      2.01.0001 - Caixa
      2.01.0002 - Recepção
      etc
       
      Resumindo seria como se fosse um Cadastro de PLANO de CONTAS CONTÁBEIL.

      Grato,


      Cesar









       
    • Por violin101
      Caros amigos, saudações.

      Por favor, me perdoa em recorrer a orientação dos amigos.

      Preciso fazer um Relatório onde o usuário pode Gerar uma Lista com prazo para vencimento de: 15 / 20/ 30 dias da data atual.

      Tem como montar uma SQL para o sistema fazer uma busca no MySql por período ou dias próximo ao vencimento ?

      Tentei fazer assim, mas o SQL me traz tudo:
      $query = "SELECT faturamento.*, DATE_ADD(faturamento.dataVencimento, INTERVAL 30 DAY), fornecedor.* FROM faturamento INNER JOIN fornecedor ON fornecedor.idfornecedor = faturamento.id_fornecedor WHERE faturamento.statusFatur = 1 ORDER BY faturamento.idFaturamento $ordenar ";  
      Grato,
       
      Cesar
       
       
       
       
    • Por violin101
      Caros amigos, saudações
       
      Por favor, me perdoa em recorrer a orientação dos amigos, tenho uma dúvida.
       
      Gostaria de uma rotina onde o Sistema possa acusar para o usuário antes dos 30 dias, grifar na Tabela o aviso de vencimento próximo, por exemplo:
       
      Data Atual: 15/11/2024
                                           Vencimento
      Fornecedor.....................Data.....................Valor
      Fornecedor_1...........01/12/2024..........R$ 120,00 <== grifar a linha de Laranja
      Fornecedor_1...........01/01/2025..........R$ 130,00
      Fornecedor_2...........15/12/2024..........R$ 200,00 <== grifar a linha de Amarelo
      Fornecedor_2...........15/01/2025..........R$ 230,00
      Fornecedor_3...........20/12/2024..........R$ 150,00
       
      Alguém tem alguma dica ou leitura sobre este assunto ?

      Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.

      Por favor, me perdoa em recorrer a ajuda dos amigos, mas preciso entender uma processo que não estou conseguindo sucesso.

      Como mencionado no Título estou escrevendo um Sistema Web para Gerenciamento de Empresa.
       
      Minha dúvida, que preciso muito entender:
      - preciso agora escrever a Rotina para Emissão de NFe e essa parte não estou conseguindo.
       
      tenho assistido alguns vídeos e leituras, mas não estou conseguindo sucesso, já fiz toda as importações das LIB da NFePhp conforme orientação.

      Preciso de ajuda.

      Algum dos amigos tem conhecimento de algum passo-a-passo explicando a criação dessa rotina ?

      tenho visto alguns vídeos com LARAVEL, mas quando tento utilizar e converter para PHP+Codeiginter, dá uma fila de erros que não entendo, mesmo informando as lib necessárias.

      Alguns do amigo tem algum vídeo, leitura explicando essa parte ?

      Grato,

      Cesar.
    • Por violin101
      Caros amigos, saudações.

      Por favor, me perdoa em recorrer ao auxílio dos amigos, mas preciso entender e resolver um problema.
       
      Tenho uma Rotina que o usuário seleciona os produtos que deseja para requerer ao setor responsável.
       
      O usuário escolhe um produto qualquer e Clicla em um button para incluir a lista.

      O problema que estou enfrentando é que após escolher o produto e teclar ENTER o Sistema já salva no BD.
       
      Gostaria de criar uma Tecla de Atalho, para quando incluir/escolher o produto na lista, o usuário tecla como exemplo:
      ALT+A  para agregar a lista
      ALT+S para salvar a lista de itens desejados.

      Assim, quando teclar enter, o sistema não dispara o GRAVAR na Base de Dados.

      Grato,

      Cesar
       
       
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.