Build ajax data grids with codeigniter and jqueryCreate 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');
}
})
})
