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 Giovanird
      O script abaixo atualiza a página (centro.php) a cada um minuto e dentro desta página terei uma div que não poderá ser atualizada.
      Tentei colocar esta div como pagina com setInterval de 100 minutos porem ao dar o refresh no centro.php  tudo vai junto.  Será que isto é possivel?

      Desde já meu muito obrigado!
      <script> function atualiza(){ var url = 'centro.php'; $.get(url, function(dataReturn) { $('#centro').html(dataReturn); }); } setInterval("atualiza()",60000); </script>  

    • Por luiz monteiro
      Olá. Tenho 3 formulários em uma mesma pagina, onde cada um tem 1 input type text.
      O que preciso é recuperar o nome desses inputs e o valor correspondente ao formulário submetido.
      =============
      form name="formulario1" id="formulario1"
      input type="text" name="nome1" value="valor1" /form
      form name="formulario2" id="formulario2"
      input type="text" name="nome2" value="valor2" /form
      form name="formulario3" id="formulario3"
      input type="text" name="nome3" value="valor3" /form
      =============
      ..........
      var formulario_submetido = document.getElementById("formulario1"); formulario_submetido.addEventListener('submit', function(e) { e.preventDefault(); //tentei console.log(document.querySelectorAll('#'+this.id + ' input').name); //tentei var formula = new FormData(formulario_submetido); console.log(formula.input['type=text'].name); //tentei console.log(formula.get(input['type=text']).name); ..........
        no console.log(e), ele está nessa hierarquia   form -> srcElement -> input -> attributes -> name 
      Como recupero o valor do name dele e o valor do value?
       
      Agradeço desde já.
    • Por ILR master
      Fala pessoal, tudo bem?
       
      Eu tenho um dominio e vários subdomios dentro.
      Quero saber como recuperar um cookie nos subdominios, uma vez que ele foi criado em um subdominio específico.
       
      Estrutura:
      Tô criando o cookie em usuario.dominio.com.br com o seguinte código:
       
      $valor = md5(uniqid(rand(), true));
      setcookie("token", $valor, time() + (60 * 10), "/", "www.dominio.com.br");
       
      Porém, quero recuperar esse valor em todos os outros subdominios, mas esse codigo aí não tá funcionando.
       
      Alguém pode ajudar?
      Valeu
       
    • Por landerbadi
      Boa tarde pessoal. Estou tentado fazer uma consulta no banco de dados porém estou tendo dificuldades. Tenho uma tabela chamada "itens" com os seguintes campos: id, item, ativo. Nela tem cadastrado vários itens. No campo ativo eu coloco a letra "S" para informar que este item está ativo no sistema. Por exemplo: 1, casa, S 2, mesa, S 3, cama, S 4, moto S 5, rádio O quinto registro "radio" não está ativo no sistema pois não tem um "S" no campo ativo. E outra tabela chamada "produtos" com os seguintes campos (id, item1, item2, item3) com os seguintes registros: 1, casa, mesa, moto 2, mesa, casa, cama 3, rádio, cama, mesa Eu preciso fazer uma busca na tabela produtos da seguinte maneira: Eu escolho um registro na tabela "itens", por exemplo "mesa". Preciso fazer com que o php me liste todos os registros da tabela "produtos" que contenham a palavra "mesa". Até aqui tudo bem eu consigo listar. Estou fazendo assim: <?php $item = "mesa" $sql = mysqli_query($conn, "SELECT * FROM produtos WHERE item1 LIKE '$item' OR item2 LIKE '$item' OR item3 LIKE '$item' LIMIT 10"); while($aux = mysqli_fetch_assoc($sql)) { $id = $aux["id"]; $item1 = $aux["item1"]; $item2 = $aux["item2"]; $item3 = $aux["item3"]; echo $id . " - " . $item1 . ", " . $item2 . ", " $item3 . "<br>"; } ?> O problema é que está listando todos os registros que contém o item mesa. Eu preciso que o php verifique os demais item e me liste somente os registro em que todos os registros estejam ativos no sistema. No exemplo acima ele não deveria listar o registro 3. pois nesse registro contém o item "radio" e este item não está ativo no sistema. Ou seja, o registro "radio" na tabela itens não possui um "S" na coluna "ativo". Alguém sabe como resolver isso?
    • Por ILR master
      Fala galera.
      Espero que todos estejam bem.
      Seguinte: Tenho um arquivo xml onde alguns campos estão com : (dois pontos), como o exemplo abaixo:
       
      <item>
      <title>
      d sa dsad sad sadasdas
      </title>
      <link>
      dsadas dsa sad asd as dsada
      </link>
      <pubDate>sadasdasdsa as</pubDate>
      <dc:creator>
      d sad sad sa ad as das
      </dc:creator>
      </item>
       
      Meu código:
       
      $link = "noticias.xml"; 
      $xml = simplexml_load_file($link); 
      foreach($xml -> channel as $ite) {     
           $titulo = $ite -> item->title;
           $urltitulo = $ite -> item->link;
           print $urltitulo = $ite -> item->dc:creator;
      } //fim do foreach
      ?>
       
      Esse campo dc:creator eu não consigo ler. Como faço?
       
      Agradeço quem puder me ajudar.
       
      Abs
       
       
×

Informação importante

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