how to add unique buttons to each row of a datatable?

how to add unique buttons to each row of a datatable?

Jhan_Carlo92Jhan_Carlo92 Posts: 1Questions: 0Answers: 0
edited December 2021 in Free community support

Hello, good evening!!
I have a table of indicators connected to the database with 2 filters per area and per process where it is required to insert a specific indicator for each row of the table, currently, place the indicator directly in the database through the properties of the windows. open. of javascript.Is there a way to do the same but with manners or popups?

My code currently works, I only need to place independent buttons for each row as I mentioned before.
It would be helpful if you could help me with this.

This is my code:
Index.php

<?php
include('database_connection.php');

$proceso = '';
$query = "SELECT DISTINCT proceso FROM Indicador ORDER BY proceso ASC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
 $proceso .= '<option value="'.$row['proceso'].'">'.$row['proceso'].'</option>';
}

$area = '';
$query = "SELECT DISTINCT area FROM Indicador ORDER BY area ASC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
 $area .= '<option value="'.$row['area'].'">'.$row['area'].'</option>';
}

?>
<html>
 <head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>  
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
      .table>thead>tr>th{
      background-color: #b5b5b5;
      }
      .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{
          background-color: #4f5254;
      }
      #filter{
          background-color: #4f5254
      }
           
  </style>
 </head>
 <body>
  <div class="container box">
   <h3 align="center"></h3>
   <br />
   <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4">
     <div class="form-group">
      <select name="filter_area" id="filter_area" class="form-control" required>
       <option value="">--Elegir área--</option>
       <?php echo $area; ?>
      </select>
     </div>
     <div class="form-group">
      <select name="filter_proceso" id="filter_proceso" class="form-control" required>
       <option value="">--Elegir proceso--</option>
       <?php echo $proceso; ?>
      </select>
     </div>
     <div class="form-group" align="center">
      <button type="button" name="filter" id="filter" class="btn btn-info">Filtrar</button>
     </div>
    </div>
    <div class="col-md-4"></div>
   </div>
   <div class="table-responsive">
    <table id="customer_data" class="table table-bordered table-striped">
     <thead>
      <tr>
       <th width="30%">Nombre del Indicador</th>
       <th width="5%">Area</th>
       <th width="20%">Proceso</th>
       <th width="10%">Tipo</th>
       <th width="15%">Cod Indicador</th>
      </tr>
     </thead>
    </table>
    <br />
    <br />
    <br />
   </div>
  </div>
 </body>
</html>

<script type="text/javascript" language="javascript" >
 $(document).ready(function(){
  
  fill_datatable();
  
  function fill_datatable(filter_area = '', filter_proceso = '')
  {
   var dataTable = $('#customer_data').DataTable({
    "language": {
    "url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"
    },
    "autoWidth": true,
    "processing" : true,
    "serverSide" : true,
    "order" : [],
    "searching" : true,
    "paging":   false,
    "ordering": false,
    "info":     false,
    "ajax" : {
     url:"fetch.php",
     type:"POST",
     data:{
      filter_area:filter_area, filter_proceso:filter_proceso
     }
    }
   });
  }
  
  $('#filter').click(function(){
   var filter_area = $('#filter_area').val();
   var filter_proceso = $('#filter_proceso').val();
   if(filter_area != '' && filter_proceso != '')
   {
    $('#customer_data').DataTable().destroy();
    fill_datatable(filter_area, filter_proceso);
   }
   else
   {
    alert('Select Both filter option');
    $('#customer_data').DataTable().destroy();
    fill_datatable();
   }
  });
 });
 
</script>
**fetch.php**
<?php

include('database_connection.php');

$column = array('nombre','area', 'proceso', 'tipo', 'archivo','cod_indicador');

$query = "
SELECT * FROM Indicador 
";

if(isset($_POST['filter_area'], $_POST['filter_proceso']) && $_POST['filter_area'] != '' && $_POST['filter_proceso'] != '')
{
 $query .= '
 WHERE area = "'.$_POST['filter_area'].'" AND proceso = "'.$_POST['filter_proceso'].'" 
 ';
}

if(isset($_POST['order']))
{
 $query .= 'ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' ';
}
else
{
 $query .= 'ORDER BY id DESC ';
}

$query1 = '';

if($_POST["length"] != -1)
{
 $query1 = 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}

$statement = $connect->prepare($query);

$statement->execute();

$number_filter_row = $statement->rowCount();

$statement = $connect->prepare($query . $query1);

$statement->execute();

$result = $statement->fetchAll();

$data = array();

foreach($result as $row)
{
 $sub_array = array();
 $sub_array[] = $row['nombre'];
 $sub_array[] = $row['area'];
 $sub_array[] = $row['proceso'];
 $sub_array[] = $row['tipo'];
 $sub_array[] = $row['cod_indicador'];
 $data[] = $sub_array;
}

function count_all_data($connect)
{
 $query = "SELECT * FROM Indicador";
 $statement = $connect->prepare($query);
 $statement->execute();
 return $statement->rowCount();
}

$output = array(
 "draw"       =>  intval($_POST["draw"]),
 "recordsTotal"   =>  count_all_data($connect),
 "recordsFiltered"  =>  $number_filter_row,
 "data"       =>  $data
);

echo json_encode($output);

?>

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Replies

Sign In or Register to comment.