jquery Botão excluir e editar em um DataTable

luigiferrari · Junho 2, 2019

Bom dia, eu gostaria de fazer dois botões na datatable, um para excluir e outro que direcionaria o usuario para outra página.

Meu index.php está desta forma,

<?php include('scripts/inicio.php') ?>


<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script src="//cdn.datatables.net/plug-ins/1.10.19/i18n/Portuguese-Brasil.json"></script>

        <script src="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></script>
        <script src="../../extensions/Editor/css/editor.dataTables.min.css"></script>
<script>
        $(document).ready(function() {
            $('#listar-usuario').DataTable({            
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "proc_pesq_registro.php",
                    "type": "POST"

                }
            });
        } 
        );



 
</script>
        



              <script>
   
   // $(document).ready(function() {
        //$('#listar-usuario').DataTable( {
            //"language": {
    //"sEmptyTable": "Nenhum registro encontrado",
   // "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
    //"sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
   // "sInfoFiltered": "(Filtrados de _MAX_ registros)",
   // "sInfoPostFix": "",
    //"sInfoThousands": ".",
    //"sLengthMenu": "_MENU_ resultados por página",
    //"sLoadingRecords": "Carregando...",
    //"sProcessing": "Processando...",
    //"sZeroRecords": "Nenhum registro encontrado",
    //"sSearch": "Pesquisar",
    //"oPaginate": {
     //   "sNext": "Próximo",
       // "sPrevious": "Anterior",
        //"sFirst": "Primeiro",
        //"sLast": "Último"
    //},
    //"oAria": {
      //  "sSortAscending": ": Ordenar colunas de forma ascendente",
        //"sSortDescending": ": Ordenar colunas de forma descendente"
    //}
//}
  //      } );
    //} );
</script>

    <title>Registos</title>
  </head>
  <body>
     <div class="container">
            
            <div class="row">
                
                <div class="col-md-8 col-lg-8">
                  <a href="cadregistro.php" class="btn btn-primary">Voltar</a>
                  <a href="index.php" class="btn btn-primary">Home</a>
                    <hr class="new1"> 
                </div>
                    
                    <div class="col-md-4">
                         <a href="http://www.novalima.mg.gov.br/" target="_blank" class="thumbnail" >
                <img data-src="holder.js/100%x180" />
   
                <img src="imagens/logo.png" class="img-responsive" alt="PMNL" />
                         </a>
                        
                    </div>
            </div> 

            <center><h1>Registros</h1></center>
            <br><br><br>

            <div class="row">
        <div class="col-md-12">
            <br><br>
            <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title painel-title-responsive">Registros</h3>
                    </div>
<div class="panel-body">

            <table id="listar-usuario" class="table table-striped table table-bordered table-hover table-responsive">
                    
                <thead>
                 <tr>
                        <th>Data de Abertura</th>
                        <th>Data do Serviço</th>
                        <th>Data da Busca</th>
                        <th>Comentarios</th>
                        <th>Cliente</th>
                        <th>Problema</th>
                        <th>Prestador</th>
                        <th>Id</th>

                        
               
                        
                    </tr>
                </thead>
 
            </table>
        </div>
    </div>
</div>

</body>
<htnl>

PS: Também gostaria de deixar o form em português, o código está como comentário pois quando coloco ele, traduz, porém não lista nada...

Já a página proc_pesq_registro.php está desta forma:

<?php
include_once("conexoes/conexao.php");
?>

<?php


//Receber a requisão da pesquisa 
$requestData= $_REQUEST;


//Indice da coluna na tabela visualizar resultado => nome da coluna no banco de dados
$columns = array( 
	0 =>'dataabertura_os', 
	1 => 'dataservico_os',
	2=> 'databusca_os',
	3=> 'comentario_servico',
	4=> 'tbl_cliente_id_cliente',
	5=> 'tbl_prestador_id_prestador',
	6=> 'tbl_categoria_id_categoria',
	7=> 'id_os',

);

