Thursday 22 November 2018

How to Delete Multiple Records using Checkbox in Codeigniter



This post covered topic on Codeigniter tutorial for beginner step by step, and in this post we have shared simple feature like How to Delete multiple data from Mysql table using Checkbox in Codeigniter framework with Ajax. For do this operation we will use jQuery Ajax and HTML Check boxes input fields for delete multiple rows of mysql data in Codeigniter. Mainly we have always put delete button at individual row for delete single data. But if we have large amount of data, from that data we want to remove many unwanted rows of data at the same time. Then at that time this functionality will helpful. This is because if we have remove single data one by one then it will take much more time, and by using this feature we can delete bulk data at the same time.

If we have use Codeigniter framework for our web development, then we will make any large application by using this framework. So, if application is large, then in that application data will be bulk of amount. So, If we have made this functionality in our application then it will reduce our work time, and it will increase efficiency of our web application. For make this feature we have use jQuery, Ajax and HTML check boxes. HTML check boxes used for select multiple row of data by selecting checkbox. Ajax used for send and received request to server. By using Ajax with Codeigniter we can delete multiple or bulk of mysql data without refresh of web page. jQuery is used for give animation effect at the time of delete of multiple data.

For discuss deleting of multiple data in Codeigniter using Checkbox with Ajax, here we have first fetch data from mysql database with delete button and checkbox selection. When used checked checkbox, then that row background color and font color will be change. For multiple delete operation we have define one button for delete action. Once we have click on delete button, by using jQuery code first we have store id of data in one local variable, and then after send ajax request to Codeigniter controller with array of id data store in local variable. At server side it will delete multiple records one by one, and on client side, user can see deleting of multiple data with animated effect. Below you can find complete source code of How to Delete Multiple Records using Checkbox in Codeigniter.








Source Code


Step 1 - Database


Run following sql script in your phpMyAdmin, this script will make tbl_employee in your database.


--
-- Database: `testing`
--

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

--
-- Table structure for table `tbl_employee`
--

