CRUD implementation with CodeIgniter using Mysql, Ajax & Model

Simple CRUD implementation with CodeIgniter using Mysql, Ajax, and Bootstrap Model, CRUD stand for basic operations like Create, Read, Update and Delete performed on the database. So in this post, we will learn to insert update delete in CodeIgniter using jQuery Ajax. We will cover this tutorial in easy steps with a live demo to develop complete CRUD operations. We will also provide to download source code of the live demo.

Step 1: Create MySQL Database and Table

<?php

//Table structure for table `employees`
CREATE TABLE `employees` (
  `id` int(11) NOT NULL COMMENT 'primary key',
  `name` varchar(255) NOT NULL COMMENT 'Employee Name',
  `last_name` varchar(100) DEFAULT NULL,
  `email` varchar(255) NOT NULL COMMENT 'Email Address',
  `contact_no` varchar(16) DEFAULT NULL,
  `address` text,
  `salary` float(10,2) NOT NULL COMMENT 'employee salary'
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='datatable demo table';

// Indexes for table `employees`

ALTER TABLE `employees`  ADD PRIMARY KEY (`id`);

// AUTO_INCREMENT for table `employees`

ALTER TABLE `employees`  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'primary key', AUTO_INCREMENT=1;
?>

<?php

//Table structure for table `employees`

CREATE TABLE `employees` (

`id` int(11) NOT NULL COMMENT 'primary key',

`name` varchar(255) NOT NULL COMMENT 'Employee Name',

`last_name` varchar(100) DEFAULT NULL,

`email` varchar(255) NOT NULL COMMENT 'Email Address',

`contact_no` varchar(16) DEFAULT NULL,

`address` text,

`salary` float(10,2) NOT NULL COMMENT 'employee salary'

) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='datatable demo table';

// Indexes for table `employees`

ALTER TABLE `employees` ADD PRIMARY KEY (`id`);

// AUTO_INCREMENT for table `employees`

ALTER TABLE `employees` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'primary key', AUTO_INCREMENT=1;

Step 2: Create a model file

Create a model file named “Curd_model.php” inside “application/models” folder.

<?php
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

/**
 * Description of Curd Model: CodeIgniter CRUD Operations with MySQL
 *
 * @author TechArise Team
 *
 * @email  info@techarise.com
 */
if (!defined('BASEPATH'))
    exit('No direct script access allowed');

class Curd_model extends CI_Model {

    private $_empID;
    private $_firstName;
    private $_lastName;
    private $_email;
    private $_address;
    private $_salary;
    private $_contactNo;

    public function setEmpID($empID) {
        $this->_empID = $empID;
    }
    public function setFirstName($firstName) {
        $this->_firstName = $firstName;
    }
    public function setLastName($lastName) {
        $this->_lastName = $lastName;
    }    
    public function setEmail($email) {
        $this->_email = $email;
    }
    public function setAddress($address) {
        $this->_address = $address;
    }
    public function setSalary($salary) {
        $this->_salary = $salary;
    }
    public function setContactNo($contactNo) {
        $this->_contactNo = $contactNo;
    }
    // get Employee List
    public function getEmpList() {        
        $this->db->select(array('e.id', 'e.name', 'e.last_name', 'e.email', 'e.address', 'e.contact_no', 'e.salary'));
        $this->db->from('employees e');  
        $this->db->order_by('e.id', 'DESC');     
        $query = $this->db->get();
        return $query->result_array();
    }
    // create new Employee
    public function createEmp() { 
        $data = array(
            'name' => $this->_firstName,
            'last_name' => $this->_lastName,
            'email' => $this->_email,
            'address' => $this->_address,
            'contact_no' => $this->_contactNo,
            'salary' => $this->_salary,
        );
        $this->db->insert('employees', $data);
        return $this->db->insert_id();
    }
    // update Employee
    public function updateEmp() { 
        $data = array(
            'name' => $this->_firstName,
            'last_name' => $this->_lastName,
            'email' => $this->_email,
            'address' => $this->_address,
            'contact_no' => $this->_contactNo,
            'salary' => $this->_salary,
        );
        $this->db->where('id', $this->_empID);
        $this->db->update('employees', $data);
    }
    // for display Employee
    public function getEmp() {        
        $this->db->select(array('e.id', 'e.name as first_name', 'e.last_name', 'e.email', 'e.address', 'e.contact_no', 'e.salary'));
        $this->db->from('employees e');  
        $this->db->where('e.id', $this->_empID);     
        $query = $this->db->get();
       return $query->row_array();
    }

    // delete Employee
    public function deleteEmp() {         
        $this->db->where('id', $this->_empID);
        $this->db->delete('employees');  
    }

    // email validation
    public function validateEmail($email)
    {
        return preg_match('/^[^\@]+@.*.[a-z]{2,15}$/i', $email)?TRUE:FALSE;
    }

    // mobile validation
    public function validateMobile($mobile)
    {
        return preg_match('/^[0-9]{10}+$/', $mobile)?TRUE:FALSE;
    }
    
} 
?>

100

101

102

103

104

105

106

107

108

109

110

111

<?php

* To change this license header, choose License Headers in Project Properties.

* To change this template file, choose Tools | Templates

* and open the template in the editor.

/**

* Description of Curd Model: CodeIgniter CRUD Operations with MySQL

* @author TechArise Team

* @email info@techarise.com

if (!defined('BASEPATH'))

exit('No direct script access allowed');

class Curd_model extends CI_Model {

private $_empID;

private $_firstName;

private $_lastName;

private $_email;

private $_address;

private $_salary;

private $_contactNo;

public function setEmpID($empID) {

$this->_empID = $empID;

}

public function setFirstName($firstName) {

$this->_firstName = $firstName;

}

public function setLastName($lastName) {

$this->_lastName = $lastName;

}

public function setEmail($email) {

$this->_email = $email;

}

public function setAddress($address) {

$this->_address = $address;

}

public function setSalary($salary) {

$this->_salary = $salary;

}

public function setContactNo($contactNo) {

$this->_contactNo = $contactNo;

}

// get Employee List

public function getEmpList() {

$this->db->select(array('e.id', 'e.name', 'e.last_name', 'e.email', 'e.address', 'e.contact_no', 'e.salary'));

$this->db->from('employees e');

$this->db->order_by('e.id', 'DESC');

$query = $this->db->get();

return $query->result_array();

}

// create new Employee

public function createEmp() {

$data = array(

'name' => $this->_firstName,

'last_name' => $this->_lastName,

'email' => $this->_email,

'address' => $this->_address,

'contact_no' => $this->_contactNo,

'salary' => $this->_salary,

);

$this->db->insert('employees', $data);

return $this->db->insert_id();

}

// update Employee

public function updateEmp() {

$data = array(

'name' => $this->_firstName,

'last_name' => $this->_lastName,

'email' => $this->_email,

'address' => $this->_address,

'contact_no' => $this->_contactNo,

'salary' => $this->_salary,

);

$this->db->where('id', $this->_empID);

$this->db->update('employees', $data);

}

// for display Employee

public function getEmp() {

$this->db->select(array('e.id', 'e.name as first_name', 'e.last_name', 'e.email', 'e.address', 'e.contact_no', 'e.salary'));

$this->db->from('employees e');

$this->db->where('e.id', $this->_empID);

$query = $this->db->get();

return $query->row_array();

}

// delete Employee

public function deleteEmp() {

$this->db->where('id', $this->_empID);

$this->db->delete('employees');

}

// email validation

public function validateEmail($email)

{

return preg_match('/^[^\@]+@.*.[a-z]{2,15}$/i', $email)?TRUE:FALSE;

}

// mobile validation

public function validateMobile($mobile)

{

return preg_match('/^[0-9]{10}+$/', $mobile)?TRUE:FALSE;

}

Step 3: Create a controller file

Next create a controller file named “Curd.php” inside “application/controllers” folder.

<?php
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

/**
 * @package Curd :  CodeIgniter CRUD Operations with MySQL
 *
 * @author TechArise Team
 *
 * @email  info@techarise.com
 *   
 * Description of Curd Controller
 */
if (!defined('BASEPATH'))
    exit('No direct script access allowed');

class Curd extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->model('Curd_model', 'emp');
    }
    // Employee list method
    public function index() {
        $data['page'] = 'emp-list';
        $data['title'] = 'Employee List | TechArise';
        $data['empInfo'] = $this->emp->getEmpList();    
        $this->load->view('emp/index', $data);
    }
    
    // Employee save method
    public function save() {
        $json = array();        
        $first_name = $this->input->post('first_name');
        $last_name = $this->input->post('last_name');
        $email = $this->input->post('email');
        $address = $this->input->post('address');
        $contact_no = $this->input->post('contact_no');
        $salary = $this->input->post('salary');            
            
        if(empty(trim($first_name))){
            $json['error']['firstname'] = 'Please enter first name';
        }
        if(empty(trim($last_name))){
            $json['error']['lastname'] = 'Please enter last name';
        }

        if(empty(trim($email))){
            $json['error']['email'] = 'Please enter email address';
        }

        if ($this->emp->validateEmail($email) == FALSE) {
            $json['error']['email'] = 'Please enter valid email address';
        }
        if(empty($address)){
            $json['error']['address'] = 'Please enter address';
        }
        if($this->emp->validateMobile($contact_no) == FALSE) {
            $json['error']['contactno'] = 'Please enter valid contact no';
        }

        if(empty($salary)){
            $json['error']['salary'] = 'Please enter salary';
        }

        if(empty($json['error'])){
            $this->emp->setFirstName($first_name);
            $this->emp->setLastName($last_name);
            $this->emp->setEmail($email);
            $this->emp->setAddress($address);
            $this->emp->setSalary($salary);
            $this->emp->setContactNo($contact_no);
            try {
                $last_id = $this->emp->createEmp();
            } catch (Exception $e) {
                var_dump($e->getMessage());
            }
                
            if (!empty($last_id) && $last_id > 0) {
                $empID = $last_id;
                $this->emp->setEmpID($empID);
                $empInfo = $this->emp->getEmp();                    
                $json['emp_id'] = $empInfo['id'];
                $json['first_name'] = $empInfo['first_name'];
                $json['last_name'] = $empInfo['last_name'];
                $json['email'] = $empInfo['email'];
                $json['address'] = $empInfo['address'];
                $json['contact_no'] = $empInfo['contact_no'];
                $json['salary'] = $empInfo['salary'];
                $json['status'] = 'success';
            }
        }
        echo json_encode($json);
    }

    // Employee edit method
    public function edit() {
        $json = array();
        $empID = $this->input->post('emp_id');
        $this->emp->setEmpID($empID);
        $json['empInfo'] = $this->emp->getEmp();

        $this->output->set_header('Content-Type: application/json');
        $this->load->view('emp/popup/renderEdit', $json);
    }

    // Employee update method
    public function update() {
        $json = array();        
        $emp_id = $this->input->post('emp_id');
        $first_name = $this->input->post('first_name');
        $last_name = $this->input->post('last_name');
        $email = $this->input->post('email');
        $address = $this->input->post('address');
        $contact_no = $this->input->post('contact_no');
        $salary = $this->input->post('salary');            
            
        if(empty(trim($first_name))){
            $json['error']['firstname'] = 'Please enter first name';
        }
        if(empty(trim($last_name))){
            $json['error']['lastname'] = 'Please enter last name';
        }

        if(empty(trim($email))){
            $json['error']['email'] = 'Please enter email address';
        }

        if ($this->emp->validateEmail($email) == FALSE) {
            $json['error']['email'] = 'Please enter valid email address';
        }
        if(empty($address)){
            $json['error']['address'] = 'Please enter address';
        }
        if($this->emp->validateMobile($contact_no) == FALSE) {
            $json['error']['contactno'] = 'Please enter valid contact no';
        }

        if(empty($salary)){
            $json['error']['salary'] = 'Please enter salary';
        }

        if(empty($json['error'])){
            $this->emp->setEmpID($emp_id);
            $this->emp->setFirstName($first_name);
            $this->emp->setLastName($last_name);
            $this->emp->setEmail($email);
            $this->emp->setAddress($address);
            $this->emp->setSalary($salary);
            $this->emp->setContactNo($contact_no);
            try {
                $last_id = $this->emp->updateEmp();;
            } catch (Exception $e) {
                var_dump($e->getMessage());
            }
                
            if (!empty($emp_id) && $emp_id > 0) { 
                $this->emp->setEmpID($emp_id);
                $empInfo = $this->emp->getEmp();                    
                $json['emp_id'] = $empInfo['id'];
                $json['first_name'] = $empInfo['first_name'];
                $json['last_name'] = $empInfo['last_name'];
                $json['email'] = $empInfo['email'];
                $json['address'] = $empInfo['address'];
                $json['contact_no'] = $empInfo['contact_no'];
                $json['salary'] = $empInfo['salary'];                   
                $json['status'] = 'success';
            }
        }
        echo json_encode($json);
    }

    // Employee display method
    public function display() {
        $json = array();
        $empID = $this->input->post('emp_id');
        $this->emp->setEmpID($empID);
        $json['empInfo'] = $this->emp->getEmp();

        $this->output->set_header('Content-Type: application/json');
        $this->load->view('emp/popup/renderDisplay', $json);
    }

    // Employee display method
    public function delete() {
        $json = array();
        $empID = $this->input->post('emp_id');        
        $this->emp->setEmpID($empID);
        $this->emp->deleteEmp();
        $this->output->set_header('Content-Type: application/json');
        echo json_encode($json);
        
    }

}
?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

