article

Wednesday, August 21, 2013

Build ajax data grids with codeigniter and jquery

Build ajax data grids with codeigniter and jquery

Create database table
CREATE TABLE IF NOT EXISTS `users_01` (
  `user_id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(20) DEFAULT NULL,
  `password` varchar(20) DEFAULT NULL,
  `user_type` enum('regular','admin') NOT NULL DEFAULT 'regular',
  `email` varchar(255) NOT NULL,
  PRIMARY KEY (`user_id`),
  UNIQUE KEY `username` (`username`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=72 ;

setup baseurl
application\config\config.php
$config['base_url']    = 'http://localhost/codeigniter/';

 setup route
application\config\routes.php
$route['default_controller'] = "test";

 Create Controller
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//application\controllers\test.php
<?php
//application\controllers\test.php
class Test extends CI_Controller{
 function __construct(){
  parent::__construct();
  $this->load->helper(array('datagrid','url'));
  $this->Datagrid = new Datagrid('users_01','user_id');
 }
  
 function index(){
  $this->load->helper('form');
  $this->load->library('session');
  $this->load->view('users');
 }
  
 function proc($request_type = ''){
  $this->load->helper('url');
  if($action = Datagrid::getPostAction()){
   $error = "";
   switch($action){
    case 'delete' :
     if(!$this->Datagrid->deletePostSelection()){
      $error = 'Items could not be deleted';
     }
    break;
   }
   if($request_type!='ajax'){
    $this->load->library('session');
    $this->session->set_flashdata('form_error',$error);
    redirect('test/index');
   } else {
    echo json_encode(array('error' => $error));
   }
  } else {
   die("Bad Request");
  }
 }
}
?>
Create View
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//application\views\user.php
<html>
<head>
 <title>Users Management</title>
 <script src="<?php echo base_url(); ?>js/jquery-1.6.3.min.js"></script>
 <script src="<?php echo base_url(); ?>js/datagrid.js"></script>
</head>
<body>
<style>
 .dg_form table{
  border:1px solid silver;
 }
  
 .dg_form th{
  background-color:gray;
  font-family:"Courier New", Courier, mono;
  font-size:12px;
 }
  
 .dg_form td{
  background-color:gainsboro;
  font-size:12px;
 }
  
 .dg_form input[type=submit]{
  margin-top:2px;
 }
</style>
<?php
  $this->Datagrid->hidePkCol(true);
  $this->Datagrid->setHeadings(array('email'=>'E-mail'));
  $this->Datagrid->ignoreFields(array('password'));
  if($error = $this->session->flashdata('form_error')){
   echo "<font color=red>$error</font>";
  }
  echo form_open('test/proc',array('class'=>'dg_form'));
  echo $this->Datagrid->generate();
  echo Datagrid::createButton('delete','Delete');
  echo form_close();
?>
</body>
</html>
Create javascript root directory js folder
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//js/datagrid.js
$(function(){
   $('.dg_form :submit').click(function(e){
    e.preventDefault();
    var $form = $(this).parents('form');
    var action_name = $(this).attr('class').replace("dg_action_","");
    var action_control = $('<input type="hidden" name="dg_action['+action_name+']" value=1 />');
     
    $form.append(action_control);
     
    var post_data = $form.serialize();
    action_control.remove();
     
    var script = $form.attr('action')+'/ajax';
    $.post(script, post_data, function(resp){
     if(resp.error){
      alert(resp.error);
     } else {
      switch(action_name){
       case 'delete' :
        // remove deleted rows from the grid
        $form.find('.dg_check_item:checked').parents('tr').remove();
       break;
       case 'anotherAction' :
        // do something else...
       break;
      }
     }
    })
   })
    
   $('.dg_check_toggler').click(function(){
    var checkboxes = $(this).parents('table').find('.dg_check_item');
    if($(this).is(':checked')){
     checkboxes.attr('checked','true');
    } else {
     checkboxes.removeAttr('checked');
    }
   })
    
    
  })
Posted by ednalan at 8:27 AM . Under .

Related Post