Datatables is a power plugin of jquery that allows you to display data in tabular format with Searching tab, showing numbers (Example : 10, 20, 50, 100 etc) and Asynchronous pagination.
In this tutorial, I am going to show you how to integrate datatables in codeigniter frame work.
1) Installation or Setup:
You can download datatables file from here: https://datatables.net/ or you can use CDN file of Datatables.
Now, we are going to create Codeigniter file.
application/controller/task.php
application/model/task_model.php
application/view/task/index.php
2) Setting up Datatables in View:
Creating New file index.php in application/view/task
In the above code, we have loaded the CDN of Jquery and datatables.
This is the simple HTML format page now include the Table in the body tag.
Above we have created simple table with the heading name : Name, Date, Work, Partner, Director, Time, Task and Status.
Now the next step, is call the Datatables by jquery.
Note: You can call jquery anywhere in body tag, but my recommendation is please use it last before the </body> tag.
It's time to build Controller:
The above controller is used to call all syntax of data tables and pass it to View through the controller.
Then, Create a table in database.
Above we have created the task table with the following column name: User_name, date, t_name, partner, director, duration, status.
Once, we insert data into database then create task_model.php in model.
get("task") is used to get all record from database and return to the controller.
Here is the complete code of application/view/task/index.php
That's it from my side..
If you have any questions, then write in the comments down below OR send me your questions and suggestions to my Email id: aziz.10786@gmail.com.
Thank you!!
In this tutorial, I am going to show you how to integrate datatables in codeigniter frame work.
1) Installation or Setup:
You can download datatables file from here: https://datatables.net/ or you can use CDN file of Datatables.
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.css"/> <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js"></script>
Now, we are going to create Codeigniter file.
application/controller/task.php
application/model/task_model.php
application/view/task/index.php
2) Setting up Datatables in View:
Creating New file index.php in application/view/task
<!DOCTYPE html> <html lang="en"> <head> <title>Book Display</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.css"/> <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js"></script> </head> <body> <h1>Task List</h1> </body> </html>
In the above code, we have loaded the CDN of Jquery and datatables.
This is the simple HTML format page now include the Table in the body tag.
<table id="task-table"> <thead> <tr><td>Name</td><td>Date</td><td>Work</td><td>Partner</td><td>Director</td><td>Time</td><td>Task</td><td>Status</td></tr> </thead> <tbody> </tbody> </table>
Above we have created simple table with the heading name : Name, Date, Work, Partner, Director, Time, Task and Status.
Now the next step, is call the Datatables by jquery.
<script type="text/javascript">
$(document).ready(function() {
$('#task-table').DataTable();
});
</script>
Note: You can call jquery anywhere in body tag, but my recommendation is please use it last before the </body> tag.
It's time to build Controller:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
function __construct()
{
parent::__construct();
//Loading the model
$this->load->model('task_model');
}
class task extends CI_Controller
{
public function index(){
$this->load->view("task/index.php", array());
}
public function task_page()
{
// Datatables Variables
$draw = intval($this->input->get("draw"));
$start = intval($this->input->get("start"));
$length = intval($this->input->get("length"));
$books = $this->task_model->get_task();
$data = array();
foreach($books->result() as $r) {
$data[] = array(
'<a href="edit_hodm/'.$r->id.'" >'. $r->user_name .'</a>',
$r->date,
$r->t_name,
$r->partner,
$r->director,
$r->duration,
$r->task,
$r->status
);
}
$output = array(
"draw" => $draw,
"recordsTotal" => $books->num_rows(),
"recordsFiltered" => $books->num_rows(),
"data" => $data
);
echo json_encode($output);
exit();
}} ?>
The above controller is used to call all syntax of data tables and pass it to View through the controller.
Then, Create a table in database.
CREATE TABLE `task` ( `ID` int(11) NOT NULL, `user_name` varchar(25) NOT NULL, `date` date NOT NULL, `t_name` varchar(25) NOT NULL, `partner` varchar(11) NOT NULL, `director` varchar(25) NOT NULL, `duration` float NOT NULL,`task` varchar(255) NOT NULL,`status` varchar(25) NOT NULL, ) ENGINE=InnoDB DEFAULT CHARSET=latin1; ALTER TABLE `task` ADD PRIMARY KEY (`ID`); ALTER TABLE `task` MODIFY `ID` int(11) NOT NULL AUTO_INCREMENT;
Above we have created the task table with the following column name: User_name, date, t_name, partner, director, duration, status.
Once, we insert data into database then create task_model.php in model.
<?php
class task_model extends CI_Model
{
public function get_task()
{
return $this->db->get("task");
}
}
?>
get("task") is used to get all record from database and return to the controller.
Here is the complete code of application/view/task/index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Book Display</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Task List</h1>
<table id="task-table" class="table table-bordered table-striped table-hover">
<thead>
<tr class="">
<th>Name</th>
<th>Date</th>
<th>Work</th>
<th>Partner</th>
<th>Director</th>
<th>Time</th>
<th>Task</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#task-table').DataTable({
"ajax": {
url : "<?php echo site_url("task/task_page") ?>",
type : 'GET'
},
});
});
</script>
</body>
</html>
That's it from my side..
If you have any questions, then write in the comments down below OR send me your questions and suggestions to my Email id: aziz.10786@gmail.com.
Thank you!!
Great! Thanks a lot for posting this.
ReplyDeleteYour Most Welcome...
ReplyDeleteIf you have any query please mail at my personal gmail id which i mention above