Saturday 10 March 2018

Live Data Search in Codeigniter using Ajax JQuery


If you are looking of web tutorial on How to Search Live Data in Codeigniter by using Ajax with Jquery, then here we have discuss topic something like Live Mysql Table Data Search by using Ajax JQuery in Codeigniter Framework. We have already published web tutorial on Ajax live data search using PHP Script with Ajax Jquery. We have make same thing in Codeigniter framework also. Because if some web developer using Codeigniter framework for their web development then they can follow this source code for Live Table data search.

This is ajax driven live table searching tutorial in which when user has start type something then he can get filter data according to string which he has type without refresh of web page, because here we have use Ajax with Codeigniter. Here table will display filter data in real time when any user has types some string in the search textbox. This feature we have implement in Codeigniter with Ajax Jquery.



If you do not want to use Jquery Datatables for display Mysql table data for display in tabular format then you can use this type of code for making live data search able table. For making this live data searchable table we have use Ajax Jquery with Codeigniter framework. Below you can find complete source code of this tutorial.








Source Code


Ajaxsearch.php - Controllers



<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Ajaxsearch extends CI_Controller {

 function index()
 {
  $this->load->view('ajaxsearch');
 }

 function fetch()
 {
  $output = '';
  $query = '';
  $this->load->model('ajaxsearch_model');
  if($this->input->post('query'))
  {
   $query = $this->input->post('query');
  }
  $data = $this->ajaxsearch_model->fetch_data($query);
  $output .= '
  <div class="table-responsive">
     <table class="table table-bordered table-striped">
      <tr>
       <th>Customer Name</th>
       <th>Address</th>
       <th>City</th>
       <th>Postal Code</th>
       <th>Country</th>
      </tr>
  ';
  if($data->num_rows() > 0)
  {
   foreach($data->result() as $row)
   {
    $output .= '
      <tr>
       <td>'.$row->CustomerName.'</td>
       <td>'.$row->Address.'</td>
       <td>'.$row->City.'</td>
       <td>'.$row->PostalCode.'</td>
       <td>'.$row->Country.'</td>
      </tr>
    ';
   }
  }
  else
  {
   $output .= '<tr>
       <td colspan="5">No Data Found</td>
      </tr>';
  }
  $output .= '</table>';
  echo $output;
 }
 
}



Ajaxsearch_model.php - Models



<?php
class Ajaxsearch_model extends CI_Model
{
 function fetch_data($query)
 {
  $this->db->select("*");
  $this->db->from("tbl_customer");
  if($query != '')
  {
   $this->db->like('CustomerName', $query);
   $this->db->or_like('Address', $query);
   $this->db->or_like('City', $query);
   $this->db->or_like('PostalCode', $query);
   $this->db->or_like('Country', $query);
  }
  $this->db->order_by('CustomerID', 'DESC');
  return $this->db->get();
 }
}
?>


ajaxsearch.php - Views



<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Live 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">Search</span>
     <input type="text" name="search_text" id="search_text" placeholder="Search by Customer Details" class="form-control" />
    </div>
   </div>
   <br />
   <div id="result"></div>
  </div>
  <div style="clear:both"></div>
  <br />
  <br />
  <br />
  <br />
 </body>
</html>


<script>
$(document).ready(function(){

 load_data();

 function load_data(query)
 {
  $.ajax({
   url:"<?php echo base_url(); ?>ajaxsearch/fetch",
   method:"POST",
   data:{query:query},
   success:function(data){
    $('#result').html(data);
   }
  })
 }

 $('#search_text').keyup(function(){
  var search = $(this).val();
  if(search != '')
  {
   load_data(search);
  }
  else
  {
   load_data();
  }
 });
});
</script>


Database



--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_customer`
--

CREATE TABLE `tbl_customer` (
  `CustomerID` int(11) NOT NULL,
  `CustomerName` varchar(250) NOT NULL,
  `Address` text NOT NULL,
  `City` varchar(250) NOT NULL,
  `PostalCode` varchar(30) NOT NULL,
  `Country` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_customer`
--

INSERT INTO `tbl_customer` (`CustomerID`, `CustomerName`, `Address`, `City`, `PostalCode`, `Country`) VALUES
(1, 'Maria Anders', 'Obere Str. 57', 'Berlin', '12209', 'Germany'),
(2, 'Ana Trujillo', 'Avda. de la Construction 2222', 'Mexico D.F.', '5021', 'Mexico'),
(3, 'Antonio Moreno', 'Mataderos 2312', 'Mexico D.F.', '5023', 'Mexico'),
(4, 'Thomas Hardy', '120 Hanover Sq.', 'London', 'WA1 1DP', 'UK'),
(5, 'Paula Parente', 'Rua do Mercado, 12', 'Resende', '08737-363', 'Brazil'),
(6, 'Wolski Zbyszek', 'ul. Filtrowa 68', 'Walla', '01-012', 'Poland'),
(7, 'Matti Karttunen', 'Keskuskatu 45', 'Helsinki', '21240', 'Finland'),
(8, 'Karl Jablonski', '305 - 14th Ave. S. Suite 3B', 'Seattle', '98128', 'USA'),
(9, 'Paula Parente', 'Rua do Mercado, 12', 'Resende', '08737-363', 'Brazil'),
(10, 'Pirkko Koskitalo', 'Torikatu 38', 'Oulu', '90110', 'Finland'),
(11, 'Ronald Bowne', '2343 Shadowmar Drive', 'New Orleans', '70112', 'United States'),
(12, 'Joyce Rosenberry', 'Norra Esplanaden 56', 'HELSINKI', '00380', 'Finland'),
(13, 'Jeff Putnam', 'Industrieweg 56', 'Bouvignies', '7803', 'Belgium'),
(14, 'Trina Davidson', '1049 Lockhart Drive', 'Barrie', 'ON L4M 3B1', 'Canada');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_customer`
--
ALTER TABLE `tbl_customer`
  ADD PRIMARY KEY (`CustomerID`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_customer`
--
ALTER TABLE `tbl_customer`
  MODIFY `CustomerID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=15;

20 comments:

  1. hello,

    your above code is not working. please tell me solution. i am new one in codeignitor.

    ReplyDelete
  2. i try this code, but when search not working

    ReplyDelete
  3. How to create dynamic search in codeigniter website for this website https://www.heavyequipments.in

    ReplyDelete
  4. Thanks man. This code is very helpful for me.

    ReplyDelete
  5. please let me know if i have a database with the name "internet" and table is "customers" but according to your code you just added the table name but didn't add the db name. why?

    i have already created a data table which is showing all customer records. please let me know what should i have to add in my data table code.

    Many Thanks.

    ReplyDelete
    Replies
    1. database is set in your codeigniter config file

      Delete
  6. If the code doen't work pls add this code under controller->fectch()

    $this->load->database();

    ReplyDelete
  7. Awesome, Works like a charm, very smart and easy to configure. Thank you :)

    ReplyDelete
  8. where the fetch method called

    ReplyDelete
    Replies
    1. obviously in ajax call in js of view file,, calling controller/method i.e '/ajaxsearch/fetch',

      Delete
  9. Hi, Thankyou so much for this, works like a charm. Is there a version for Bootstrap 4?

    ReplyDelete
  10. Aucune erreur mais pas des données afficher. Si quelqu'un peut m'aider merci

    ReplyDelete