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.
       
      Estou com uma dúvida de validação de INPUT com função moeda.
       
      Tenho um input onde o usuário digita um valor qualquer, por exemplo: 1.234,56
      o problema é quando precisa atualizar o valor.
       
      Quando o usuário atualizar o input fica assim: 1.234,
       
      como faço para atualizar as casas decimais, conforme o valor for sendo alterado ?
       
      o input está assim:
       
      <div class="col-md-2"> <label for="">Valor Unitário</label> <input type="text" class="form-control" id="estoqprod" name="estoqprod" style="font-size:15px; font-weight:bold; width:100%; text-align:center;" placeholder="0,00" OnKeyUp="calcProd();" onkeypress="return(FormataMoeda(this,'.',',',event))" > </div>  
      a função para formatar o input para moeda está assim:
      obs.: a Função CalcProd está executando corretamente
      function calcProd(){ //Obter valor digitado do produto var estoq_prod = document.getElementById("estoqprod").value; //Remover ponto e trocar a virgula por ponto while (estoq_prod.indexOf(".") >= 0) { estoq_prod = estoq_prod.replace(".", ""); } estoq_prod = estoq_prod.replace(",","."); //Obter valor digitado do produto var prod_qtde = document.getElementById("qtde").value; //Remover ponto e trocar a virgula por ponto while (prod_qtde.indexOf(".") >= 0) { prod_qtde = prod_qtde.replace(".", ""); } prod_qtde = prod_qtde.replace(",","."); //Calcula o Valor do Desconto if (prod_qtde > 0 && estoq_prod > 0) { calc_total_produto = parseFloat(prod_qtde) - parseFloat(estoq_prod); var numero = calc_total_produto.toFixed(2).split('.'); //Calculo para não deixar GRAVAR valores negativos if (calc_total_produto < 0 ) { numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.') * -1; document.getElementById("qtdeTotal").value = numero.join(','); } else { numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.'); document.getElementById("qtdeTotal").value = numero.join(','); } } else { if (estoq_prod > 0) { document.getElementById("qtdeTotal").value = document.getElementById("estoqprod").value; } else { document.getElementById("qtdeTotal").value = "0,00"; } } } /*---Função para Formatar Campo para Moeda [R$]---*/ function FormataMoeda(objTextBox, SeparadorMilesimo, SeparadorDecimal, e){ var sep = 0; var key = ''; var i = j = 0; var len = len2 = 0; var strCheck = '0123456789'; var aux = aux2 = ''; var whichCode = (window.Event) ? e.which : e.keyCode; if (whichCode == 13) return true; key = String.fromCharCode(whichCode); // Valor para o código da Chave if (strCheck.indexOf(key) == -1) return false; // Chave inválida len = objTextBox.value.length; for(i = 0; i < len; i++) if ((objTextBox.value.charAt(i) != '0') && (objTextBox.value.charAt(i) != SeparadorDecimal)) break; aux = ''; for(; i < len; i++) if (strCheck.indexOf(objTextBox.value.charAt(i))!=-1) aux += objTextBox.value.charAt(i); aux += key; len = aux.length; if (len == 0) objTextBox.value = ''; if (len == 1) objTextBox.value = '0'+ SeparadorDecimal + '0' + aux; if (len == 2) objTextBox.value = '0'+ SeparadorDecimal + aux; if (len > 2) { aux2 = ''; for (j = 0, i = len - 3; i >= 0; i--) { if (j == 3) { aux2 += SeparadorMilesimo; j = 0; } aux2 += aux.charAt(i); j++; } objTextBox.value = ''; len2 = aux2.length; for (i = len2 - 1; i >= 0; i--) objTextBox.value += aux2.charAt(i); objTextBox.value += SeparadorDecimal + aux.substr(len - 2, len); } return false; }  
      Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.
       
      Estou com uma dúvida de validação de INPUT com função moeda.
       
      Tenho um input onde o usuário digita um valor qualquer, por exemplo: 1.234,56
      o problema é quando precisa atualizar o valor.
       
      Quando o usuário atualizar o input fica assim: 1.234,
       
      como faço para atualizar as casas decimais, conforme o valor for sendo alterado ?
       
      o input está assim:
       
      <div class="col-md-2"> <label for="">Valor Unitário</label> <input type="text" class="form-control" id="estoqprod" name="estoqprod" style="font-size:15px; font-weight:bold; width:100%; text-align:center;" placeholder="0,00" OnKeyUp="calcProd();" onkeypress="return(FormataMoeda(this,'.',',',event))" > </div>  
      a função para formatar o input para moeda está assim:
      obs.: a Função CalcProd está executando corretamente
      function calcProd(){ //Obter valor digitado do produto var estoq_prod = document.getElementById("estoqprod").value; //Remover ponto e trocar a virgula por ponto while (estoq_prod.indexOf(".") >= 0) { estoq_prod = estoq_prod.replace(".", ""); } estoq_prod = estoq_prod.replace(",","."); //Obter valor digitado do produto var prod_qtde = document.getElementById("qtde").value; //Remover ponto e trocar a virgula por ponto while (prod_qtde.indexOf(".") >= 0) { prod_qtde = prod_qtde.replace(".", ""); } prod_qtde = prod_qtde.replace(",","."); //Calcula o Valor do Desconto if (prod_qtde > 0 && estoq_prod > 0) { calc_total_produto = parseFloat(prod_qtde) - parseFloat(estoq_prod); var numero = calc_total_produto.toFixed(2).split('.'); //Calculo para não deixar GRAVAR valores negativos if (calc_total_produto < 0 ) { numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.') * -1; document.getElementById("qtdeTotal").value = numero.join(','); } else { numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.'); document.getElementById("qtdeTotal").value = numero.join(','); } } else { if (estoq_prod > 0) { document.getElementById("qtdeTotal").value = document.getElementById("estoqprod").value; } else { document.getElementById("qtdeTotal").value = "0,00"; } } } /*---Função para Formatar Campo para Moeda [R$]---*/ function FormataMoeda(objTextBox, SeparadorMilesimo, SeparadorDecimal, e){ var sep = 0; var key = ''; var i = j = 0; var len = len2 = 0; var strCheck = '0123456789'; var aux = aux2 = ''; var whichCode = (window.Event) ? e.which : e.keyCode; if (whichCode == 13) return true; key = String.fromCharCode(whichCode); // Valor para o código da Chave if (strCheck.indexOf(key) == -1) return false; // Chave inválida len = objTextBox.value.length; for(i = 0; i < len; i++) if ((objTextBox.value.charAt(i) != '0') && (objTextBox.value.charAt(i) != SeparadorDecimal)) break; aux = ''; for(; i < len; i++) if (strCheck.indexOf(objTextBox.value.charAt(i))!=-1) aux += objTextBox.value.charAt(i); aux += key; len = aux.length; if (len == 0) objTextBox.value = ''; if (len == 1) objTextBox.value = '0'+ SeparadorDecimal + '0' + aux; if (len == 2) objTextBox.value = '0'+ SeparadorDecimal + aux; if (len > 2) { aux2 = ''; for (j = 0, i = len - 3; i >= 0; i--) { if (j == 3) { aux2 += SeparadorMilesimo; j = 0; } aux2 += aux.charAt(i); j++; } objTextBox.value = ''; len2 = aux2.length; for (i = len2 - 1; i >= 0; i--) objTextBox.value += aux2.charAt(i); objTextBox.value += SeparadorDecimal + aux.substr(len - 2, len); } return false; }  
      Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.
       
      Desculpa postar minha dúvida, fiz várias pesquisa mas não tive sucesso.
       
      Como faço para capturar o ID do SELECT selecionado e passar para base_url ?
       
      Exemplo:
      após selecionar o ID passar para <?php echo base_url();?>estoque/ajuste/adicionar/ <== passar o ID aqui.
       
      <div class="col-md-6"> <label for="tipoDepart" class="control-label">Departamento:</label> <select name="tipoDepart" id="tipoDepart" style="width:100%;" class="form-control"> <option value="">Selecione um Departamento</option> <?php foreach ($dprts as $dp) { echo '<option value="'.$dp->idDepartamento.'">'.$dp->departamento.'</option>'; } ?> </select> </div> <div class="col-md-6"> <div class="card card-entrad"> <div class="card-header"> <label class="card-tlentr">Entrada - Estoque</label> </div> <div class="card-body"> <div style="text-align:center;"> <a href="<?php echo base_url();?>estoque/ajuste/adicionar/" <== COMO PASSO O ID SELECIONADO AQUI, PARA ABRIR A PÁGINA COM O ID DO DPTO ? class="btn btn-cinza">Adicionar</a> </div> </div> </div> </div>  
      Observação: preciso capturar e passar o ID para gerar TABELA referente a cada departamento.
       
      Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.
       
      Tem como passar para o Formulário um Campo vindo via AJAX no formato moeda ?
       
      Tenho uma rotina onde o usuário escolhe através de uma Lista na modal de Produtos e o sistema informa o formulário os seguintes campos:
      código | descrição | espécie | estoque atual.
       
      o estoque atual preciso passar nesse formato, para validação de quantidade: 15.00 ou 15,00.
      ou seja:
      converter de: 15 
      para: 15.00 com casas decimais

      tem como fazer isso ?
       
      Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.
       
      Tem como passar para o Formulário um Campo vindo via AJAX no formato moeda ?
       
      Tenho uma rotina onde o usuário escolhe através de uma Lista na modal de Produtos e o sistema informa o formulário os seguintes campos:
      código | descrição | espécie | estoque atual.
       
      o estoque atual preciso passar nesse formato, para validação de quantidade: 15.00 ou 15,00.

      tem como fazer isso ?
       
      Grato,
       
      Cesar
×

Informação importante

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