<?php

* To change this license header, choose License Headers in Project Properties.

* To change this template file, choose Tools | Templates

* and open the template in the editor.

/**

* @package Curd : CodeIgniter CRUD Operations with MySQL

* @author TechArise Team

* @email info@techarise.com

* Description of Curd Controller

if (!defined('BASEPATH'))

exit('No direct script access allowed');

class Curd extends CI_Controller {

public function __construct() {

parent::__construct();

$this->load->model('Curd_model', 'emp');

}

// Employee list method

public function index() {

$data['page'] = 'emp-list';

$data['title'] = 'Employee List | TechArise';

$data['empInfo'] = $this->emp->getEmpList();

$this->load->view('emp/index', $data);

}

// Employee save method

public function save() {

$json = array();

$first_name = $this->input->post('first_name');

$last_name = $this->input->post('last_name');

$email = $this->input->post('email');

$address = $this->input->post('address');

$contact_no = $this->input->post('contact_no');

$salary = $this->input->post('salary');

if(empty(trim($first_name))){

$json['error']['firstname'] = 'Please enter first name';

}

if(empty(trim($last_name))){

$json['error']['lastname'] = 'Please enter last name';

}

if(empty(trim($email))){

$json['error']['email'] = 'Please enter email address';

}

if ($this->emp->validateEmail($email) == FALSE) {

$json['error']['email'] = 'Please enter valid email address';

}

if(empty($address)){

$json['error']['address'] = 'Please enter address';

}

if($this->emp->validateMobile($contact_no) == FALSE) {

$json['error']['contactno'] = 'Please enter valid contact no';

}

if(empty($salary)){

$json['error']['salary'] = 'Please enter salary';

}

if(empty($json['error'])){

$this->emp->setFirstName($first_name);

$this->emp->setLastName($last_name);

$this->emp->setEmail($email);

$this->emp->setAddress($address);

$this->emp->setSalary($salary);

$this->emp->setContactNo($contact_no);

try {

$last_id = $this->emp->createEmp();

} catch (Exception $e) {

var_dump($e->getMessage());

}

if (!empty($last_id) && $last_id > 0) {

$empID = $last_id;

$this->emp->setEmpID($empID);

$empInfo = $this->emp->getEmp();

$json['emp_id'] = $empInfo['id'];

$json['first_name'] = $empInfo['first_name'];

$json['last_name'] = $empInfo['last_name'];

$json['email'] = $empInfo['email'];

$json['address'] = $empInfo['address'];

$json['contact_no'] = $empInfo['contact_no'];

$json['salary'] = $empInfo['salary'];

$json['status'] = 'success';

}

echo json_encode($json);

}

// Employee edit method

public function edit() {

$json = array();

$empID = $this->input->post('emp_id');

$this->emp->setEmpID($empID);

$json['empInfo'] = $this->emp->getEmp();

$this->output->set_header('Content-Type: application/json');

$this->load->view('emp/popup/renderEdit', $json);

}

// Employee update method

public function update() {

$json = array();

$emp_id = $this->input->post('emp_id');

$first_name = $this->input->post('first_name');

$last_name = $this->input->post('last_name');

$email = $this->input->post('email');

$address = $this->input->post('address');

$contact_no = $this->input->post('contact_no');

$salary = $this->input->post('salary');

if(empty(trim($first_name))){

$json['error']['firstname'] = 'Please enter first name';

}

if(empty(trim($last_name))){

$json['error']['lastname'] = 'Please enter last name';

}

if(empty(trim($email))){

$json['error']['email'] = 'Please enter email address';

}

if ($this->emp->validateEmail($email) == FALSE) {

$json['error']['email'] = 'Please enter valid email address';

}

if(empty($address)){

$json['error']['address'] = 'Please enter address';

}

if($this->emp->validateMobile($contact_no) == FALSE) {

$json['error']['contactno'] = 'Please enter valid contact no';

}

if(empty($salary)){

$json['error']['salary'] = 'Please enter salary';

}

if(empty($json['error'])){

$this->emp->setEmpID($emp_id);

$this->emp->setFirstName($first_name);

$this->emp->setLastName($last_name);

$this->emp->setEmail($email);

$this->emp->setAddress($address);

$this->emp->setSalary($salary);

$this->emp->setContactNo($contact_no);

try {

$last_id = $this->emp->updateEmp();;

} catch (Exception $e) {

var_dump($e->getMessage());

}

if (!empty($emp_id) && $emp_id > 0) {

$this->emp->setEmpID($emp_id);

$empInfo = $this->emp->getEmp();

$json['emp_id'] = $empInfo['id'];

$json['first_name'] = $empInfo['first_name'];

$json['last_name'] = $empInfo['last_name'];

$json['email'] = $empInfo['email'];

$json['address'] = $empInfo['address'];

$json['contact_no'] = $empInfo['contact_no'];

$json['salary'] = $empInfo['salary'];

$json['status'] = 'success';

}

echo json_encode($json);

}

// Employee display method

public function display() {

$json = array();

$empID = $this->input->post('emp_id');

$this->emp->setEmpID($empID);

$json['empInfo'] = $this->emp->getEmp();

$this->output->set_header('Content-Type: application/json');

$this->load->view('emp/popup/renderDisplay', $json);

}

// Employee display method

public function delete() {

$json = array();

$empID = $this->input->post('emp_id');

$this->emp->setEmpID($empID);

$this->emp->deleteEmp();

$this->output->set_header('Content-Type: application/json');

echo json_encode($json);

}

Step 4: Change Route file

So open “application/config/routes.php” file and add code like as bellow:

    <?php
    // create routes
    $route['curd/edit'] = 'curd/edit';
    $route['curd/display'] = 'curd/display';
    $route['curd/delete'] = 'curd/delete';
    $route['curd/save'] = 'curd/save';
    $route['curd/update'] = 'curd/update';
    ?>

<?php

// create routes

$route['curd/edit'] = 'curd/edit';

$route['curd/display'] = 'curd/display';

$route['curd/delete'] = 'curd/delete';

$route['curd/save'] = 'curd/save';

$route['curd/update'] = 'curd/update';

Step 5: Create a view

Create a view file named “index.php” inside “application/views/emp” folder

<?php
$this->load->view('templates/header');
?>
<div class="row">
    <div class="col-lg-12">
        <h2>Simple CRUD implemention with Codeigniter using Mysql, Ajax and Bootstrap Model</h2>                 
    </div>
</div><!-- /.row -->

<div class="row">
    <div class="col-lg-12">
        <a href="javascript:void(0);" data-toggle="modal" data-target="#add-employee" class="pull-right btn btn-primary btn-xs" style="margin-bottom: 5px;" rel="noopener noreferrer"><i class="fa fa-plus"></i> Add Employee</a>                
    </div>
</div><!-- /.row -->

<div class="row">   
    <div class="col-lg-12"><span id="success-msg"></span></div>
        <div class="col-lg-12">
    <table class="table table-bordered">
    <thead>
      <tr class="bg-primary">
        <th width="15%">First Name</th>
        <th width="15%">Last Name</th>
        <th width="15%">Email</th>        
        <th width="10%">Phone</th>
        <th width="10%">Salary</th>
        <th width="25%">Action</th> 
      </tr>
    </thead>
    <tbody id="render-emp-details"> 
        <?php foreach($empInfo as $key=>$element) { ?>
      <tr class="empcls-<?php print $element['id'];?>">
        <td><?php print $element['name']; ?></td>
        <td><?php print $element['last_name']; ?></td>  
        <td><?php print $element['email']; ?></td>
        <td><?php print $element['contact_no']; ?></td> 
        <td><?php print $element['salary']; ?></td> 
        <td>
            <a title="Display" href="javascript:void(0);" data-geteid="<?php print $element['id'];?>" data-toggle="modal" data-target="#dispaly-employee" class="display-emp btn btn-info btn-xs"><i class="fa fa-eye"></i> </a> 
            <a title="Edit" href="javascript:void(0);" data-getueid="<?php print $element['id'];?>" data-toggle="modal" data-target="#update-employee" class="update-emp-details btn btn-primary btn-xs"><i class="fa fa-edit"></i> </a> 
            <a title="Delete" href="javascript:void(0);" data-getdeid="<?php print $element['id'];?>" data-toggle="modal" data-target="#delete-employee" class="delete-em-details btn btn-danger btn-xs"><i class="fa fa-trash"></i></a>
        </td>
      </tr>
      <?php } ?>
    </tbody>
  </table>
</div>
</div><!-- /.row -->
<?php
$this->load->view('templates/footer');
$this->load->view('emp/popup/add');
$this->load->view('emp/popup/edit');
$this->load->view('emp/popup/display');
$this->load->view('emp/popup/delete');
?>

<?php

$this->load->view('templates/header');

<h2>Simple CRUD implemention with Codeigniter using Mysql, Ajax and Bootstrap Model</h2>

</div>

</div>

<a href="javascript:void(0);" data-toggle="modal" data-target="#add-employee" class="pull-right btn btn-primary btn-xs" style="margin-bottom: 5px;" rel="noopener noreferrer"><i class="fa fa-plus"></i> Add Employee</a>

</div>

</div>

<thead>

<th width="15%">First Name</th>

<th width="15%">Email</th>

<th width="10%">Phone</th>

<th width="10%">Salary</th>

<th width="25%">Action</th>

</tr>

</thead>

<?php foreach($empInfo as $key=>$element) { ?>

<td>

<a title="Display" href="javascript:void(0);" data-geteid="<?php print $element['id'];?>" data-toggle="modal" data-target="#dispaly-employee" class="display-emp btn btn-info btn-xs"><i class="fa fa-eye"></i> </a>

<a title="Edit" href="javascript:void(0);" data-getueid="<?php print $element['id'];?>" data-toggle="modal" data-target="#update-employee" class="update-emp-details btn btn-primary btn-xs"><i class="fa fa-edit"></i> </a>

<a title="Delete" href="javascript:void(0);" data-getdeid="<?php print $element['id'];?>" data-toggle="modal" data-target="#delete-employee" class="delete-em-details btn btn-danger btn-xs"><i class="fa fa-trash"></i></a>

</td>

</tr>

<?php } ?>

</tbody>

</table>

</div>

</div>

<?php

$this->load->view('templates/footer');

$this->load->view('emp/popup/add');

$this->load->view('emp/popup/edit');

$this->load->view('emp/popup/display');

$this->load->view('emp/popup/delete');

Step 6: Create a view

Create a view file named “add.php” inside “application/views/emp/popup” folder

<div class="modal fade rotate" id="add-employee" style="display:none;">
    <div class="modal-dialog modal-lg"> 
        <form id="add-employee-form" method="post">   
            <div class="modal-content panel panel-primary">
                <div class="modal-header panel-heading">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title -remove-title">Add Employee</h4>
                </div>
                <div class="modal-body panel-body">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-user-o"></i>
                                    </span>
                                    <input type="text" name="first_name" class="form-control input-emp-firstname" id="first-name" placeholder="First Name">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-user-o"></i>
                                    </span>
                                    <input type="text" name="last_name" class="form-control input-emp-lastname" id="last-name" placeholder="Last Name">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-envelope"></i>
                                    </span>
                                    <input type="text" name="email" class="form-control input-emp-email" id="email" placeholder="Email">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-map-marker"></i>
                                    </span>
                                    <input type="text" name="address" class="form-control input-emp-address" id="address" placeholder="Address">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-phone"></i>
                                    </span>
                                    <input type="text" name="contact_no" class="form-control input-emp-contactno" id="contact-no" placeholder="Contact No">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-money"></i>
                                    </span>
                                    <input type="number" name="salary" class="form-control input-emp-salary" id="emp-salary" placeholder="Salary">
                                </div>
                            </div>
                        </div>
                    </div>        
                </div>
                <div class="modal-footer panel-footer">
                    <div class="row">
                        <div class="col-sm-12">                            
                            <button type="button" class="btn rkmd-btn btn-success" data-addempid="" id="add-emp">Add</button> 
                            <button type="button" class="btn rkmd-btn btn-danger" data-dismiss="modal">Close</button>
                        </div>                    
                    </div>
                </div>
            </div>
        </form>      
    </div>
</div>

<h4 class="modal-title -remove-title">Add Employee</h4>

</div>

</span>

</div>

</span>

</div>

</span>

</div>

</span>

</div>

</span>

</div>

</span>

</div>

<button type="button" class="btn rkmd-btn btn-danger" data-dismiss="modal">Close</button>

</div>

</form>

</div>

Step 7: Create a view

Create a view file named “display.php” inside “application/views/emp/popup” folder

<div class="modal fade rotate" id="dispaly-employee" style="display:none;">
    <div class="modal-dialog"> 
        <form id="display-employee-form" method="post">   
            <div class="modal-content panel panel-primary">
                <div class="modal-header panel-heading">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title -remove-title">View/Dispaly</h4>
                </div>
                <div class="modal-body panel-body" id="render-dispaly-data">
                    <div class="text-center"><i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i></div>
                </div>
                <div class="modal-footer panel-footer">
                    <div class="row">
                        <div class="col-sm-12">
                            <button type="button" class="btn rkmd-btn btn-danger" data-dismiss="modal">Close</button>
                        </div>                    
                    </div>
                </div>
            </div>
        </form>      
    </div>
</div>

<h4 class="modal-title -remove-title">View/Dispaly</h4>

</div>

</div>

<button type="button" class="btn rkmd-btn btn-danger" data-dismiss="modal">Close</button>

</div>

</form>

</div>

Step 8: Create a view

Create a view file named “renderDisplay.php” inside “application/views/emp/popup” folder

<?php
    $first_name = $empInfo['first_name'] ? $empInfo['first_name'] : '';
    $last_name = $empInfo['last_name'] ? $empInfo['last_name'] : '';
    $email = $empInfo['email'] ? $empInfo['email'] : '';
    $address = $empInfo['address'] ? $empInfo['address'] : '';
    $contact_no = $empInfo['contact_no'] ? $empInfo['contact_no'] : '';
    $salary = $empInfo['salary'] ? $empInfo['salary'] : '';
?>
<div class="row">   
    <div class="col-lg-12">
        <p><strong>First Name: </strong><?php print $first_name?></p>
        <p><strong>Last Name: </strong><?php print $last_name?></p>
        <p><strong>Email: </strong><?php print $email?></p>
        <p><strong>Address: </strong><?php print $address?></p>
        <p><strong>Phone: </strong><?php print $contact_no?></p>
        <p><strong>Salary: </strong><?php print $salary?></p>
    </div>
</div>

<?php

$first_name = $empInfo['first_name'] ? $empInfo['first_name'] : '';

$last_name = $empInfo['last_name'] ? $empInfo['last_name'] : '';

$email = $empInfo['email'] ? $empInfo['email'] : '';

$address = $empInfo['address'] ? $empInfo['address'] : '';

$contact_no = $empInfo['contact_no'] ? $empInfo['contact_no'] : '';

$salary = $empInfo['salary'] ? $empInfo['salary'] : '';

<p><strong>First Name: </strong><?php print $first_name?></p>

<p><strong>Email: </strong><?php print $email?></p>

<p><strong>Address: </strong><?php print $address?></p>

<p><strong>Phone: </strong><?php print $contact_no?></p>

<p><strong>Salary: </strong><?php print $salary?></p>

</div>

Step 9: Create a view

Create a view file named “edit.php” inside “application/views/emp/popup” folder

<div class="modal fade rotate" id="update-employee" style="display:none;">
    <div class="modal-dialog modal-lg"> 
        <form id="update-employee-form" method="post">   
            <div class="modal-content panel panel-primary">
                <div class="modal-header panel-heading">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title -remove-title">Edit/Update</h4>
                </div>
                <div class="modal-body panel-body" id="render-update-data">
                    <div class="text-center"><i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i></div>
                </div>
                <div class="modal-footer panel-footer">
                    <div class="row">
                        <div class="col-sm-12">                            
                            <button type="button" class="btn rkmd-btn btn-success" data-addempid="" id="update-emp">Update</button> 
                            <button type="button" class="btn rkmd-btn btn-danger" data-dismiss="modal">Close</button>
                        </div>                    
                    </div>
                </div>
            </div>
        </form>      
    </div>
</div>

<h4 class="modal-title -remove-title">Edit/Update</h4>

</div>

</div>

<button type="button" class="btn rkmd-btn btn-success" data-addempid="" id="update-emp">Update</button>

<button type="button" class="btn rkmd-btn btn-danger" data-dismiss="modal">Close</button>

</div>

</form>

</div>

Step 10: Create a view

Create a view file named “renderEdit.php” inside “application/views/emp/popup” folder

 <?php
    $id = $empInfo['id'] ? $empInfo['id'] : '';
    $first_name = $empInfo['first_name'] ? $empInfo['first_name'] : '';
    $last_name = $empInfo['last_name'] ? $empInfo['last_name'] : '';
    $email = $empInfo['email'] ? $empInfo['email'] : '';
    $address = $empInfo['address'] ? $empInfo['address'] : '';
    $contact_no = $empInfo['contact_no'] ? $empInfo['contact_no'] : '';
    $salary = $empInfo['salary'] ? $empInfo['salary'] : '';
?>

<input type="hidden" name="emp_id" value="<?php print $id; ?>">
<div class="row">
        <div class="col-lg-6">
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">
                        <i class="fa fa-user-o"></i>
                    </span>
                    <input type="text" name="first_name" class="form-control input-emp-firstname" id="first-name" placeholder="First Name" value="<?php print $first_name; ?>">
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">
                        <i class="fa fa-user-o"></i>
                    </span>
                    <input type="text" name="last_name" class="form-control input-emp-lastname" id="last-name" placeholder="Last Name" value="<?php print $last_name; ?>">
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">
                        <i class="fa fa-envelope"></i>
                    </span>
                    <input type="text" name="email" class="form-control input-emp-email" id="email" placeholder="Email" value="<?php print $email; ?>">
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">
                        <i class="fa fa-map-marker"></i>
                    </span>
                    <input type="text" name="address" class="form-control input-emp-address" id="address" placeholder="Address" value="<?php print $address; ?>">
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">
                        <i class="fa fa-phone"></i>
                    </span>
                    <input type="text" name="contact_no" class="form-control input-emp-contactno" id="contact-no" placeholder="Contact No" value="<?php print $contact_no; ?>">
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">
                        <i class="fa fa-money"></i>
                    </span>
                    <input type="text" name="salary" class="form-control input-emp-salary" id="last-name" placeholder="Salary" value="<?php print $salary; ?>">
                </div>
            </div>
        </div>
    </div>

<?php

$id = $empInfo['id'] ? $empInfo['id'] : '';

$first_name = $empInfo['first_name'] ? $empInfo['first_name'] : '';

$last_name = $empInfo['last_name'] ? $empInfo['last_name'] : '';

$email = $empInfo['email'] ? $empInfo['email'] : '';

$address = $empInfo['address'] ? $empInfo['address'] : '';

$contact_no = $empInfo['contact_no'] ? $empInfo['contact_no'] : '';

$salary = $empInfo['salary'] ? $empInfo['salary'] : '';

</span>

</div>

</span>

</div>

</span>

</div>

</span>

</div>

</span>

</div>

</span>

</div>

Step 11: Create a view

Create a view file named “delete.php” inside “application/views/emp/popup” folder

<div class="modal fade rotate" id="delete-employee" style="display:none;">
    <div class="modal-dialog modal-sm"> 
        <form id="delete-employee-form" method="post">   
            <div class="modal-content panel panel-primary">
                <div class="modal-header panel-heading">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title -remove-title">Delete Confirmation</h4>
                </div>
                <div class="modal-body panel-body">
                    <div class="row">        
                        <div class="col-sm-12" style="min-height:50px;">
                            <span>Are you sure you want to delete this item?</span>
                        </div>
                    </div>        
                </div>
                <div class="modal-footer panel-footer">
                    <div class="row">
                        <div class="col-sm-12">                            
                            <button type="button" class="btn rkmd-btn btn-success" data-deleteempid="" id="delete-emp">Yes</button> 
                            <button type="button" class="btn rkmd-btn btn-danger" data-dismiss="modal">No</button>
                        </div>                    
                    </div>
                </div>
            </div>
        </form>      
    </div>
</div>

<h4 class="modal-title -remove-title">Delete Confirmation</h4>

</div>

<span>Are you sure you want to delete this item?</span>

</div>

</div>

</form>

</div>

Step 12: Create a js file

Create a view file named “custom.js” inside “assets/js” folder

// view Emp details
jQuery(document).on('click', 'a.display-emp', function(){
    var emp_id = jQuery(this).data('geteid');
    jQuery.ajax({
        type:'POST',
        url:baseurl+'curd/display',
        data:{emp_id: emp_id},
        dataType:'html',    
        beforeSend: function () {
            jQuery('#render-dispaly-data').html('<div class="text-center"><i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i></div>');
        },                      
        success: function (html) {
            jQuery('#render-dispaly-data').html(html);
                                 
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }        
    });
});
// Edit Emp Details
jQuery(document).on('click', 'a.update-emp-details', function(){
    var emp_id = jQuery(this).data('getueid');
    jQuery.ajax({
        type:'POST',
        url:baseurl+'curd/edit',
        data:{emp_id: emp_id},
        dataType:'html',    
        beforeSend: function () {
            jQuery('#render-update-data').html('<div class="text-center"><i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i></div>');
        },                      
        success: function (html) {
            jQuery('#render-update-data').html(html);
                                 
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }        
    });
});
// set emp id for delete 
jQuery(document).on('click', 'a.delete-em-details', function(){
    var emp_id = jQuery(this).data('getdeid');
    jQuery('button#delete-emp').data('deleteempid', emp_id);

});
// Edit Delete Details
jQuery(document).on('click', 'button#delete-emp', function(){
    var emp_id = jQuery(this).data('deleteempid');
    jQuery.ajax({
        type:'POST',
        url:baseurl+'curd/delete',
        data:{emp_id: emp_id},
        dataType:'html',         
        complete: function () {           
            setTimeout(function () {
                jQuery('tr.empcls-'+emp_id).html('');
            }, 3000);
            jQuery('#delete-employee').modal('hide');
        }, 
        success: function (html) {
            jQuery('tr.empcls-'+emp_id).html('<td colspan="5"><span style="color:red;">Deleted Employee details successfully.</span></td>');
                                 
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }        
    });
});

// Emp Details Add
jQuery(document).on('click', 'button#add-emp', function(){
    jQuery.ajax({
        type:'POST',
        url:baseurl+'curd/save',
        data:jQuery("form#add-employee-form").serialize(),
        dataType:'json',    
        beforeSend: function () {
            jQuery('button#add-emp').button('loading');
        },
        complete: function () {
            jQuery('button#add-emp').button('reset');
            setTimeout(function () {
                jQuery('span#success-msg').html('');
            }, 5000);
            
        },                
        success: function (json) {
            //console.log(json);
           $('.text-danger').remove();
            if (json['error']) {             
                for (i in json['error']) {
                    var element = $('.input-emp-' + i.replace('_', '-'));
                    if ($(element).parent().hasClass('input-group')) {                       
                        $(element).parent().after('<div class="text-danger" style="font-size: 14px;">' + json['error'][i] + '</div>');
                    } else {
                        $(element).after('<div class="text-danger" style="font-size: 14px;">' + json['error'][i] + '</div>');
                    }
                }
            } else {
                jQuery('span#success-msg').html('<div class="alert alert-success">Employee data has been successfully added.</div>');
                var bindHtml = '';
                bindHtml += '<tr class="empcls-'+json['emp_id']+'">';
                bindHtml += '<td>'+json['first_name']+'</td>';
                bindHtml += '<td>'+json['last_name']+'</td>';
                bindHtml += '<td>'+json['email']+'</td>';
                bindHtml += '<td>'+json['contact_no']+'</td>';
                bindHtml += '<td>'+json['salary']+'</td>';
                bindHtml += '<td>';
                    bindHtml += '<a title="Display" href="javascript:void(0);" data-geteid="'+json['emp_id']+'" data-toggle="modal" data-target="#dispaly-employee" class="display-emp btn btn-info btn-xs" rel="noopener noreferrer"><i class="fa fa-eye"></i> </a>';
                    bindHtml += '<a title="Edit" href="javascript:void(0);" data-getueid="'+json['emp_id']+'" data-toggle="modal" data-target="#update-employee" class="update-emp-details btn btn-primary btn-xs" rel="noopener noreferrer"><i class="fa fa-edit"></i> </a>';
                    bindHtml += '<a title="Delete" href="javascript:void(0);" data-getdeid="'+json['emp_id']+'" data-toggle="modal" data-target="#delete-employee" class="delete-em-details btn btn-danger btn-xs" rel="noopener noreferrer"><i class="fa fa-trash"></i></a>'; 
                bindHtml += '</td>';                                     
                bindHtml += '</tr>';                    
                jQuery('#render-emp-details').prepend(bindHtml);
                jQuery('form#add-employee-form').find('textarea, input').each(function () {
                    jQuery(this).val('');
                });
                jQuery('#add-employee').modal('hide');
                
            }

        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }        
    });
});

// Emp details update
jQuery(document).on('click', 'button#update-emp', function(){
    jQuery.ajax({
        type:'POST',
        url:baseurl+'curd/update',
        data:jQuery("form#update-employee-form").serialize(),
        dataType:'json',    
        beforeSend: function () {
            jQuery('button#update-emp').button('loading');
        },
        complete: function () {
            jQuery('button#update-emp').button('reset');
            setTimeout(function () {
                jQuery('span#success-msg').html('');
            }, 5000);
            
        },                
        success: function (json) {
            //console.log(json);
           $('.text-danger').remove();
            if (json['error']) {             
                for (i in json['error']) {
                  var element = $('.input-emp-' + i.replace('_', '-'));
                  if ($(element).parent().hasClass('input-group')) {                       
                    $(element).parent().after('<div class="text-danger" style="font-size: 14px;">' + json['error'][i] + '</div>');
                  } else {
                    $(element).after('<div class="text-danger" style="font-size: 14px;">' + json['error'][i] + '</div>');
                  }
                }
            } else {
                jQuery('span#success-msg').html('<div class="alert alert-success">Employee data has been successfully updated.</div>');
                var bindHtml = '';
                bindHtml += '<td>'+json['first_name']+'</td>';
                bindHtml += '<td>'+json['last_name']+'</td>';
                bindHtml += '<td>'+json['email']+'</td>';
                bindHtml += '<td>'+json['contact_no']+'</td>';
                bindHtml += '<td>'+json['salary']+'</td>';
                bindHtml += '<td>';
                    bindHtml += '<a title="Display" href="javascript:void(0);" data-geteid="'+json['emp_id']+'" data-toggle="modal" data-target="#dispaly-employee" class="display-emp btn btn-info btn-xs" rel="noopener noreferrer"><i class="fa fa-eye"></i> </a>&nbsp;';
                    bindHtml += '<a title="Edit" href="javascript:void(0);" data-getueid="'+json['emp_id']+'" data-toggle="modal" data-target="#update-employee" class="update-emp-details btn btn-primary btn-xs" rel="noopener noreferrer"><i class="fa fa-edit"></i> </a>&nbsp;';
                    bindHtml += '<a title="Delete" href="javascript:void(0);" data-getdeid="'+json['emp_id']+'" data-toggle="modal" data-target="#delete-employee" class="delete-em-details btn btn-danger btn-xs" rel="noopener noreferrer"><i class="fa fa-trash"></i></a>'; 
                bindHtml += '</td>';                                     
                jQuery('tr.empcls-'+json['emp_id']).html(bindHtml);
                jQuery('form#update-employee-form').find('textarea, input').each(function () {
                    jQuery(this).val('');
                });
                jQuery('#update-employee').modal('hide');
            }                       
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }        
    });
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

// view Emp details

jQuery(document).on('click', 'a.display-emp', function(){

var emp_id = jQuery(this).data('geteid');

jQuery.ajax({

type:'POST',

url:baseurl+'curd/display',

data:{emp_id: emp_id},

dataType:'html',

beforeSend: function () {

jQuery('#render-dispaly-data').html('<div class="text-center"><i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i></div>');

success: function (html) {

jQuery('#render-dispaly-data').html(html);

error: function (xhr, ajaxOptions, thrownError) {

console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);

}

});

// Edit Emp Details

jQuery(document).on('click', 'a.update-emp-details', function(){

var emp_id = jQuery(this).data('getueid');

jQuery.ajax({

type:'POST',

url:baseurl+'curd/edit',

data:{emp_id: emp_id},

dataType:'html',

beforeSend: function () {

jQuery('#render-update-data').html('<div class="text-center"><i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i></div>');

success: function (html) {

jQuery('#render-update-data').html(html);

error: function (xhr, ajaxOptions, thrownError) {

console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);

}

});

// set emp id for delete

jQuery(document).on('click', 'a.delete-em-details', function(){

var emp_id = jQuery(this).data('getdeid');

jQuery('button#delete-emp').data('deleteempid', emp_id);

});

// Edit Delete Details

jQuery(document).on('click', 'button#delete-emp', function(){

var emp_id = jQuery(this).data('deleteempid');

jQuery.ajax({

type:'POST',

url:baseurl+'curd/delete',

data:{emp_id: emp_id},

dataType:'html',

complete: function () {

setTimeout(function () {

jQuery('tr.empcls-'+emp_id).html('');

}, 3000);

jQuery('#delete-employee').modal('hide');

success: function (html) {

jQuery('tr.empcls-'+emp_id).html('<td colspan="5"><span style="color:red;">Deleted Employee details successfully.</span></td>');

error: function (xhr, ajaxOptions, thrownError) {

console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);

}

});

// Emp Details Add

jQuery(document).on('click', 'button#add-emp', function(){

jQuery.ajax({

type:'POST',

url:baseurl+'curd/save',

data:jQuery("form#add-employee-form").serialize(),

dataType:'json',

beforeSend: function () {

jQuery('button#add-emp').button('loading');

complete: function () {

jQuery('button#add-emp').button('reset');

setTimeout(function () {

jQuery('span#success-msg').html('');

}, 5000);

success: function (json) {

//console.log(json);

$('.text-danger').remove();

if (json['error']) {

for (i in json['error']) {

var element = $('.input-emp-' + i.replace('_', '-'));

if ($(element).parent().hasClass('input-group')) {

$(element).parent().after('<div class="text-danger" style="font-size: 14px;">' + json['error'][i] + '</div>');

} else {

$(element).after('<div class="text-danger" style="font-size: 14px;">' + json['error'][i] + '</div>');

}

} else {

jQuery('span#success-msg').html('<div class="alert alert-success">Employee data has been successfully added.</div>');

var bindHtml = '';

bindHtml += '<tr class="empcls-'+json['emp_id']+'">';

bindHtml += '<td>'+json['first_name']+'</td>';

bindHtml += '<td>'+json['last_name']+'</td>';

bindHtml += '<td>'+json['email']+'</td>';

bindHtml += '<td>'+json['contact_no']+'</td>';

bindHtml += '<td>'+json['salary']+'</td>';

bindHtml += '<td>';

bindHtml += '<a title="Display" href="javascript:void(0);" data-geteid="'+json['emp_id']+'" data-toggle="modal" data-target="#dispaly-employee" class="display-emp btn btn-info btn-xs" rel="noopener noreferrer"><i class="fa fa-eye"></i> </a>';

bindHtml += '<a title="Edit" href="javascript:void(0);" data-getueid="'+json['emp_id']+'" data-toggle="modal" data-target="#update-employee" class="update-emp-details btn btn-primary btn-xs" rel="noopener noreferrer"><i class="fa fa-edit"></i> </a>';

bindHtml += '<a title="Delete" href="javascript:void(0);" data-getdeid="'+json['emp_id']+'" data-toggle="modal" data-target="#delete-employee" class="delete-em-details btn btn-danger btn-xs" rel="noopener noreferrer"><i class="fa fa-trash"></i></a>';

bindHtml += '</td>';

bindHtml += '</tr>';

jQuery('#render-emp-details').prepend(bindHtml);

jQuery('form#add-employee-form').find('textarea, input').each(function () {

jQuery(this).val('');

});

jQuery('#add-employee').modal('hide');

}

error: function (xhr, ajaxOptions, thrownError) {

console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);

}

});

// Emp details update

jQuery(document).on('click', 'button#update-emp', function(){

jQuery.ajax({

type:'POST',

url:baseurl+'curd/update',

data:jQuery("form#update-employee-form").serialize(),

dataType:'json',

beforeSend: function () {

jQuery('button#update-emp').button('loading');

complete: function () {

jQuery('button#update-emp').button('reset');

setTimeout(function () {

jQuery('span#success-msg').html('');

}, 5000);

success: function (json) {

//console.log(json);

$('.text-danger').remove();

if (json['error']) {

for (i in json['error']) {

var element = $('.input-emp-' + i.replace('_', '-'));

if ($(element).parent().hasClass('input-group')) {

$(element).parent().after('<div class="text-danger" style="font-size: 14px;">' + json['error'][i] + '</div>');

} else {

$(element).after('<div class="text-danger" style="font-size: 14px;">' + json['error'][i] + '</div>');

}

} else {

jQuery('span#success-msg').html('<div class="alert alert-success">Employee data has been successfully updated.</div>');

var bindHtml = '';

bindHtml += '<td>'+json['first_name']+'</td>';

bindHtml += '<td>'+json['last_name']+'</td>';

bindHtml += '<td>'+json['email']+'</td>';

bindHtml += '<td>'+json['contact_no']+'</td>';

bindHtml += '<td>'+json['salary']+'</td>';

bindHtml += '<td>';

bindHtml += '</td>';

jQuery('tr.empcls-'+json['emp_id']).html(bindHtml);

jQuery('form#update-employee-form').find('textarea, input').each(function () {

jQuery(this).val('');

});

jQuery('#update-employee').modal('hide');

}

error: function (xhr, ajaxOptions, thrownError) {

console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);

}

});

Demo Download