Finder in ajax [closed]

0

I found this code example in ajax that shows all the data of a table and I want to place a search engine, here my code:

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <div class="container">
   <h2 align="center">Auto Load More Data on Page Scroll with Jquery & PHP</a></h2>
   <input type="text" id="busqueda" placeholder="Introduzca el nombre"   size="50" />
   <br />
   <div id="load_data"></div>
   <div id="load_data_message"></div>
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
  </div>
 </body>
</html>
<script>

$(document).ready(function(){
 consulta = $("#busqueda").val();
 var limit = 7;
 var start = 0;
 var action = 'inactive';
 function load_country_data(limit, start,"b="+consulta)
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:{limit:limit, start:start},
   cache:false,
   success:function(data)
   {
    $('#load_data').append(data);
    if(data == '')
    {
     $('#load_data_message').html("<button type='button' class='btn btn-info'>No Data Found</button>");
     action = 'active';
    }
    else
    {
     $('#load_data_message').html("<button type='button' class='btn btn-warning'>Please Wait....</button>");
     action = "inactive";
    }
   }
  });
 }

 if(action == 'inactive')
 {
  action = 'active';
  load_country_data(limit, start);
 }
 $(window).scroll(function(){
  if($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive')
  {
   action = 'active';
   start = start + limit;
   setTimeout(function(){
    load_country_data(limit, start);
   }, 1000);
  }
 });
 
});

</script>

Here the PHP

<?php
$b = $_POST['b'];
if(isset($_POST["limit"], $_POST["start"]))
{
 $connect = mysqli_connect("localhost", "root", "******", "tel");
 $query = "SELECT * FROM tel  WHERE nombre LIKE '%".$b."%' ORDER BY id DESC LIMIT ".$_POST["start"].", ".$_POST["limit"]."";
 $result = mysqli_query($connect, $query);
 while($row = mysqli_fetch_array($result))
 {
  echo '
  <h3>'.$row["nombre"].'</h3>
  <p>'.$row["tel"].'</p>
  <p class="text-muted" align="center">By - '.$row["id"].'</p>
  <hr />
  ';
 }
}

?>

I would like you to show all available data but also show when I write.

    
asked by leonardo rodriguez2 14.11.2018 в 22:09
source

2 answers

0

Here is an example to use the datatables library

<table class="table table-bordered table-responsive table  table-striped dataTable" id="dataTable1" aria-describedby="dataTable1_info" style="margin-top: 20px;">
                <thead>
                <tr>
                    <th>ID  </th>
                    <th>Numero de documentos</th>
                    <th>nombre</th>
                    <th>Apellido</th>
                    <th>Sexo</th>
                    <th>Grupo Poblacional</th>
                    <th>Registro</th>

                </tr>
                </thead>
                <tfoot>
                <tr>
                    <th>ID  </th>
                    <th>Numero de documentos</th>
                    <th>nombre</th>
                    <th>Apellido</th>
                    <th>Sexo</th>
                    <th>Grupo Poblacional</th>
                    <th>Registro</th>
                </tr>
                </tfoot>
                <tbody aria-relevant="all" aria-live="polite" id="showdata">
                </tbody>
            </table>

should include the jquery and the datatables

to call the function it

show_personas('45');



function show_personas(id) {
    $.ajax({
        type: 'ajax',
        url: '<?php echo base_url() ?>Convocatoria/show_personas/'+id,
        async: false,
        data:{id:id},
        dataType: 'json',
        success: function(data){
          var html = '';
          var i;
          var t = $('#dataTable1').DataTable();
          t.clear();
          for(i=0; i<data.length; i++){   
          var counter = 1;
          var cars = [
                      i+1, 
                      data[i].numero_documento,
                      data[i].nombres,
                      data[i].apellidos,
                      data[i].sexo_id.nombre,
                      data[i].grupo_poblacional_id.nombre,
                      '<a href="javascript:;" class="btn btn-info bta" id="checklist-'+data[i].id+'" onclick="Registra_persona('+id+','+data[i].id+')" data-convocatoria="'+id+'" data-persona="'+data[i].id+'">Registra</a>',
                      ];
          t.row.add(cars).draw( false );
          }
        },
        error: function(){
          alert('No se pudo carga los datos ');
        }
    });
}

in the controller part or in this case the php file, I can not help you much in this part since I have not used pure php just framework for a long time

$result = PersonasModel::with('sexo_id','grupo_poblacional_id')->where('municipio_expedicion_id',"=",$Convocatoria['municipio_id'])
            ->get(); 
            echo json_encode($result);
    
answered by 15.11.2018 / 03:03
source
0

First, you must call the function when the value of the input changes like this;

<input type="text" id="busqueda" placeholder="Introduzca el nombre" onchange="load_country_data(10,0)" size="50" />

Then, you must pass the b parameter in the ajax call like this:

$(document).ready(function(){     
 var limit = 7;
 var start = 0;
 var action = 'inactive';
 function load_country_data(limit, start)
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:{limit:limit, start:start, b:$("#busqueda").val()},
   cache:false,
   success:function(data)
   {
    $('#load_data').html("").append(data);
    if(data == '')
    {
     $('#load_data_message').html("<button type='button' class='btn btn-info'>No Data Found</button>");
     action = 'active';
    }
    else
    {
     $('#load_data_message').html("<button type='button' class='btn btn-warning'>Please Wait....</button>");
     action = "inactive";
    }
   }
  });
 }
    
answered by 14.11.2018 в 22:46