Jump to content
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>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Kakaroto1309
      Preciso de uma ajuda para conectar com o banco. Estava tudo funcionando normalmente com MYSQL agora parou tudo e estou tentando trocar para MYSQLI.
      Não acho o erro, já tentei de tudo.
       
      connection.php
      <? function conecta() { $host = "localhost"; $user = "admin"; $pass = "123456789"; $db = "principal"; //Conexão $conexao = mysqli_connect($host, $user, $pass) or die("Erro na conexão:".mysqli_error()); //Selecionar BD mysqli_select_db($conexao,$db) or die("Erro ao selecionar BD"); } function desconecta() { mysqli_close(); } ?> validate.php
      <? if (empty($_POST) and (empty($_POST['cpUsuario']) OR empty($_POST['cpSenha']))) { header("Location: ../login.php"); exit; } else { include("connection.php"); conecta(); $varUsuario = $_POST['cpUsuario']; $varSenha = sha1($_POST['cpSenha']); $stt = "SELECT ID,txNome,txNivel FROM tbUsuario WHERE txUsuario='$varUsuario' and txSenha='$varSenha' LIMIT 1"; $sql = mysqli_query($conexao,$stt) or die(mysqli_error($conexao)); $existe = mysqli_num_rows($sql); if ($existe == 0) { echo "Login invalido ou inexistente na base"; exit; } else { $resultado = mysqli_fetch_assoc($sql); if (!isset($_SESSION)) { session_start(); } $_SESSION['UsuarioID'] = $resultado['ID']; $_SESSION['UsuarioNOME'] = $resultado['txNome']; $_SESSION['UsuarioNIVEL'] = $resultado['txNivel']; header("Location: ../menu.php"); exit; } } ?> O erro agora está dando o seguinte:
      PHP Warning:  mysqli_query() expects parameter 1 to be mysqli, null given in /home4/public_html/connection/validate.php on line 17
       
      Linha 17 é essa:
      $sql = mysqli_query($conexao,$stt) or die(mysqli_error($conexao));
       
      Se eu tiro o $conexao do mysqli_query ele da erro de "mysqli_query() expects at least 2 parameters, 1 given" e se eu coloco o erro é "mysqli_query() expects parameter 1 to be mysqli, null given"
       
      Alguem sabe como posso resolver isso?
    • By alvarengacarlos
      Tenho uma Api rest feita com Symfony. Esta api retorna consultas no formato json.
      Tudo foi testado no ambiente localhost:8080.
      Esta é uma controller que retorna a consulta:
      <?php namespace App\Controller\Animal\Bull; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; use Symfony\Component\Routing\Annotation\Route; use Symfony\Component\HttpFoundation\Response; use Symfony\Component\HttpFoundation\Request; use App\Entity\Animal\Bull\Bull; /** * @Route("/animal") */ class BullGetController extends AbstractController { /** * @Route("/bull/getBull/{id}/{idEarring}", methods={"GET"}, name="get_bull") */ public function getBull(int $id, int $idEarring): Response { $repository = $this->getDoctrine() ->getRepository(Bull::class); $bull = $repository->findOneBy([ 'id' => $id, 'idEarring' => $idEarring ]); return $this->json([ 'idEarring' => $bull->getIdEarring(), 'name' => $bull->getName(), 'breed' => $bull->getBreed(), 'dateOfBirth' => ($bull->getDateOfBirth())->format('Y-m-d'), 'weight' => $bull->getWeight() ]); } } Com pode se ver na imagem consultas feitas a partir do navegador são retornadas respostas.
       
      Quando é feita uma consulta por meio do Fetch javascript o mesmo não ocorre. A resposta obtida não é igual.
      'use strict'; let url = 'http://localhost:8080/animal/bull/getBull/2/2'; const promise = fetch(url) .then( (response) => console.log(response) ); Gostaria de saber o porque disso? Porque a resposta não é igual.
       


    • By Quencyjones79
      Olá a todos, sou novo na área de multimídia. Estou a seguir a um momento um ebook sobre a criação de uma base de dados e também a criação de tabelas. Mas quando vinculei as tabelas do banco de dados, no phpmyadmin me deu alguns erros. Fiz a correspondência da chave primária (artist_id da tabela Artist) com a artist_id da tabela Prints (chave estrangeira) e assim por diante. O problema é que ele não mostra minhas relações das tabelas e me dá uma mensagem de erro. Então, alguns de vocês poderiam me ajudar, por favor, a consertar esta situação. Eu serei grato. Cumprimentos.
       
      Ps .: Abaixo envio o arquivo Sql.
       
      Atentamente,

      José Moreira
      -- phpMyAdmin SQL Dump -- version 5.0.2 -- https://www.phpmyadmin.net/ -- -- Host: 127.0.0.1 -- Generation Time: Jan 07, 2021 at 08:49 PM -- Server version: 10.4.14-MariaDB -- PHP Version: 7.2.33 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `ecommerce` -- -- -------------------------------------------------------- -- -- Table structure for table `artists` -- CREATE TABLE `artists` ( `artist_id` int(10) UNSIGNED NOT NULL, `first_name` varchar(20) DEFAULT NULL, `middle_name` varchar(20) DEFAULT NULL, `last_name` varchar(40) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4; -- -------------------------------------------------------- -- -- Table structure for table `customers` -- CREATE TABLE `customers` ( `customer_id` int(10) UNSIGNED NOT NULL, `email` varchar(60) NOT NULL, `pass` char(40) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4; -- -------------------------------------------------------- -- -- Table structure for table `orders` -- CREATE TABLE `orders` ( `order_id` int(10) UNSIGNED NOT NULL, `customer_id` int(10) UNSIGNED NOT NULL, `total` decimal(10,2) UNSIGNED NOT NULL, `order_date` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp() ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- -------------------------------------------------------- -- -- Table structure for table `order_contents` -- CREATE TABLE `order_contents` ( `oc_id` int(10) UNSIGNED NOT NULL, `order_id` int(10) UNSIGNED NOT NULL, `print_id` int(10) UNSIGNED NOT NULL, `quantity` tinyint(3) UNSIGNED NOT NULL DEFAULT 1, `price` decimal(6,2) UNSIGNED NOT NULL, `ship_date` datetime DEFAULT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- -------------------------------------------------------- -- -- Table structure for table `prints` -- CREATE TABLE `prints` ( `print_id` int(10) UNSIGNED NOT NULL, `artist_id` int(10) UNSIGNED NOT NULL, `print_name` varchar(60) NOT NULL, `price` decimal(6,2) UNSIGNED NOT NULL, `size` varchar(60) DEFAULT NULL, `description` varchar(255) DEFAULT NULL, `image_name` varchar(60) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4; -- -- Indexes for dumped tables -- -- -- Indexes for table `artists` -- ALTER TABLE `artists` ADD PRIMARY KEY (`artist_id`), ADD UNIQUE KEY `full_name` (`last_name`,`first_name`,`middle_name`); -- -- Indexes for table `customers` -- ALTER TABLE `customers` ADD PRIMARY KEY (`customer_id`), ADD UNIQUE KEY `email` (`email`), ADD KEY `login` (`email`,`pass`); -- -- Indexes for table `orders` -- ALTER TABLE `orders` ADD PRIMARY KEY (`order_id`), ADD KEY `customer_id` (`customer_id`), ADD KEY `order_date` (`order_date`); -- -- Indexes for table `order_contents` -- ALTER TABLE `order_contents` ADD PRIMARY KEY (`oc_id`), ADD KEY `order_id` (`order_id`), ADD KEY `print_id` (`print_id`), ADD KEY `ship_date` (`ship_date`); -- -- Indexes for table `prints` -- ALTER TABLE `prints` ADD PRIMARY KEY (`print_id`), ADD KEY `artist_id` (`artist_id`), ADD KEY `print_name` (`print_name`), ADD KEY `price` (`price`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `artists` -- ALTER TABLE `artists` MODIFY `artist_id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT; -- -- AUTO_INCREMENT for table `customers` -- ALTER TABLE `customers` MODIFY `customer_id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT; -- -- AUTO_INCREMENT for table `orders` -- ALTER TABLE `orders` MODIFY `order_id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT; -- -- AUTO_INCREMENT for table `order_contents` -- ALTER TABLE `order_contents` MODIFY `oc_id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT; -- -- AUTO_INCREMENT for table `prints` -- ALTER TABLE `prints` MODIFY `print_id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
       

    • By Caio Vargas
      Boa tarde pessoal blz ?
      Estou com uma dúvida sobre implementação do checkout transparente do mercado pago 
       
      Alguém já fez essa implementação eu estou com dúvida sobre a documentação que não estou conseguindo intender 
       
      Pelo botão eu só consigo insistir um produtos só então a opção correta seria o checkout transparente mesmo se alguém puder me ajudar agradeço 
    • By joeythai
      Bom dia pessoal, minha dúvida é simples, vi que alguns arquivos xml tem a saída de data desta forma  "2020-01-22T09:18:50", como faço pra imprimir a data desta forma ? E o que significa esse T?]
      Eu estou usando o Carbon, to tentando encontrar esse padrão na documentação.
      2018-05-29T17:47:57 2018-05-29T17:47:57
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.