Blog

Know Something new about Codeigniter.

HOW TO IMPLEMENT DATA TABLES IN CODEIGNITER

Created by Bhagyashri Vibhandik on Date: 25/06/2018

STEPS TO IMPLEMENT DATA TABLES IN CODEIGNITER

  1. Add styling for bootstrap and datatables to our head.php
  2. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.css"/>
    <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"/>

  3. Add Datatables script and datatables bootstrap script
  4. <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>

  5. Create Database with category_master table for our example and add some data into it
  6. e.g.CREATE TABLE `category_master` (
    `ID` int(11) NOT NULL,
    `title` varchar(255) NOT NULL,
    `status` text NOT NULL,
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
    ALTER TABLE `category_master` ADD PRIMARY KEY (`ID`);
    ALTER TABLE `category_master` MODIFY `ID` int(11) NOT NULL AUTO_INCREMENT;

  7. create category_m model in application/model with following function
  8. public function getCategory ( ) {
    $Q=$this->db->GET('category_master');
    return $Q;
    }

  9. now in view page manage_category create table with some id and table must contain <thead> and <tbody> for datatables.
  10. e.g.<table class="table table-striped table-bordered table-hover" id="category-table">
    <thead>
    <tr>
    <th><center>No.</center></th>
    <th><center>Category Name</center></th>
    <th><center>Status</center></th>
    <th><center>Action</center></th>
    </tr>
    </thead>
    <tbody>
    </tbody>
    </table>

  11. Add follwing script for datatables
  12. <script type="text/javascript">
    var dataTable = $('#category-table').DataTable ({
    "pageLength" : 10,
    "responsive" : true,
    "ajax": {
    url : "<?php echo base_url('Category/getData')?>",
    type : 'GET',
    },
    aoColumns: [
    { "bSortable": true },
    { "bSortable": true },
    { "bSortable": true },
    /* Action */
    { "bSortable": false,mRender: function (data, type, row) {
    return '<a href="<?= base_url() ?>Category/edit/'+row[3]+'" title="Edit"><i class="fa fa-edit fa-fw"></i></a>
    <a href="#" title="delete" onclick="confirm_delete('+row[3]+')"><i class="fa fa-trash-o fa-fw"></i></a>
    <a href="<?= base_url( )?>Category/details/' + row[3] + '"title="View"><i class="fa fa-eye"></i></i></a>'
    }
    },
    ],
    "stripeClasses" : ['', '']
    });
    </script>
    Note:: bSortable is used for custome setting for which column we want to sortable or which one is not.

  13. Create a controller name Category with following methods
  14. class Category extends CI_Controller {
    public function __construct ( ) {
    parent::__construct ( );
    $this->load->model('Category_m');
    }
    public function index ( ) {
    $this->load->view('manage_category');
    }
    public function getData () {
    // Datatables Variables
    $draw = intval($this->input->get("draw"));
    $start = intval($this->input->get("start"));
    $length = intval($this->input->get("length"));
    $categories = $this->Category_m->getCategory();
    $data = array();
    $no = 0;
    foreach($categories->result() as $category) {
    $no++;
    $sub_array = array();
    $sub_array[] =$no;
    $sub_array[] =$category->title;
    $sub_array[] =$category->status ? 'Active' : 'Inactive';
    $sub_array[] =$category->id;
    $data[] = $sub_array;
    }
    $output = array(
    "draw" => $draw,
    "recordsTotal" => $categories->num_rows(),
    "recordsFiltered" => $categories->num_rows(),
    "data" => $data
    );
    echo json_encode($output);
    }