Fetch data from database in datatable using AJAX Codeigniter 3 (Hindi)

Ajax codeigniter fetch data from database in datatable

आज के इस tutorial में मैं आपको बताऊंगा की Ajax और Codeigniter की मदद से Data Table में data कैसे show करें? Display data from the database in Datatable using Ajax Codeigniter in Hindi.

पिछले tutorial में मैंने Database में Ajax और Codeigniter की मदद से data insert करने का तरीका बताया था| उसमें मैंने Datatable create करने भी बताया था| अगर अभी तक आपने उस tutorial को नहीं पढ़ा है तो सबसे पहले उस tutorial को पढ़ें तभी यह tutorial समझ में आएगा|

Fetch data from database in datatable using AJAX Codeigniter 3 (Hindi)

मेरे पास एक person नाम का table है जिसमें चार field हैं id, name, message और age. अगर अभी तक आपने table create नहीं किया है तो निचे दिए गए code से table create कर लें|

CREATE TABLE `person` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(255) NOT NULL,
 `message` varchar(255) NOT NULL,
 `age` int(11) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1

Next step: इस step में मैंने एक dynamic model create किया जिसके अन्दर fetchAllData() नाम का एक method बनाया और उसमें कुछ parameter को pass किया ताकि उस function को dynamically जरुरत के अनुसार कॉल किया जा सके|

Folder Directory: Application/models/Ajax_model.php

<?php 

class Ajax_model extends CI_Model
{
	public function createData($data)
	{
		$query = $this->db->insert('person',$data);
		return $query;
	}

	public function fetchAllData($data,$tablename,$where)
	{
		$query = $this->db->select($data)
				->from($tablename)
				->where($where)
				->get();
		return $query->result_array();
	}
}

Next Step: एक controller बनाया जिसका नाम MY_Controller.php दिया इसका folder directory: application/controller/MY_Controller.php है| इस controller के अन्दर fetchDatafromDatabase() नाम का एक method बनाया|जिसमें मैंने database से data को fetch किया और फिर looping के through data को multidimensional array में data को store किया| यहाँ पर मैंने multidimensional array इसलिए बनाया क्योंकि datatable में data show करने के लिए structure multidimensional के फॉर्म में होने चाहिए|

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

class MY_Controller extends CI_Controller {

	public function __construct()
	{
		parent::__construct();
		$this->load->model('ajax_model');
	}

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

	public function create()
	{
		$name = $this->input->post('name');
		$message = $this->input->post('message');
		$age = $this->input->post('age');

		$data = array(
			'name'	=> $name,
			'message' => $message,
			'age'	=> $age,
		);
		$insert = $this->ajax_model->createData($data);
		echo json_encode($insert);
	}

	public function fetchDatafromDatabase()
	{
		$resultList = $this->ajax_model->fetchAllData('*','person',array());
		
		$result = array();
		$i = 1;
		foreach ($resultList as $key => $value) {

			$result['data'][] = array(
				$i++,
				$value['name'],
				$value['message'],
				$value['age'],
			);
		}
		echo json_encode($result);
	}
	
}

अब सबसे अंत में मैंने view page में data table को initialize किया और उसमें ajax के द्वारा controller को कॉल किया और फिर datatable में data को show किया|

view Page: index.php

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

</head>
<body>
	<div class="container">
		
		<br><br>
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createModal">
		  Add Record
		</button><br><br>


	<form id="createForm">
		<!-- Modal -->
		<div class="modal fade" id="createModal" aria-hidden="true">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h5 class="modal-title" id="exampleModalLongTitle">Add Record</h5>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		          <span aria-hidden="true">×</span>
		        </button>
		      </div>
		      <div class="modal-body">

		        
		        	<div class="form-group">
					    <label>Name</label>
					    <input type="text" class="form-control" placeholder="Name here" name="name">
					 </div>
					 <div class="form-group">
					    <label>Message</label>
					    <input type="text" class="form-control" placeholder="Message Here" name="message">
					 </div>
					 <div class="form-group">
					    <label>Age</label>
					    <input type="number" class="form-control" placeholder="Age Here" name="age">
					 </div>
		       
		        
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close</button>
		        <button type="submit" class="btn btn-primary">Save</button>
		      </div>
		    </div>
		  </div>
		</div>
		 </form>

		<table id="example1" class="display table">
		    <thead>
		        <tr>
		            <th>S.No</th>
		            <th>Name</th>
		            <th>Message</th>
		            <th>Age</th>
		        </tr>
		    </thead>

		</table>
	</div>


	<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


	<script type="text/javascript">
	
		//inserting data into database code start here

		$("#createForm").submit(function(event) {
			event.preventDefault();
			$.ajax({
	            url: "<?php echo base_url('my_controller/create'); ?>",
	            data: $("#createForm").serialize(),
	            type: "post",
	            async: false,
	            dataType: 'json',
	            success: function(response){
	              
	                $('#createModal').modal('hide');
	                $('#createForm')[0].reset();
	                alert('Successfully inserted');
	               $('#example1').DataTable().ajax.reload();
	              },
	           error: function()
	           {
	            alert("error");
	           }
          });
		});

		//inserting data into database code end here


		//displaying data on page start here
		$(document).ready(function(){
			$('#example1').DataTable({
				"ajax" : "<?php echo base_url('my_controller/fetchDatafromDatabase'); ?>",
				"order": [],
			});
		});
		//displaying data on page end here

	</script>
</body>
</html>

इस tutorial को अच्छे तरीके से समझने के लिए Video tutorial को जरुर देखें|

ये भी पढ़ें:

Conclusion and Final Words

इस tutorial में मैंने आपको बताया की Ajax और Codeigniter की मदद से Datatable में data को कैसे display कराएं? मुझे उम्मीद है की यह article आपको बहुत पसंद आई होगी| इसे share जरुर करें| ऐसे ही article पाने के लिए हमारे साथ जुड़े रहें|

Project Download Link: http://www.mediafire.com/file/7hfmjik2oabntl5/ajax.zip/file

Comments (4)

mamta rani says

November 11, 2020 at 12:10 PM

2
subjects
a:2:{s:5:”title”;s:8:”fadfasdf”;s:7:”content”;s:37…
2020-11-04 14:43:38

how can display this…..

- SUMIT KUMAR GUPTA says
  
  November 11, 2020 at 12:17 PM
  
  It is a serialized value. First, change it to an array by using unserialize() and then convert it to JSON and send to ajax.
  
  Next, JSON.pase() the data and use it.
  
vijay says

March 5, 2020 at 6:01 PM

your videos are awesome bro thanks.

- SUMIT KUMAR GUPTA says
  
  March 6, 2020 at 12:47 AM
  
  Thanks for supporting us. I will create another video for all of you.

Fetch data from database in datatable using AJAX Codeigniter 3 (Hindi)

Conclusion and Final Words

About Author

Reader Interactions

Leave a Reply Cancel reply