//Obtendo registros de número total sem qualquer pesquisa
$result_user = "SELECT * from tbl_os inner JOIN tbl_cliente
on tbl_cliente.id_cliente = tbl_os.tbl_cliente_id_cliente
inner JOIN tbl_prestador on tbl_prestador.id_prestador = tbl_os.tbl_prestador_id_prestador
INNER JOIN tbl_categoria on tbl_categoria.id_categoria = tbl_os.tbl_categoria_id_categoria
";
$resultado_user =mysqli_query($conn, $result_user);
$qnt_linhas = mysqli_num_rows($resultado_user);

//Obter os dados a serem apresentados
$result_usuarios = "SELECT * from tbl_os inner JOIN tbl_cliente
on tbl_cliente.id_cliente = tbl_os.tbl_cliente_id_cliente
inner JOIN tbl_prestador on tbl_prestador.id_prestador = tbl_os.tbl_prestador_id_prestador
INNER JOIN tbl_categoria on tbl_categoria.id_categoria = tbl_os.tbl_categoria_id_categoria
WHERE 1=1";

if( !empty($requestData['search']['value']) ) {   // se houver um parâmetro de pesquisa, $requestData['search']['value'] contém o parâmetro de pesquisa
	$result_usuarios.=" AND ( dataabertura_os LIKE '".$requestData['search']['value']."%' "; 

	$result_usuarios.=" OR dataservico_os LIKE '".$requestData['search']['value']."%' ";

	$result_usuarios.=" OR databusca_os LIKE '".$requestData['search']['value']."%' ";

	$result_usuarios.=" OR comentario_servico LIKE '".$requestData['search']['value']."%' ";

	$result_usuarios.=" OR nome_cliente LIKE '".$requestData['search']['value']."%' ";

	$result_usuarios.=" OR nome_prestador LIKE '".$requestData['search']['value']."%' ";

	$result_usuarios.=" OR descricao_categoria LIKE '".$requestData['search']['value']."%' ";

	$result_usuarios.=" OR id_os LIKE '".$requestData['search']['value']."%' )";


	
}

$resultado_usuarios=mysqli_query($conn, $result_usuarios);
$totalFiltered = mysqli_num_rows($resultado_usuarios);
//Ordenar o resultado
$result_usuarios.=" ORDER BY ". $columns[$requestData['order'][0]['column']]."   ".$requestData['order'][0]['dir']."  LIMIT ".$requestData['start']." ,".$requestData['length']."   ";
$resultado_usuarios=mysqli_query($conn, $result_usuarios);
	
// Ler e criar o array de dados
$dados = array();
while( $row_usuarios =mysqli_fetch_array($resultado_usuarios) ) {  
	$dado = array(); 
	$dado[] = $row_usuarios["dataabertura_os"];
	$dado[] = $row_usuarios["dataservico_os"];
	$dado[] = $row_usuarios["databusca_os"];
	$dado[] = utf8_encode($row_usuarios["comentario_servico"]);
	$dado[] =  utf8_encode($row_usuarios["nome_cliente"]);
	$dado[] = utf8_encode($row_usuarios["nome_prestador"]);
	$dado[] = utf8_encode($row_usuarios["descricao_categoria"]);
	$dado[] = utf8_encode($row_usuarios["id_os"]);

	

 
	$dados[] = $dado;
}


//Cria o array de informações a serem retornadas para o Javascript
$json_data = array(
	"draw" => intval( $requestData['draw'] ),//para cada requisição é enviado um número como parâmetro
	"recordsTotal" => intval( $qnt_linhas ),  //Quantidade de registros que há no banco de dados
	"recordsFiltered" => intval( $totalFiltered ), //Total de registros quando houver pesquisa
	"data" => $dados   //Array de dados completo dos dados retornados da tabela 
);

echo json_encode($json_data);  //enviar dados como formato json

