Datatables Add, View, Edit, Delete, Export and Custom Filter

A Table is an arrangement of columns and rows that organizes and positions data. DataTables is a table enhancing plug-in for the jQuery Javascript library, adding sorting, paging, and filtering abilities to plain HTML tables with minimal effort.

In this tutorial you will learn about jQuery Datatables Add, Read, Edit, Delete, Export, and Custom Filter Using Codeigniter with Ajax. We will handle to refresh Datatables when any record updated or delete from the table. This is a very simple example, you can just copy-paste, and change according to your requirement.

Before started to implement the jQuery Datatables plugin, look files structure:

server-side-datatables-custom-filter-using-codeigniter
- application
  - config
    - constants.php
    - database.php
    - routes.php
  - controllers
    - Curd.php
  - models
    - Curd_model.php
  - views
    - employees
      - index.php
    - templates
      - header.php
      - footer.php
- system
- index.php
- assets
  - css
  - js

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';

INSERT INTO `employees` (`id`, `name`, `last_name`, `email`, `contact_no`, `address`, `salary`) VALUES
(1, 'Bunty', 'Bably', 'bably@techarise.com', '9000000009', 'Ottawa', 657002.00),
(2, 'Hermione', 'Butler', 'Butler@techarise.com', '9000000015', 'Edinburgh', 987003.00),
(3, 'Sonia', 'Khan', 'sonia@techarise.com', '9000000010', 'Oslo', 345002.00),
(4, 'Herrod', 'Chandler', 'Chandler@techarise.com', '9000000016', 'Abu Dhabi', 603003.00),
(5, 'Roney', 'Rockey', 'rockey@techarise.com', '9000000011', 'Berlin', 321002.00),
(6, 'Howard', 'Hatfield', 'Hatfield@techarise.com', '9000000017', 'Ankara', 123003.00),
(7, 'Gloria', 'Little', 'little@techarise.com', '9000000012', 'Rome', 920002.00),
(8, 'Jackson', 'Bradshaw', 'Bradshaw@techarise.com', '9000000018', 'Lisbon', 690003.00),
(9, 'Quinn', 'Flynn', 'Quinn@techarise.com', '9000000019', 'Antananarivo', 700003.00),
(10, 'Tatyana', 'Fitzpatrick', 'Fitzpatrick@techarise.com', '9000000020', 'Manila', 600001.00),
(11, 'Thor', 'Walton', 'Thor@techarise.com', '9000000021', 'Santiago', 304001.00),
(12, 'Ashton', 'Cox', 'cox@techarise.com', '9000000001', 'Tokyo', 300001.00),
(13, 'Bradley', 'Greer', 'greer@techarise.com', '9000000002', 'Landon', 200001.00),
(14, 'Brenden', 'Wagner', 'wagner@techarise.com', '9000000003', 'New York', 500001.00),
(15, 'Brielle', 'Williamson', 'williamson@techarise.com', '9000000004', 'Cape Town', 600001.00),
(16, 'Caesar', 'Vance', 'vance@techarise.com', '9000000005', 'Sydney', 500002.00),
(17, 'Cedric', 'Kelly', 'kelly@techarise.com', '9000000006', 'Wellington', 600003.00),
(18, 'Prescott', 'Bartlett', 'Bartlett@techarise.com', '9000000007', 'Washington DC', 500002.00),
(19, 'Haley', 'Kennedy', 'Kennedy@techarise.com', '9000000013', 'Amsterdam', 678003.00),
(20, 'Charde', 'Marshall', 'marshall@techarise.com', '9000000008', 'Madrid', 509002.00),
(21, 'Sameer', 'Sameer', 'sameer@techarise.com', '9000000014', 'Delhi', 542003.00);

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

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

<?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';

INSERT INTO `employees` (`id`, `name`, `last_name`, `email`, `contact_no`, `address`, `salary`) VALUES

(1, 'Bunty', 'Bably', 'bably@techarise.com', '9000000009', 'Ottawa', 657002.00),

(2, 'Hermione', 'Butler', 'Butler@techarise.com', '9000000015', 'Edinburgh', 987003.00),

(3, 'Sonia', 'Khan', 'sonia@techarise.com', '9000000010', 'Oslo', 345002.00),