CREATE TABLE `tbl_employee` (
  `id` int(11) NOT NULL,
  `name` varchar(50) NOT NULL,
  `address` text NOT NULL,
  `gender` varchar(10) NOT NULL,
  `designation` varchar(100) NOT NULL,
  `age` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_employee`
--

INSERT INTO `tbl_employee` (`id`, `name`, `address`, `gender`, `designation`, `age`) VALUES
(5, 'Clara Gilliam', '63 Woodridge Lane\r\nMemphis, TN 38138', 'Female', 'Programmer', 24),
(6, 'Barbra K. Hurley', '1241 Canis Heights Drive\r\nLos Angeles, CA 90017', 'Female', 'Service technician', 26),
(7, 'Antonio J. Forbes', '403 Snyder Avenue\r\nCharlotte, NC 28208', 'Male', 'Faller', 32),
(8, 'Charles D. Horst', '1636 Walnut Hill Drive\r\nCincinnati, OH 45202', 'Male', 'Financial investigator', 29),
(174, 'Martha B. Tomlinson', '4005 Bird Spring Lane, Houston, TX 77002', 'Female', 'Systems programmer', 38),
(162, 'Jarrod D. Jones', '3827 Bingamon Road, Garfield Heights, OH 44125', 'Male', 'Manpower development advisor', 64),
(177, 'Patricia L. Scott', '1584 Dennison Street\r\nModesto, CA 95354', 'Female', 'Urban and regional planner', 54),
(181, 'Kimberly J. Ellis', '4905 Holt Street\r\nFort Lauderdale, FL 33301', 'Male', 'Dressing room attendant', 24),
(183, 'Steve John', '108, Vile Parle, CL', 'Male', 'Software Engineer', 29),
(186, 'Louis C. Charmis', '1462 Juniper Drive\r\nBreckenridge, MI 48612', 'Male', 'Mental health counselor', 40),
(190, 'Michael Cobb', '2409 Patterson Fork Road, Westchester, IL 60154', 'Female', 'Personal secretary', 36);

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_employee`
--
ALTER TABLE `tbl_employee`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_employee`
--
ALTER TABLE `tbl_employee`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=197;


Step 2 - Multiple_delete.php(Controllers)


Once database is ready, next step we have to create controller in our Codeigniter application. So, here we have create Multiple_delete.php controller in application/controllers folder.

In this controller class we have two method like index() and delete_all() method. index() method is used for fetch data from mysql database and display on web page, while delete_all() method is used for received ajax request for delte multiple data.


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

class Multiple_delete extends CI_Controller {
 
 public function __construct()
 {
  parent::__construct();
  $this->load->model('multiple_delete_model');
 }

 function index()
 {
  $data['employee_data'] = $this->multiple_delete_model->fetch_data();
  $this->load->view('multiple_delete', $data);
 }

 function delete_all()
 {
  if($this->input->post('checkbox_value'))
  {
   $id = $this->input->post('checkbox_value');
   for($count = 0; $count < count($id); $count++)
   {
    $this->multiple_delete_model->delete($id[$count]);
   }
  }
 }
  
}
?>


Step 3 - Multiple_delete_model.php (Models)


Generally, In Codeigniter models file is used for do any database operation. So, here also we have make Multiple_delete_model.php model file under application/models folder for database operation. In this file also there are two method like fetch_data() for fetch data from employee table and delete() method for delete data from mysql database operation.


<?php

class Multiple_delete_model extends CI_Model
{
 function fetch_data()
 {
  $this->db->select("*");
  $this->db->from("tbl_employee");
  $this->db->order_by('id', 'desc');
  return $this->db->get();
 }

 function delete($id)
 {
  $this->db->where('id', $id);
  $this->db->delete('tbl_employee');
 }
}

?>





Step 4 - multiple_delete.php (Views)


In Codeigniter Views file is used for display output on webpage and received any request for client. Here we have make multiple_delete.php view file under application/views folder. This view file first display employee table data in html table formate. And from this view file user can give request to delete multiple records using Ajax.


<html>
<head>
    <title>Delete Multiple Data using Checkboxs in Codeigniter 3 with Ajax</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
 <br /><br /><br />
 <h3 align="center">Delete Multiple Data using Checkboxs in Codeigniter 3 with Ajax</h3><br />
 
 <div class="table-responsive">
  <table class="table table-bordered">
   <thead>
    <tr>
     <th width="5%"><button type="button" name="delete_all" id="delete_all" class="btn btn-danger btn-xs">Delete</button></th>
     <th width="20%">Name</th>
     <th width="38%">Address</th>
     <th width="7%">Gender</th>
     <th width="25%">Designation</th>
     <th width="5%">Age</th>
    </tr>
   </thead>
   <tbody>
   <?php
   foreach($employee_data->result() as $row)
   {
    echo '
    <tr>
     <td><input type="checkbox" class="delete_checkbox" value="'.$row->id.'" /></td>
     <td>'.$row->name.'</td>
     <td>'.$row->address.'</td>
     <td>'.$row->gender.'</td>
     <td>'.$row->designation.'</td>
     <td>'.$row->age.'</td>
    </tr>
    ';
   }
   ?>
   </tbody>
  </table>
    </div>
</body>
</html>
<style>
.removeRow
{
 background-color: #FF0000;
    color:#FFFFFF;
}
</style>
<script>
$(document).ready(function(){
 
 $('.delete_checkbox').click(function(){
  if($(this).is(':checked'))
  {
   $(this).closest('tr').addClass('removeRow');
  }
  else
  {
   $(this).closest('tr').removeClass('removeRow');
  }
 });

 $('#delete_all').click(function(){
  var checkbox = $('.delete_checkbox:checked');
  if(checkbox.length > 0)
  {
   var checkbox_value = [];
   $(checkbox).each(function(){
    checkbox_value.push($(this).val());
   });
   $.ajax({
    url:"<?php echo base_url(); ?>multiple_delete/delete_all",
    method:"POST",
    data:{checkbox_value:checkbox_value},
    success:function()
    {
     $('.removeRow').fadeOut(1500);
    }
   })
  }
  else
  {
   alert('Select atleast one records');
  }
 });

});
</script>


Once you have follow video tutorial and above source code, then you can make Codeigniter application in which you can delete multiple records using checkbox selection with Ajax jQuery and Mysql.

7 comments:

  1. jquery not run without any error

    ReplyDelete
  2. Not working, The row fadeout but still exist after page refresh.

    ReplyDelete
  3. Because it's just for testing. you can change the action to actually delete.

    ReplyDelete
  4. When I check the record it is fine but when I click delete nothing happened the data still there and no action at all.

    ReplyDelete
  5. not working when i refresh the page

    ReplyDelete