Então para resumir, eu gostaria de saber como coloco um botão para excluir o registro, e um para direcionar o usuário para uma outra página para alterar aquele registro. Também gostaria de saber onde coloco o código para tradução...

Obrigado!

paulpolidoro · Junho 4, 2019

Eu costumo criar uma função para gerar os botões e retorna-los para o datatables:

<?php

...

while( $row_usuarios =mysqli_fetch_array($resultado_usuarios) ) {  
	$dado = array(); 
	$dado[] = $row_usuarios["dataabertura_os"];
	$dado[] = $row_usuarios["dataservico_os"];
	$dado[] = $row_usuarios["databusca_os"];
	$dado[] = utf8_encode($row_usuarios["comentario_servico"]);
	$dado[] =  utf8_encode($row_usuarios["nome_cliente"]);
	$dado[] = utf8_encode($row_usuarios["nome_prestador"]);
	$dado[] = utf8_encode($row_usuarios["descricao_categoria"]);
	$dado[] = utf8_encode($row_usuarios["id_os"]);
  
  	//Cria o botão de exclusão
	$dado[] = criarBotao($row_usuarios["id"]);

 
	$dados[] = $dado;
}

/**
 * função para cirar botão html
 *
 */
function criarBotaoExcluir($id_linha) {
	$botao = sprintf("<button onclick='excluir(%s)'>Excluir</button>", $id_linha);
	return $botao;
}

Depois disso só adicionar mais uma coluna na sua tabela do datatables para exibir o botão, e criar uma função javascript para executar a exclusão do item.

Para o botão de editar o principio é exatamente o mesmo.

luigiferrari · Junho 4, 2019

Muito obrigado!! Deu tudo certinho aqui.

oliveiros · Julho 30, 2019

Em 04/06/2019 at 10:47, paulpolidoro disse:

Eu costumo criar uma função para gerar os botões e retorna-los para o datatables:


<?php

...

while( $row_usuarios =mysqli_fetch_array($resultado_usuarios) ) {  
	$dado = array(); 
	$dado[] = $row_usuarios["dataabertura_os"];
	$dado[] = $row_usuarios["dataservico_os"];
	$dado[] = $row_usuarios["databusca_os"];
	$dado[] = utf8_encode($row_usuarios["comentario_servico"]);
	$dado[] =  utf8_encode($row_usuarios["nome_cliente"]);
	$dado[] = utf8_encode($row_usuarios["nome_prestador"]);
	$dado[] = utf8_encode($row_usuarios["descricao_categoria"]);
	$dado[] = utf8_encode($row_usuarios["id_os"]);
  
  	//Cria o botão de exclusão
	$dado[] = criarBotao($row_usuarios["id"]);

 
	$dados[] = $dado;
}

/**
 * função para cirar botão html
 *
 */
function criarBotaoExcluir($id_linha) {
	$botao = sprintf("<button onclick='excluir(%s)'>Excluir</button>", $id_linha);
	return $botao;
}

Depois disso só adicionar mais uma coluna na sua tabela do datatables para exibir o botão, e criar uma função javascript para executar a exclusão do item.

Para o botão de editar o principio é exatamente o mesmo.

A estrutura do meu é diferene. Testei essa e não exibiu os dados.
Na estrutura que estou usando não aceitou essa função.

Eu insiro um botão, ou no caso um radio input, assim:

while ($row = mysqli_fetch_assoc($empRecords)) {
    $data[] = array(
           "DATA_VENDA"=>$row['DATA_VENDA'],
           "SENHA"=>$row['SENHA'],
           "VALOR_TOTAL"=>$row['VALOR_TOTAL'],
           "PAGO"=>$row['PAGO'],
           "NOME"=>$row['NOME'],
           "radio"=>"<label><input type='radio' name='prod' value='$row[CODIGO]'>Produtos</label>"
       );
}

Mas onde vocês estão escrevendo a função java scrip para pegar o evento do botão, pois esse arquivo em json não aceita.

Grato

oliveiros · Agosto 2, 2019

Saudações!

