In the event that you are looking for a web instructional exercise on How to Search Live Data in Codeigniter by utilizing Ajax with Jquery, at that point here we have talked about themes something like Live Mysql Table Data Search by utilizing Ajax JQuery in Codeigniter Framework. We have just distributed a web instructional exercise on Ajax live information search utilizing PHP Script with Ajax Jquery. We have made the same thing in the Codeigniter system moreover. In such a case that some web designers utilize the Codeigniter system for their web improvement then they can follow this source code for Live Table information search.
This is ajax driven live table looking through an instructional exercise in which when a client has started typing something then he can get channel information as indicated by a string that he has typed without invigorating the site page, in light of the fact that here we have use Ajax with Codeigniter. Here table will show channel information progressively when any client has typed some string in the pursuit textbox. This element we have actualized in Codeigniter with Ajax Jquery.
In the event that you would prefer not to utilize Jquery Datatables to show Mysql table information for the show in plain arrangement then you can utilize this sort of code for making a live information search capable table. To make this live information accessible table we have to use Ajax Jquery with the Codeigniter system. Beneath you can discover the total source code of this instructional exercise.
Content
- Mysql Database
- Data Search – Page View
- Data Search – Controller
- Data Search – Models
Connect Your Database Connection
Data Search – Page View
Live Data Search in Codeigniter using Ajax JQuery
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Live Mysql Data Search in Codeigniter Using Ajax Jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<br />
<br /><br> <h2 align="center">Live Data Search in Codeigniter using Ajax JQuery</h2><br />
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">HSN Code</span>
<input type="text" placeholder="Type Your HSN Code" class="form-control" id="search_text" name="product_code">
</div>
</div>
<br />
<div id="result"></div>
</div>
<div style="clear:both"></div>
<br />
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("#search_text").keyup(function(){
console.log("My query:",$(this).val());
var str = $(this).val();
var len = str.length;
if(len < 2){
$('#result').html("");
return false;
}
$.ajax({
url:"<?php echo base_url(); ?>products/fetch",
method:"POST",
data:{query:$(this).val()},
success:function(data){
$('#result').html(data);
}
})
});
});
</script>
Data Search – Controller
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class DataSearch extends CI_Controller {
/**
* Index Page for this controller.
*
* Maps to the following URL
* http://example.com/index.php/welcome
* - or -
* http://example.com/index.php/welcome/index
* - or -
* Since this controller is set as the default controller in
* config/routes.php, it's displayed at http://example.com/
*
* So any other public methods not prefixed with an underscore will
* map to /index.php/welcome/<method_name>
* @see https://codeigniter.com/user_guide/general/urls.html
*/
public function index()
{
$this->load->view('datasearch');
}
public function fetch()
{
$output = '';
$query = '';
$this->load->model('dataSearches_model');
if($this->input->post('query'))
{
$query = $this->input->post('query');
}
$data = $this->dataSearches_model->fetch_data($query);
$output .= '
<div class = "table-responsive">
<table class = "table table-bordered table-striped">
<tr>
<th>HSN Code</th>
<th>Description</th>
</tr>
';
if($data->num_rows() > 0)
{
foreach ($data->result()as $row)
{
$output .='
<tr>
<td>'.$row->hsn_code.'</td>
<td>'.$row->description.'</td>
</tr>';
}
}
else
{
$output .= '<tr>
<td colspan="5">No data Found</td>
</tr>';
}
$output .= '</table>';
echo $output;
}
}
DataSearch – Models
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class DataSearches_model extends CI_Model {
/**
* Index Page for this controller.
*
* Maps to the following URL
* http://example.com/index.php/welcome
* - or -
* http://example.com/index.php/welcome/index
* - or -
* Since this controller is set as the default controller in
* config/routes.php, it's displayed at http://example.com/
*
* So any other public methods not prefixed with an underscore will
* map to /index.php/welcome/<method_name>
* @see https://codeigniter.com/user_guide/general/urls.html
*/
public function fetch_data($query)
{
$this->db->select("*");
$this->db->from("data_search");
if($query != '')
{
$this->db->like('hsn_code', $query);
$this->db->or_like('description', $query);
}
$this->db->limit(10);
$this->db->order_by('id', 'DESC');
return $this->db->get();
}
}
