Data Passing from an SQL Query to an HTML Table

Asked

Viewed 311 times

0

I am developing a code and the section related to displaying the data that is in SQL for HTML Table are not working. In this case I created a function in my DAO with the SQL query and passed to a kind of Controller. In HTML, I made a Jquery request calling this controller, but it is not working. Could someone explain to me what is wrong or has some other kind of solution

Below is the code (first the excerpt from my DAO file) 

    //Função para listar os registros 
        public function listarOperadoras() { 



            //Cria o bloco Try Catch para exibir os resultados 
            try {
                    $querySelect = "
                        SELECT [operadora],[sigla],[observacao] FROM [dbo].[tbl_oper_escalona]
                    "; 

                    abreConexao(); //Abre a conexão com o banco de dados 
                    global $sql; //Variavel para efetuar a Conexão 

                    $result = $sql->prepare($querySelect); //Prepara a Consulta  
                    $result->execute(); //Executa a Consulta 

                    sleep(1); //1 Segundo 
                    $json_result =  json_encode($result->fetchAll(PDO::FETCH_ASSOC));


                    fechaConexao();

                } catch (Exception $e) {
                    print "Ocorreu um erro: <code style='color: red;>".$e->getMessage."</code>"; 
                }   
        return $json_result;
      }

Now my 'Controller' in case I’m using a Switch Case, the Register option is already done and working so I’m only posting the 'View' that is showing the defect. 

case 'Visualizar': 

        $listOperadoras = new DaoOperadoras(); 
        $listOperadoras->listarOperadoras();  

    break;

And now the HTML code 

<!DOCTYPE html>


  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">

  <!--CSS Bootstrap e Próprios-->
  <link rel="stylesheet" type="text/css" href="../LIB/CSS/bootstrap.min.css"/> <!--BootStrap-->
  <link rel="stylesheet" type="text/css" href="../LIB/CSS/newPages.css"/><!--CSS Adicional-->

  <!--Bootstrap JS--> 
  <script type="text/javascript" src="../LIB/JS/jquery3.1.1.js"></script>
  <script type="text/javascript" charset="utf-8" src="../LIB/JS/jquery-1.11.1.min.js"></script> 
  <script type="text/javascript" charset="utf-8" src="../LIB/JS/bootstrap.min.js"></script>  

  <!--Auto Complete Source-->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <style type="text/css">
    body { 
        background-color: #F0F8FF;
    }   

  </style> 

  <script  type="text/javascript">
        $(document).ready( function() {

            //Captura o retorno da tabela que contem as unidades 
            $.getJSON('../CONTROLLERS/OperadorasController.php?opcao=Visualizar', function(data) {
                    var Operadoras = ""; //Variavel Operadora que será montada  

                    for (var i = 0; i < data.length ; i++) {
                        operadoras += "<tr>"; 
                        operadoras += "<td>" + data[i].operadora + "</td>"; 
                        operadoras += "<td>" + data[i].sigla + "</td>"; 
                        operadoras += "<td>" + data[i].observacao + "</td>"; 
                        operadoras += "<td>"; 
                        operadoras += "<button type='button' title='Editar' class='btn btn-link' id='btnEdit'>";  
                        operadoras += "<i class='fa fa-cut' style='font-size:20px; color:#0066F8;'></i>"; 
                        operadoras += "</button>"; 
                        operadoras += "</td>";
                        operadoras += "<td>"; 
                        operadoras += "<button type='button' title='Excluir' class='btn btn-link' id='btnExclui'>";  
                        operadoras += "<i class='fa fa-eraser' style='font-size:20px; color:#0066F8;'></i>"; 
                        operadoras += "</button>"; 
                        operadoras += "</td>";
                        operadoras += "</tr>";  
                }  
                 //Preenche a tabela 
                 $("#exiOperadoras").html(operadoras);   

            });

        });
  </script>  



    <table class="table table-striped table-bordered table-responsive"> 
        <thead class="bg-primary">
            <tr>
                <th>Nome da Operadora</th>
                <th>Sigla</th>
                <th>Obs</th>
                <th>Alterar</th>
                <th>Excluir</th>        
            </tr>   
        </thead>    

        <tbody id="exiOperadoras">  


        </tbody>    
    </table>

Thank you in advance

php html jquery sql
  • 1

    What exactly is your doubt?

  • In case I need the data of my query to appear in the HTML table, for this I am using the Script in Jquery the beginning of HTML.

  • Look at my observations.

1 answer

1


The big problem in your question is either a typo or you disregarded Javascript’s sensitivity to box variation. You declare the variable Operadoras and tries to assign values to operadoras.

But taking advantage of your information that you are using Jquery would recommend you take advantage of its interpolation feature to build your string instead of breaking and concatenating, as well as the use of ` (crase) when declaring a string that has multiple lines.

This will make your code much more readable and less error-prone during editing.

let data = [
  {operadora: '0001', sigla: 'A',observacao: 'nada a declarar'},
  {operadora: '0002', sigla: 'B',observacao: 'não sei'},
  {operadora: '0003',sigla: 'A',observacao: 'qual foi a pergunta mesmo?'}];

$(document).ready(function() {

  var operadoras = ""; //Variavel Operadora que será montada  

  for (var i = 0; i < data.length; i++) {
    operadoras += `
      <tr>
        <td>${data[i].operadora}</td>
        <td>${data[i].sigla}</td>
        <td>${data[i].observacao}</td>
        <td>
          <button type='button' title='Editar' class='btn btn-link' id='btnEdit'>
            <i class='fa fa-cut' style='font-size:20px; color:#0066F8;'></i>
           </button>
        </td>
        <td>
          <button type='button' title='Excluir' class='btn btn-link' id='btnExclui'>
            <i class='fa fa-eraser' style='font-size:20px; color:#0066F8;'></i>
          </button>
        </td>
      </tr>`;
  }
  //Preenche a tabela 
  $("#exiOperadoras").html(operadoras);

});
@import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css";
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<table class="table table-striped table-bordered table-responsive">
  <thead class="bg-primary">
    <tr>
      <th>Nome da Operadora</th>
      <th>Sigla</th>
      <th>Obs</th>
      <th>Alterar</th>
      <th>Excluir</th>
    </tr>
  </thead>
  <tbody id="exiOperadoras">
  </tbody>
</table>

Browser other questions tagged php html jquery sql

You are not signed in. Login or sign up in order to post.