Minha intenção era por botões de imprimir e ver produtos onde eu só precisasse de um único click.

Como inicialmente não consegui, acabei colocando os botões com os eventos no html do datatables e o input rádio no php pegando o idl . O que ficou melhor, pois ao retira-los da tabela, tenho mais espaço para listar outras colunas, apesar que posso oculta-las, mas os botões estando a vista, é mais rápido o acesso e aqui às vezes no atendimento não tenho tempo nem de clicar para mostrar as colunas(risos).

No entanto, acabei conseguindo por no php. Segue o código para ajudar alguém que talvez venha a precisar:

$data = array();

while ($row = mysqli_fetch_assoc($empRecords)) {
    $data[] = array(
    		"DATA_VENDA"=>$row['DATA_VENDA'],
    		"SENHA"=>$row['SENHA'],
    		"VALOR_TOTAL"=>$row['VALOR_TOTAL'],
    		"PAGO"=>$row['PAGO'],
    		"NOME"=>$row['NOME'],
			"radio"=>"<label><input type='radio' name='produtosvr' value='$row[CODIGO]'>teste</input></label>
			<script> $(document).ready(function(){
               $('input[name=produtosvr]').click(function() {
				   alert('')
            $.post('../centralmix/insere3.php', // post em insere  
                  
				  function(valor){
                     $('#saida').html(valor); //retorna o resultado
                  })
			   })
	  })
	  </script>",
    	);
}

oliveiros · Agosto 2, 2019

Fiz o teste aqui:

Colocando no php eu mando imprimir e ele imprime três vezes.

Alguém sabe dizer porque?

Jack Oliveira · Agosto 2, 2019

1 hora atrás, oliveiros disse:

Fiz o teste aqui:

Colocando no php eu mando imprimir e ele imprime três vezes.

Alguém sabe dizer porque?

Amigo pega esta base do meu aqui e tenta ai

 <?php  
 defined('BASEPATH') OR exit('No direct script access allowed');  
 class Crud extends CI_Controller {  
      //functions  
      function index(){  
           $data["title"] = "Titulo do Meu Site Aqui";  
           $this->load->view('crud_view', $data);  
      }  
      function fetch_user(){  
           $this->load->model("crud_model");  
           $fetch_data = $this->crud_model->make_datatables();  
           $data = array();  
           foreach($fetch_data as $row)  
           {  
                $sub_array = array();  
                $sub_array[] = '<img src="'.base_url().'upload/'.$row->image.'" class="img-thumbnail" width="50" height="35" />';  
                $sub_array[] = $row->first_name;  
                $sub_array[] = $row->last_name;  
                $sub_array[] = '<button type="button" name="update" id="'.$row->id.'" class="btn btn-warning btn-xs">Editar</button>';  
                $sub_array[] = '<button type="button" name="delete" id="'.$row->id.'" class="btn btn-danger btn-xs">Deletar</button>';  
                $data[] = $sub_array;  
           }  
           $output = array(  
                "draw"                    =>     intval($_POST["draw"]),  
                "recordsTotal"          =>      $this->crud_model->get_all_data(),  
                "recordsFiltered"     =>     $this->crud_model->get_filtered_data(),  
                "data"                    =>     $data  
           );  
           echo json_encode($output);  
      }  
 }

Veja se vai te ajudar....

oliveiros · Agosto 2, 2019

2 horas atrás, oliveiros disse:

Fiz o teste aqui:

Colocando no php eu mando imprimir e ele imprime três vezes.

Alguém sabe dizer porque?

Deve ser porque ta dentro do while.... iiii!!!!

Arquivado

jquery Botão excluir e editar em um DataTable

Pergunta

luigiferrari 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

7 respostas a esta questão

Recommended Posts

paulpolidoro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

luigiferrari 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

oliveiros 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

oliveiros 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

oliveiros 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jack Oliveira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

oliveiros 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Conteúdo Similar

Fóruns

Tempo Real

Informação importante