Ajax live search table generation using codeigniter
In this post we will show you Ajax live search table generation using codeigniter, hear for Ajax live search table generation using codeigniter we will give you demo and example for implement.
we will show how to make an Ajax live search table generation using codeigniter and jquery and PHP. this table can generate in real time once the user sorts some price within the search box. we tend to implement this in CodeIgniter by mistreatment a pair of read pages, one read contains the search box and different read can produce the Ajax driven search box.
The jquery code is given below for Ajax live search table generation using codeigniter
<script>
// script for Ajax live search table generation using codeigniter
$(document).ready(function(){
$("#search_word").keyup(function(){
var strval= $("#search_word").val();
if(strval == "")
{
$( "#txtHints" ).html("<b>Here we will listed Book information...</b>");
}
else
{
$.get( "<?php echo base_url();?>home/ajaxsearch?id="+strval, function( data ){
$( "#txtHints" ).html( data );
});
}
});
});
</script>
The Ajax is triggered by writing in search box by mistreatment keyup operate in jquery. $.get operate can fetch knowledge from ajaxsearch operate in home controller and it’ll be appended to div instrumentality with id texthint.
Ajax live search table generation using codeigniter for complete code for input read is given below
<div class="container">
<!-- search box container starts -->
<div class="search">
<div class="space"></div>
<form action="" method="get">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="input-group">
<span class="input-group-addon" >SEARCH BOOK</span>
<input autocomplete="off" id="search_word" type="text" class="form-control input-lg" placeholder="Book name Search / Author Search" >
</div>
</div>
</div>
<div class="space"></div>
</form>
</div>
<!-- ends of search box container -->
<div id="txtHints" style="padding-top:50px; text-align:center;" ><b>Book information/Author data will be listed here...</b>
</div>
</div>
<script>
$(document).ready(function(){
$("#search_word").keyup(function(){
var strval = $("#search_word").val();
if(strval == "") {
$( "#txtHints" ).html("<b>Book information will be listed here...</b>");
}else {
$.get( "<?php echo base_url();?>home/ajaxsearch?id="+strval, function( data ){
$( "#txtHints" ).html( data );
});
}
});
});
</script>
Now the for output view for Ajax live search table generation using codeigniter
<?php
if(!empty($booktabledata ))
{
$output_val = $outputdata_val = $outputtail_val ='';
$output_val .= '<div class="container codediv">
<div class="table-responsive codediv">
<table class="table table-bordered codediv">
<thead>
<tr>
<th>Book No</th>
<th>Book Name</th>
<th>Author</th>
<th>Price</th>
</tr>
</thead>
<tbody>
';
foreach ($booktabledata as $objects_val)
{
$outputdata_val .= '
<tr>
<td>'.$objects_val->BOOKID.'</td>
<td>'.$objects_val->TITLE.'</td>
<td>'.$objects_val->AUTHOR.'</td>
<td>'.$objects_val->PRICE.'</td>
</tr>
';
// echo $outputdata_val;
}
$outputtail_val .= '
</tbody>
</table>
</div>
</div> ';
echo $output_val;
echo $outputdata_val;
echo $outputtail_val;
}
else
{
echo 'No Data Found';
}
Ajax live search table generation using codeigniter for home controller code is given below
public function ajaxsearch()
{
if(is_null($this->input->get('id')))
{
$this->load->view('input');
}
else
{
$this->load->model('Bookmodel');
$id_val = $this->input->get('id');
$datas['booktable'] = $this->Bookmodel->booktable($id_val);
$this->load->view('output',$datas);
}
}
Ajax live search table generation using codeigniter for code for booktable function in Bookmodel is given below
function booktable($searchdata)
{
$set_query = $this
->db
->select('*')
->from('books')
->like('TITLE',$searchdata)
->or_like('AUTHOR',$searchdata)
->get();
if($set_query->num_rows()>0)
{
return $set_query->result();
}
else
{
return null;
}
}
Hope this code and post will helped you for implement Ajax live search table generation using codeigniter. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org