(4, 'Herrod', 'Chandler', 'Chandler@techarise.com', '9000000016', 'Abu Dhabi', 603003.00),

(5, 'Roney', 'Rockey', 'rockey@techarise.com', '9000000011', 'Berlin', 321002.00),

(6, 'Howard', 'Hatfield', 'Hatfield@techarise.com', '9000000017', 'Ankara', 123003.00),

(7, 'Gloria', 'Little', 'little@techarise.com', '9000000012', 'Rome', 920002.00),

(8, 'Jackson', 'Bradshaw', 'Bradshaw@techarise.com', '9000000018', 'Lisbon', 690003.00),

(9, 'Quinn', 'Flynn', 'Quinn@techarise.com', '9000000019', 'Antananarivo', 700003.00),

(10, 'Tatyana', 'Fitzpatrick', 'Fitzpatrick@techarise.com', '9000000020', 'Manila', 600001.00),

(11, 'Thor', 'Walton', 'Thor@techarise.com', '9000000021', 'Santiago', 304001.00),

(12, 'Ashton', 'Cox', 'cox@techarise.com', '9000000001', 'Tokyo', 300001.00),

(13, 'Bradley', 'Greer', 'greer@techarise.com', '9000000002', 'Landon', 200001.00),

(14, 'Brenden', 'Wagner', 'wagner@techarise.com', '9000000003', 'New York', 500001.00),

(15, 'Brielle', 'Williamson', 'williamson@techarise.com', '9000000004', 'Cape Town', 600001.00),

(16, 'Caesar', 'Vance', 'vance@techarise.com', '9000000005', 'Sydney', 500002.00),

(17, 'Cedric', 'Kelly', 'kelly@techarise.com', '9000000006', 'Wellington', 600003.00),

(18, 'Prescott', 'Bartlett', 'Bartlett@techarise.com', '9000000007', 'Washington DC', 500002.00),

(19, 'Haley', 'Kennedy', 'Kennedy@techarise.com', '9000000013', 'Amsterdam', 678003.00),

(20, 'Charde', 'Marshall', 'marshall@techarise.com', '9000000008', 'Madrid', 509002.00),

(21, 'Sameer', 'Sameer', 'sameer@techarise.com', '9000000014', 'Delhi', 542003.00);

ALTER TABLE `employees`

ADD PRIMARY KEY (`id`);

ALTER TABLE `employees`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'primary key', AUTO_INCREMENT=22;

Step 2: Create a model file

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

