Build Ajax Data Grids With Codeigniter And Jquery Web-development (jquery) 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
//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 //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 //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'); } }) })
0 Response to "Build Ajax Data Grids With Codeigniter And Jquery"
Posting Komentar