Today, i am going to share with you how to create CRUD Application with pagination using JQuery Ajax in Codeigniter 3.

CRUD is a basic step of any Core Language or framework. CRUD stand for Create Read Update and Delete. So in this post we will learn insert update delete in codeigniter using jquery Ajax. I gave you example from scratch so if you don't know about Codeigniter 3 then no issue. You have to just follow simple step.

There are listed bellow step you have to follow:

1)Download Fresh Codeigniter 3

2)Create Database and Configuration

3)Add Route

4)Create Controller

5)Update View

6)Create JS File

In this example i used several jquery Plugin for fire Ajax, Ajax pagination, Bootstrap, Bootstrap Validation, notification as listed bellow.

After create database and table successfully, we have to configuration of database in our Codeigniter 3 application, so open database.php file and add your database name, username and password.

application/config/database.php

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

$active_group = 'default';

$query_builder = TRUE;

$db['default'] = array(

'dsn' => '',

'hostname' => 'localhost',

'username' => 'root',

'password' => 'root',

'database' => 'test',

'dbdriver' => 'mysqli',

'dbprefix' => '',

'pconnect' => FALSE,

'db_debug' => (ENVIRONMENT !== 'production'),

'cache_on' => FALSE,

'cachedir' => '',

'char_set' => 'utf8',

'dbcollat' => 'utf8_general_ci',

'swap_pre' => '',

'encrypt' => FALSE,

'compress' => FALSE,

'stricton' => FALSE,

'failover' => array(),

'save_queries' => TRUE

);

Step 3: Add Route

In this step you have to add some route in your route file. So first we will create route for items modules for lists, create, edit, update and delete.so put the bellow content in route file:

application/config/routes.php

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

$route['default_controller'] = 'welcome';

$route['404_override'] = '';

$route['translate_uri_dashes'] = FALSE;

$route['items'] = "items/index";

$route['itemsCreate']['post'] = "items/store";

$route['itemsEdit/(:any)'] = "items/edit/$1";

$route['itemsUpdate/(:any)']['put'] = "items/update/$1";

$route['itemsDelete/(:any)']['delete'] = "items/delete/$1";

Step 4: Create Controller

Ok, now first we have to create one new controller api method listing, create, edit, update and delete. so create Items.php file in this path application/controllers/Items.php and put bellow code in this file:

application/controllers/Items.php

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Items extends CI_Controller {

/**

* Get All Data from this method.

*

* @return Response

*/

public function index()

{

$this->load->database();

if(!empty($this->input->get("search"))){

$this->db->like('title', $this->input->get("search"));

$this->db->or_like('description', $this->input->get("search"));

}

$this->db->limit(5, ($this->input->get("page",1) - 1) * 5);

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

$data['data'] = $query->result();

$data['total'] = $this->db->count_all("items");

echo json_encode($data);

}

/**

* Store Data from this method.

*

* @return Response

*/

public function store()

{

$this->load->database();

$insert = $this->input->post();

$this->db->insert('items', $insert);

$id = $this->db->insert_id();

$q = $this->db->get_where('items', array('id' => $id));

echo json_encode($q->row());

}

/**

* Edit Data from this method.

*

* @return Response

*/

public function edit($id)

{

$this->load->database();

$q = $this->db->get_where('items', array('id' => $id));

echo json_encode($q->row());

}

/**

* Update Data from this method.

*

* @return Response

*/

public function update($id)

{

$this->load->database();

$insert = $this->input->post();

$this->db->where('id', $id);

$this->db->update('items', $insert);

$q = $this->db->get_where('items', array('id' => $id));

echo json_encode($insert);

}

/**

* Delete Data from this method.

*

* @return Response

*/

public function delete($id)

{

$this->load->database();

$this->db->where('id', $id);

$this->db->delete('items');

echo json_encode(['success'=>true]);

}

}

Step 5: Update View

In this step we will update view file of welcome_message.php. In this file we will write code of insert update delete and also include bootstrap, jquery, toastr and twbsPagination. So let's update following file:

In this last step we will make new folder js on your root directory and create new file item-ajax.js on that folder. In item-ajax.js file we write all code of CRUD JS that will manage listing, insert, update, delete and pagination. So let's create new file and put following code: