Ignited Datatables - display the records on the table

Hi I'd like some help please.

I'm using Ignited Datatables to display posts in tabular way in my view. I've been struggling hole weekend in order to do this working correct, but I can't understand what or if I'm doing something wrong.

This is the function that fetches the tabular data in my Post model

PHP Code:

/**
    * Get page data on datatables
    */
    public function get_datatable() {
        
        $this->load->library('datatables');

        $this->datatables->select('id, title, slug, date_published, status');
        $this->datatables->from('posts');
        return $this->datatables->generate();
    } 


Then in my posts controller I call the get_datatable()

PHP Code:

/**
    * List all posts
    */
    public function index() {

        $this->data['datatables'] = true;
        $this->data['data_url'] = 'admin/posts/index';
        $this->data['posts'] = $this->post_model->get_datatable();
        
        // load view
        $this->load->view('admin/posts/index', $this->data);
    } 


And this is my view

Code:

<table class="table dataTable table-bordered" cellspacing="0" width="100%">
   <thead> <!-- TODO - Display the headings: Title, Date Published, Url Slug -->
      <tr>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Age</th>
         <th>Start date</th>
         <th>Salary</th>
      </tr>
   </thead>

   <tfoot>
      <tr>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Age</th>
         <th>Start date</th>
         <th>Salary</th>
      </tr>
   </tfoot>

   <tbody></tbody> <!-- TODO - Display the posts -->
</table>

And this is my script

PHP Code:

<?php if(isset($datatables)): ?>
        <script  type="text/javascript" src="<?php echo base_url('js/dataTables/jquery.dataTables.min.js'); ?>">
        <script  type="text/javascript" src="<?php echo base_url('js/dataTables/dataTables.bootstrap.min.js'); ?>">
        
        <script type="text/javascript">
            $(document).ready(function() {
                $('.dataTable').DataTable({
                    'bProcessing' : true,
                    'bServerSide' : true,
                    'sAjaxSource' : '<?php echo base_url($data_url); ?>',
                    'sServerMethod' : 'POST',
                    'fnServerData' : function (sSource, aoData, fnCallback) {
                        $.ajax({
                            dataType : 'json',
                            type : 'post', 
                            url : sSource,
                            data : aoData,
                            success : fnCallback,
                        });
                    }
                });
            });
        </script>
    <?php endif; ?>

Any help would be appreciated.

Hi,

You need to change your controller to this to work:

PHP Code:

public function index() {

       $this->data['datatables'] = true;
       $this->data['data_url'] = 'admin/get_post_datatables';
       
       
       // load view
       $this->load->view('admin/posts/index', $this->data);
   }
Public function get_post_datatables(){
  echo $this->post_model->get_datatable();
} 


Hi,

You need to change your controller to this to work:

PHP Code:

public function index() {

       $this->data['datatables'] = true;
       $this->data['data_url'] = 'admin/get_post_datatables';
       
       
       // load view
       $this->load->view('admin/posts/index', $this->data);
   }
Public function get_post_datatables(){
  echo $this->post_model->get_datatable();
} 


Thank you for your reply. I 've done some changes on my code so you can review it

PHP Code:

**
    * List all posts
    */
    public function index() {

        $this->data['datatables'] = true;

        $this->data['data_url'] = 'admin/posts/datatables_ajax';
        // $this->data['posts'] = $this->post_model->get_datatable();
        // dump($this->data['pages']);

        // load view
        $this->load->view('admin/pages/index', $this->data);
    }

    public function datatables_ajax() {
        $this->output->enable_profiler(false);
        $this->data['posts'] = $this->post_model->get_datatable();
        // echo $this->data['posts'];
    } 


I've put it on a separate function, as you said before but still same thing

Ok I have managed to display records on the screen but the rest functionality of the datatables doesn't seem to work. I can get all records and not the first 10 by default, the pagination, the Search and the sorting (asc or desc) of each col is not working, and also showing more than 10 records.

This is my code updated

PHP Code:

// model
/**
    * Get page data on datatables
    */
    public function get_datatable() {
        
        $this->load->library('datatables');

        $this->datatables->select('id, title, slug, sort_description, status')
        ->from('posts');
        return $this->datatables->generate();
    }


// controller 
/**
    * List all cms-pages
    */
    public function index() {

        $this->data['datatables'] = true;

        $this->data['data_url'] = 'admin/posts/data_ajax';
        
        // load view
        $this->load->view('admin/posts/index', $this->data);
    }

    public function data_ajax() {
        $this->output->enable_profiler(false);
        echo $this->post_model->get_datatable();
        // echo json_encode($this->post_model->get_datatable());
        exit();
    }

// view
<table class="table dataTable table-bordered" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th>ID</th>
         <th>Title</th>
         <th>Url Slug</th>
         <th>Sort Description</th>
         <th>Status</th>
      </tr>
   </thead>

   <tfoot>
      <tr>
         <th>ID</th>
         <th>Title</th>
         <th>Url Slug</th>
         <th>Sort Description</th>
         <th>Status</th>
      </tr>
   </tfoot>

   <!-- <tbody>
      <tr>
         <td colspan="5" class="dataTables_empty"></td>
      </tr>
   </tbody> -->
</table>

<?php if(isset($datatables)): ?>
        <?php echo js_tag('js/dataTables/jquery.dataTables.min.js'); ?>
        <?php echo js_tag('js/dataTables/dataTables.bootstrap.min.js'); ?>
        
        <script type="text/javascript">
            $(document).ready(function() {
                $('.dataTable').DataTable({
                    'serverSide': true,
                    'bProcessing' : true,
                    'bServerSide' : true,
                    'ordering': true,
                    'paging': true,
                    'searching': true,
                    'sAjaxSource' : '<?php echo base_url($data_url); ?>',
                    'sServerMethod' : 'POST',
                    
                    'columns': [
                       { 'data': 'id' },
                       { 'data': 'title' },
                       { 'data': 'slug' },
                       { 'data': 'sort_description' },
                       { 'data': 'status' }
                    ],
                    'fnServerData' : function (sSource, aoData, fnCallback) {
                        $.ajax({
                            dataType : 'json',
                            type : 'post', 
                            url : sSource,
                            data : aoData,
                            success : fnCallback,
                        });
                    }
                });
            });
        </script>
    <?php endif; ?>