<?php
/**
 * Description of Curd Model: Datatables Add, View, Edit, Delete, Export and Custom Filter Using Codeigniter with Ajax
 *
 * @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
    var $table = 'employees';
    var $column_order = array(null, 'concat_ws(" ", e.name, e.last_name)','e.email','e.contact_no','e.address','e.salary');
    var $column_search = array('concat_ws(" ", e.name, e.last_name)','e.email','e.contact_no','e.address','e.salary');
    var $order = array('id' => 'DESC');

    private function getQuery()
    {

        //add custom filter here
        if(!empty($this->input->post('fullname')))
        {
            $this->db->like('concat_ws(" ", e.name, e.last_name)', $this->input->post('fullname'), 'both');
        }
        if(!empty($this->input->post('email')))
        {
            $this->db->like('e.email', $this->input->post('email'), 'both');
        }
        if(!empty($this->input->post('contact')))
        {
            $this->db->like('e.contact_no', $this->input->post('contact'), 'both');
        }
        if(!empty($this->input->post('address')))
        {
            $this->db->like('e.address', $this->input->post('address'), 'both');
        }

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

        $this->db->from('employees as e');
        $i = 0;
    
        foreach ($this->column_search as $item) // loop column 
        {
            if(!empty($_POST['search']['value'])) // if datatable send POST for search
            {
                
                if($i===0) // first loop
                {
                    $this->db->group_start(); // open bracket. query Where with OR clause better with bracket. because maybe can combine with other WHERE with AND.
                    $this->db->like($item, $_POST['search']['value']);
                }
                else
                {
                    $this->db->or_like($item, $_POST['search']['value']);
                }

                if(count($this->column_search) - 1 == $i) //last loop
                    $this->db->group_end(); //close bracket
            }
            $i++;
        }
        
        if(!empty($_POST['order'])) // here order processing
        {
            $this->db->order_by($this->column_order[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
        } 
        else if(!empty($this->order))
        {
            $order = $this->order;
            $this->db->order_by(key($order), $order[key($order)]);
        }
    }
    public function getEmpData()
    {
        $this->getQuery();
        if(!empty($_POST['length']) && $_POST['length'] < 1) {
            $_POST['length']= '10';
        } else {
            $_POST['length']= $_POST['length'];
        }
        
        if(!empty($_POST['start']) && $_POST['start'] > 1) {
        $_POST['start']= $_POST['start'];
        }
        $this->db->limit($_POST['length'], $_POST['start']);
        //print_r($_POST);die;
        $query = $this->db->get();
        return $query->result_array();
    }
    public function countFiltered()
    {
        $this->getQuery();
        $query = $this->db->get();
        return $query->num_rows();
    }

    public function countAll()
    {
        $this->db->from($this->table);
        return $this->db->count_all_results();
    }


    // 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

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

<?php

/**

* Description of Curd Model: Datatables Add, View, Edit, Delete, Export and Custom Filter Using Codeigniter with Ajax

* @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

var $table = 'employees';

var $column_order = array(null, 'concat_ws(" ", e.name, e.last_name)','e.email','e.contact_no','e.address','e.salary');

var $column_search = array('concat_ws(" ", e.name, e.last_name)','e.email','e.contact_no','e.address','e.salary');

var $order = array('id' => 'DESC');

private function getQuery()

{

//add custom filter here

if(!empty($this->input->post('fullname')))

{

$this->db->like('concat_ws(" ", e.name, e.last_name)', $this->input->post('fullname'), 'both');

}

if(!empty($this->input->post('email')))

{

$this->db->like('e.email', $this->input->post('email'), 'both');

}

if(!empty($this->input->post('contact')))

{

$this->db->like('e.contact_no', $this->input->post('contact'), 'both');

}

if(!empty($this->input->post('address')))

{

$this->db->like('e.address', $this->input->post('address'), 'both');

}

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

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

$i = 0;

foreach ($this->column_search as $item) // loop column

{

if(!empty($_POST['search']['value'])) // if datatable send POST for search

{

if($i===0) // first loop

{

$this->db->group_start(); // open bracket. query Where with OR clause better with bracket. because maybe can combine with other WHERE with AND.

$this->db->like($item, $_POST['search']['value']);

}

else

{

$this->db->or_like($item, $_POST['search']['value']);

}

if(count($this->column_search) - 1 == $i) //last loop

$this->db->group_end(); //close bracket

}

$i++;

}

if(!empty($_POST['order'])) // here order processing

{

$this->db->order_by($this->column_order[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);

}

else if(!empty($this->order))

{

$order = $this->order;

$this->db->order_by(key($order), $order[key($order)]);

}

public function getEmpData()

{

$this->getQuery();

if(!empty($_POST['length']) && $_POST['length'] < 1) {

$_POST['length']= '10';

} else {

$_POST['length']= $_POST['length'];

}

if(!empty($_POST['start']) && $_POST['start'] > 1) {

$_POST['start']= $_POST['start'];

}

$this->db->limit($_POST['length'], $_POST['start']);

//print_r($_POST);die;

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

return $query->result_array();

}

public function countFiltered()

{

$this->getQuery();

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

return $query->num_rows();

}

public function countAll()

{

$this->db->from($this->table);

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

}

// 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
/**
 * @package Curd :  Datatables Add, View, Edit, Delete, Export and Custom Filter Using Codeigniter with Ajax
 *
 * @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'] = 'Datatables Add, View, Edit, Delete, Export and Custom Filter | TechArise';    
        $this->load->view('employees/index', $data);
    }

    public function getAllEmployees()
    {
        $json = array();    
        $list = $this->emp->getEmpData();
        $data = array();
        foreach ($list as $element) {
            $row = array();
            $row[] = $element['id'];
            $row[] = $element['fullname'];
            $row[] = $element['email'];
            $row[] = $element['contact_no'];
            $row[] = $element['address'];
            $row[] = $element['salary'];
            $data[] = $row;
        }

        $json['data'] = array(
            "draw" => $_POST['draw'],
            "recordsTotal" => $this->emp->countAll(),
            "recordsFiltered" => $this->emp->countFiltered(),
            "data" => $data,
        );
        //output to json format
        $this->output->set_header('Content-Type: application/json');
        echo json_encode($json['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';
            }
        }
        $this->output->set_header('Content-Type: application/json');
        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('employees/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';
            }
        }
        $this->output->set_header('Content-Type: application/json');
        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('employees/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

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

<?php

/**

* @package Curd : Datatables Add, View, Edit, Delete, Export and Custom Filter Using Codeigniter with Ajax

* @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'] = 'Datatables Add, View, Edit, Delete, Export and Custom Filter | TechArise';

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

}

public function getAllEmployees()

{

$json = array();

$list = $this->emp->getEmpData();

$data = array();

foreach ($list as $element) {

$row = array();

$row[] = $element['id'];

$row[] = $element['fullname'];

$row[] = $element['email'];

$row[] = $element['contact_no'];

$row[] = $element['address'];

$row[] = $element['salary'];

$data[] = $row;

}

$json['data'] = array(

"draw" => $_POST['draw'],

"recordsTotal" => $this->emp->countAll(),

"recordsFiltered" => $this->emp->countFiltered(),

"data" => $data,

);

//output to json format

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

echo json_encode($json['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';

}

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

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('employees/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';

}

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

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('employees/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: We will include these necessary Datatable plugin files to load Datatable and export data.

We have define HTML table for initialization jQuery Datatable plugin on this page based on id selector: #render-datatable.

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
  <?php echo link_tag('//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css'); ?>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
  <script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('#render-datatable').dataTable({
            "paging": true,
            "processing": false,
            "serverSide": true,
            "order": [],
            // Load data for the table's content from an Ajax source
            "ajax": {
                "url": baseurl+"curd/getAllEmployees",
                "type": "POST",
                "data": function ( data ) {
                    data.fullname = $('#name_filter').val();
                    data.email = $('#email_filter').val();
                    data.contact = $('#contact_filter').val();
                    data.address = $('#address_filter').val();
                }
            },
            dom: 'lBfrtip',
            buttons: [{
                    extend: 'excel',
                    text: '<i class="far fa-file-excel" aria-hidden="true"></i> Excel Export',
                    filename: 'members',
                    title: '',
                    exportOptions: {
                        modifier: {
                            search: 'applied',
                            order: 'applied',
                            page: 'current'
                        },
                        columns: [1, 2, 3]
                    }
                },
                {
                    extend: 'csv',
                    text: '<i class="far fa-csv"></i> Export CSV',
                    filename: 'members',
                    title: '',
                    exportOptions: {
                        modifier: {
                            search: 'applied',
                            order: 'applied',
                            page: 'current'
                        },
                        columns: [1, 2, 3, 4, 5]
                    }
                },
                {
                    extend: 'pdf',
                    text: '<i class="far fa-file-pdf" aria-hidden="true"></i> PDF',
                    filename: 'members',
                    title: '',
                    exportOptions: {
                        modifier: {
                            search: 'applied',
                            order: 'applied',
                            page: 'current'
                        },
                        columns: [1, 2, 3, 4, 5]
                    }
                },
            ],
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "columns": [
                {
                    "bVisible": false, "aTargets": [0]
                },
                null,
                null,
                null,
                null,
                null,
                {
                    // render action button
                    mRender: function (data, type, row) {
                        var bindHtml = '';
                        bindHtml += '<a data-toggle="modal" data-target="#dispaly-employee" href="javascript:void(0);" title="View Employee" class="display-emp ml-1 btn-ext-small btn btn-sm btn-info"  data-geteid="' + row[0] + '" rel="noopener noreferrer"><i class="fas fa-eye"></i></a>';
                        bindHtml += '<a data-toggle="modal" data-target="#update-employee" href="javascript:void(0);" title="Edit Employee" class="update-emp-details ml-1 btn-ext-small btn btn-sm btn-primary"  data-getueid="' + row[0] + '" rel="noopener noreferrer"><i class="fas fa-edit"></i></a>';
                        bindHtml += '<a data-toggle="modal" data-target="#delete-employee" href="javascript:void(0);" title="Delete Employee" class="delete-em-details ml-1 btn-ext-small btn btn-sm btn-danger" data-getdeid="' + row[0] + '" rel="noopener noreferrer"><i class="fas fa-times"></i></a>';
                        return bindHtml;
                    }
                },
                
            ],
            "fnCreatedRow": function( nRow, aData, iDataIndex ) {
                $(nRow).attr('id', aData[0]);
            }
        });

        // define method global search
        function filterGlobal(v) {
            jQuery('#render-datatable').DataTable().search(
                    v,
                    false,
                    false
                    ).draw();
        }
        
        // filter keyword
        jQuery('input.global_filter').on('keyup click', function () {
            var v = jQuery(this).val();    
            filterGlobal(v);
        });
        jQuery('input.column_filter').on('keyup click', function () {
            jQuery('#render-datatable').DataTable().ajax.reload();
        });
    });

</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

<?php echo link_tag('//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css'); ?>

jQuery(document).ready(function () {

jQuery('#render-datatable').dataTable({

"paging": true,

"processing": false,

"serverSide": true,

"order": [],

// Load data for the table's content from an Ajax source

"ajax": {

"url": baseurl+"curd/getAllEmployees",

"type": "POST",

"data": function ( data ) {

data.fullname = $('#name_filter').val();

data.email = $('#email_filter').val();

data.contact = $('#contact_filter').val();

data.address = $('#address_filter').val();

}

dom: 'lBfrtip',

buttons: [{

extend: 'excel',

text: '<i class="far fa-file-excel" aria-hidden="true"></i> Excel Export',

filename: 'members',

title: '',

exportOptions: {

modifier: {

search: 'applied',

order: 'applied',

page: 'current'

columns: [1, 2, 3]

}

{

extend: 'csv',

text: '<i class="far fa-csv"></i> Export CSV',

filename: 'members',

title: '',

exportOptions: {

modifier: {

search: 'applied',

order: 'applied',

page: 'current'

columns: [1, 2, 3, 4, 5]

}

{

extend: 'pdf',

text: '<i class="far fa-file-pdf" aria-hidden="true"></i> PDF',

filename: 'members',

title: '',

exportOptions: {

modifier: {

search: 'applied',

order: 'applied',

page: 'current'

columns: [1, 2, 3, 4, 5]

}

"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],

"columns": [

{

"bVisible": false, "aTargets": [0]

null,

{

// render action button

mRender: function (data, type, row) {

var bindHtml = '';

bindHtml += '<a data-toggle="modal" data-target="#dispaly-employee" href="javascript:void(0);" title="View Employee" class="display-emp ml-1 btn-ext-small btn btn-sm btn-info" data-geteid="' + row[0] + '" rel="noopener noreferrer"><i class="fas fa-eye"></i></a>';

bindHtml += '<a data-toggle="modal" data-target="#update-employee" href="javascript:void(0);" title="Edit Employee" class="update-emp-details ml-1 btn-ext-small btn btn-sm btn-primary" data-getueid="' + row[0] + '" rel="noopener noreferrer"><i class="fas fa-edit"></i></a>';

bindHtml += '<a data-toggle="modal" data-target="#delete-employee" href="javascript:void(0);" title="Delete Employee" class="delete-em-details ml-1 btn-ext-small btn btn-sm btn-danger" data-getdeid="' + row[0] + '" rel="noopener noreferrer"><i class="fas fa-times"></i></a>';

return bindHtml;

}

"fnCreatedRow": function( nRow, aData, iDataIndex ) {

$(nRow).attr('id', aData[0]);

}

});

// define method global search

function filterGlobal(v) {

jQuery('#render-datatable').DataTable().search(

false,

false

).draw();

}

// filter keyword

jQuery('input.global_filter').on('keyup click', function () {

var v = jQuery(this).val();

filterGlobal(v);

});

jQuery('input.column_filter').on('keyup click', function () {

jQuery('#render-datatable').DataTable().ajax.reload();

});

</script>

Step 6: Create a view

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

<?php
$this->load->view('templates/header');
?>
<style>
    .dataTables_filter { display: none; }
    .dataTables_wrapper .dt-buttons {
        float:right;  
        text-align:center;
        font-size:12px;
    }
    .dataTables_paginate{
        font-size:10px;
        margin-bottom:5px;
    }
    .dataTables_length{
        font-size:12px;
        margin-bottom:5px;    
    }
    .dataTables_info{
        font-size:12px;
    }
</style>
<section class="showcase">
    <div class="container">
        <div class="pb-2 mt-4 mb-2 border-bottom">
        <h2>Datatables Add, View, Edit, Delete, Export and Custom Filter Using Codeigniter with Ajax</h2>
      </div>
      <div class="row">
          <div class="col-lg-12"><span id="success-msg"></div>
      </div>
        <div class="row">
            <div class="col-lg-12">
                <a href="javascript:void(0);" data-toggle="modal" data-target="#add-employee" class="float-right btn btn-primary btn-sm" style="margin: 4px;" rel="noopener noreferrer"><i class="fa fa-plus"></i> Add Employee</a>              
            </div>
        </div>
        <div class="row">
            
            <div class="col-lg-12">
                <div class="row">
                    <div class="col-lg-12 col-sm-12">
                        <div class="form-group">                       
                            <input type="text" class="small form-control global_filter" id="global_filter" placeholder="Keyword..">                                       
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-sm-3">
                        <div class="form-group">                        
                            <input type="text" class="form-control column_filter" id="name_filter" data-custom_column="1" placeholder="Name">
                        </div>

                    </div>
                    <div class="col-lg-3 col-sm-3">
                        <div class="form-group">                        
                            <input type="text" class="form-control column_filter" id="email_filter" data-custom_column="2" placeholder="Email">
                        </div>

                    </div>
                    <div class="col-lg-3 col-sm-3">
                        <div class="form-group">                        
                            <input type="text" class="form-control column_filter" id="contact_filter" data-custom_column="3" placeholder="Contact">
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-3">
                        <div class="form-group">                        
                            <input type="text" class="form-control column_filter" id="address_filter" data-custom_column="3" placeholder="Address">
                        </div>
                    </div>
                </div>                
            </div>
        </div>
        <div class="table-responsive">
            <table id="render-datatable" class="table table-bordered table-hover small"> 
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">Contact No</th>
                        <th scope="col">Address</th>
                        <th scope="col">Salary</th>
                        <th scope="col">Action</th>
                    </tr>
                </thead> 
                <tbody> 
                </tbody> 
                <tfoot> 
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">Contact No</th>
                        <th scope="col">Address</th>
                        <th scope="col">Salary</th>
                        <th scope="col">Action</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
</section>

<?php
$this->load->view('employees/popup/display');
$this->load->view('employees/popup/edit');
$this->load->view('employees/popup/add');
$this->load->view('employees/popup/delete');
$this->load->view('templates/footer');
?>
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('#render-datatable').dataTable({
            "paging": true,
            "processing": false,
            "serverSide": true,
            "order": [],
            // Load data for the table's content from an Ajax source
            "ajax": {
                "url": baseurl+"curd/getAllEmployees",
                "type": "POST",
                "data": function ( data ) {
                    data.fullname = $('#name_filter').val();
                    data.email = $('#email_filter').val();
                    data.contact = $('#contact_filter').val();
                    data.address = $('#address_filter').val();
                }
            },
            dom: 'lBfrtip',
            buttons: [{
                    extend: 'excel',
                    text: '<i class="far fa-file-excel" aria-hidden="true"></i> Excel Export',
                    filename: 'members',
                    title: '',
                    exportOptions: {
                        modifier: {
                            search: 'applied',
                            order: 'applied',
                            page: 'current'
                        },
                        columns: [1, 2, 3]
                    }
                },
                {
                    extend: 'csv',
                    text: '<i class="far fa-csv"></i> Export CSV',
                    filename: 'members',
                    title: '',
                    exportOptions: {
                        modifier: {
                            search: 'applied',
                            order: 'applied',
                            page: 'current'
                        },
                        columns: [1, 2, 3, 4, 5]
                    }
                },
                {
                    extend: 'pdf',
                    text: '<i class="far fa-file-pdf" aria-hidden="true"></i> PDF',
                    filename: 'members',
                    title: '',
                    exportOptions: {
                        modifier: {
                            search: 'applied',
                            order: 'applied',
                            page: 'current'
                        },
                        columns: [1, 2, 3, 4, 5]
                    }
                },
            ],
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "columns": [
                {
                    "bVisible": false, "aTargets": [0]
                },
                null,
                null,
                null,
                null,
                null,
                {
                    // render action button
                    mRender: function (data, type, row) {
                        var bindHtml = '';
                        bindHtml += '<a data-toggle="modal" data-target="#dispaly-employee" href="javascript:void(0);" title="View Employee" class="display-emp ml-1 btn-ext-small btn btn-sm btn-info"  data-geteid="' + row[0] + '" rel="noopener noreferrer"><i class="fas fa-eye"></i></a>';
                        bindHtml += '<a data-toggle="modal" data-target="#update-employee" href="javascript:void(0);" title="Edit Employee" class="update-emp-details ml-1 btn-ext-small btn btn-sm btn-primary"  data-getueid="' + row[0] + '" rel="noopener noreferrer"><i class="fas fa-edit"></i></a>';
                        bindHtml += '<a data-toggle="modal" data-target="#delete-employee" href="javascript:void(0);" title="Delete Employee" class="delete-em-details ml-1 btn-ext-small btn btn-sm btn-danger" data-getdeid="' + row[0] + '" rel="noopener noreferrer"><i class="fas fa-times"></i></a>';
                        return bindHtml;
                    }
                },
                
            ],
            "fnCreatedRow": function( nRow, aData, iDataIndex ) {
                $(nRow).attr('id', aData[0]);
            }
        });

        // define method global search
        function filterGlobal(v) {
            jQuery('#render-datatable').DataTable().search(
                    v,
                    false,
                    false
                    ).draw();
        }
        
        // filter keyword
        jQuery('input.global_filter').on('keyup click', function () {
            var v = jQuery(this).val();    
            filterGlobal(v);
        });
        jQuery('input.column_filter').on('keyup click', function () {
            jQuery('#render-datatable').DataTable().ajax.reload();
        });
    });

</script>

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

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

<?php

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

<style>

.dataTables_filter { display: none; }

.dataTables_wrapper .dt-buttons {

float:right;

text-align:center;

font-size:12px;

}

.dataTables_paginate{

font-size:10px;

margin-bottom:5px;

}

.dataTables_length{

font-size:12px;

margin-bottom:5px;

}

.dataTables_info{

font-size:12px;

}

</style>

<h2>Datatables Add, View, Edit, Delete, Export and Custom Filter Using Codeigniter with Ajax</h2>

</div>

</div>

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

</div>

</div>

</div>

</div>

</div>

</div>

<thead>

<tr>

<th scope="col">Email</th>

<th scope="col">Contact No</th>

<th scope="col">Address</th>

<th scope="col">Salary</th>

<th scope="col">Action</th>

</tr>

</thead>

<tbody>

</tbody>

<tfoot>

<tr>

<th scope="col">Email</th>

<th scope="col">Contact No</th>

<th scope="col">Address</th>

<th scope="col">Salary</th>

<th scope="col">Action</th>

</tr>

</tfoot>

</table>

</div>

</section>

<?php

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

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

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

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

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

jQuery(document).ready(function () {

jQuery('#render-datatable').dataTable({

"paging": true,

"processing": false,

"serverSide": true,

"order": [],

// Load data for the table's content from an Ajax source

"ajax": {

"url": baseurl+"curd/getAllEmployees",

"type": "POST",

"data": function ( data ) {

data.fullname = $('#name_filter').val();

data.email = $('#email_filter').val();

data.contact = $('#contact_filter').val();

data.address = $('#address_filter').val();

}

dom: 'lBfrtip',

buttons: [{

extend: 'excel',

text: '<i class="far fa-file-excel" aria-hidden="true"></i> Excel Export',

filename: 'members',

title: '',

exportOptions: {

modifier: {

search: 'applied',

order: 'applied',

page: 'current'

columns: [1, 2, 3]

}

{

extend: 'csv',

text: '<i class="far fa-csv"></i> Export CSV',

filename: 'members',

title: '',

exportOptions: {

modifier: {

search: 'applied',

order: 'applied',

page: 'current'

columns: [1, 2, 3, 4, 5]

}

{

extend: 'pdf',

text: '<i class="far fa-file-pdf" aria-hidden="true"></i> PDF',

filename: 'members',

title: '',

exportOptions: {

modifier: {

search: 'applied',

order: 'applied',

page: 'current'

columns: [1, 2, 3, 4, 5]

}

"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],

"columns": [

{

"bVisible": false, "aTargets": [0]

null,

{

// render action button

mRender: function (data, type, row) {

var bindHtml = '';

return bindHtml;

}

"fnCreatedRow": function( nRow, aData, iDataIndex ) {

$(nRow).attr('id', aData[0]);

}

});

// define method global search

function filterGlobal(v) {

jQuery('#render-datatable').DataTable().search(

false,

false

).draw();

}

// filter keyword

jQuery('input.global_filter').on('keyup click', function () {

var v = jQuery(this).val();

filterGlobal(v);

});

jQuery('input.column_filter').on('keyup click', function () {

jQuery('#render-datatable').DataTable().ajax.reload();

});

</script>

Step 6: Create a view

Create a view file named “add.php” inside “application/views/employees/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">
                    <h4 class="modal-title -remove-title">Add Employee</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body panel-body">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <input type="text" name="first_name" class="form-control input-emp-firstname" id="first-name" placeholder="First Name">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <input type="text" name="last_name" class="form-control input-emp-lastname" id="last-name" placeholder="Last Name">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <input type="text" name="email" class="form-control input-emp-email" id="email" placeholder="Email">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <input type="text" name="address" class="form-control input-emp-address" id="address" placeholder="Address">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <input type="text" name="contact_no" class="form-control input-emp-contactno" id="contact-no" placeholder="Contact No">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <input type="number" name="salary" class="form-control input-emp-salary" id="emp-salary" placeholder="Salary">
                            </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>

</div>

</div>

</div>

</div>

</div>

</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">
                    <h4 class="modal-title -remove-title">View/Dispaly</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </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'] : '';
?>
<!-- row -->
<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><!-- /.row -->

<?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>

</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">
                    <h4 class="modal-title -remove-title">Edit/Update</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </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">
                <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 class="col-lg-6">
            <div class="form-group">
                <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 class="row">
        <div class="col-lg-6">
            <div class="form-group">
                <input type="text" name="email" class="form-control input-emp-email" id="email" placeholder="Email" value="<?php print $email; ?>">
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <input type="text" name="address" class="form-control input-emp-address" id="address" placeholder="Address" value="<?php print $address; ?>">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <div class="form-group">
                <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 class="col-lg-6">
            <div class="form-group">
                <input type="text" name="salary" class="form-control input-emp-salary" id="last-name" placeholder="Salary" value="<?php print $salary; ?>">
            </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'] : '';

</div>

</div>

</div>

</div>

</div>

</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" style="width: 24%;"> 
        <form id="delete-employee-form" method="post">   
            <div class="modal-content panel panel-primary">
                <div class="modal-header panel-heading">
                    <h4 class="modal-title -remove-title">Delete Confirmation</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </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#'+emp_id).html(''),
                jQuery('#render-datatable').DataTable().ajax.reload();
            }, 3000);
            jQuery('#delete-employee').modal('hide');
        }, 
        success: function (html) {
            jQuery('tr#'+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>');
                jQuery('#render-datatable').DataTable().ajax.reload();
                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>');
                jQuery('#render-datatable').DataTable().ajax.reload();
                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

// 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#'+emp_id).html(''),

jQuery('#render-datatable').DataTable().ajax.reload();

}, 3000);

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

success: function (html) {

jQuery('tr#'+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>');

jQuery('#render-datatable').DataTable().ajax.reload();

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>');

jQuery('#render-datatable').DataTable().ajax.reload();

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