Ignited Datatables - display the records on the table

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; ?>