I'm new to programming and I'm trying to implement datatables in CodeIgniter. I've tried this, but I cannot get the data to load in my table.

Controller Class(Contacts.php):

public function lists($type='')
    {
        $this->load->library('pagination');
        $main['page_title']=$this->config->item('site_name').' - Contacts';
        $main['records']=$this->contacts_model->get_records();

        $main['jsArray'] = array('public/assets/plugins/datatables/jquery.dataTables.min.js',
        'public/assets/plugins/datatables/dataTables.bootstrap.js',
        'public/assets/plugins/datatables/dataTables.buttons.min.js',
        ,'public/assets/js/jQuery.dtplugin.js',
        'public/assets/js/datatable.contacts.js');  
        $main['cssArray'] = array('public/assets/plugins/datatables/jquery.dataTables.min.css',
'public/assets/plugins/datatables/buttons.bootstrap.min.css'); 
        $main['page'] = 'crm/contacts/index';
        $this->load->view('crm/index',$main);
    }

    public function listsdt($type='1'){  
        if($type !='') { 
           $cond['contact_type'] =$type; 
       } 
       $this -> load -> library('Datatable', array('model' => 'contactsdatatable', 'rowIdCol' => 'c.id','conds'=>$cond,'order'=>'added_date desc'));
       $jsonArray = $this -> datatable -> datatableJson(array(  'added_date' => 'date'  ));
       $this -> output -> set_header("Pragma: no-cache");
       $this -> output -> set_header("Cache-Control: no-store, no-cache");
       $this -> output -> set_content_type('application/json') -> set_output(json_encode($jsonArray));
   }

Model classes:

Contactsdatatable.php:

<?php
    class Contactsdatatable extends CI_Model implements DatatableModel{
         function __construct()
         {
            parent::__construct(); 

         }
        public function appendToSelectStr() {
                return array( 'refid' => 'concat(c.refno, \'|\',c.id)', 
                    'fnid' => 'concat(c.firstname, \' \',c.lastname, \'|\',c.id)',  
                    'contact_name' => 'concat(c.firstname, \' \',c.lastname)',
                    'addedby' => 'concat_ws("",users.display_name,import_source)',
                    'agent_name'=>'cu.display_name',
                    'contact_source'=>'source.title',
                    'contact_type' => 'types.title' ,
                    'added_by' => 'users.display_name'
                );
        }
        public function appendToGroupBy() { 
            return "c.id";
        }
        public function fromTableStr() {
            return 'crm_contacts as c';
        }
        public function joinArray(){
                return array(  
                    'crm_clients_users as cu|left' => 'cu.id = c.agents_id',
                    'crm_contacts_details as detail|left' => 'detail.contacts_id = c.id and detail.contacttype = "personal"',
                    'crm_sources as source|left' => 'source.id = c.contact_source and source.language = "'.$this->session->userdata('client_language').'"',
                    'crm_contact_types as types|left' => 'types.id = c.contact_type and types.language = "'.$this->session->userdata('client_language').'"',
                    'crm_clients_users as users|left' => 'c.added_by = users.id and users.clients_id = "'.$this->session->userdata('clientsessid').'"'
                );
        } 
        public function whereClauseArray(){
                return array('c.delete_status'=>'N');
        }
   }
?>

Contacts_model.php:

function get_records(){
        $this->db->select("*");
        $this->db->from("crm_contacts as con");
        $this->db->where("con.status='Y'");
        $query = $this->db->get();
        return $query->result();
    }

View class:

<table id="datatable" class="table table-striped table-bordered dtcontacts">
</table>
...
var ajax_base_url = '<?php echo site_url('contacts/listsdt/'); ?>';

datatable.contacts.js:

$(function() { 
datatable_contacts();
$( '#fkeyword' ).on( 'keyup change', function () {
$('#datatable').DataTable()
.column().search(this.value, true)
.draw();
});   
    // for select box
$('.search-input-select').on( 'change', function () { searchcoloms($(this),$(this).val());});
});
function searchcoloms(obj,value){
    var i =obj.data('column');
    var v =value;
    var table =$('.dtcontacts').dataTable();
    table.api().columns(i).search(v).draw();
}
function datatable_contacts(){
    //wait till the page is fully loaded before loading table
    //dataTableSearch() is optional.  It is a jQuery plugin that looks for input fields in the thead to bind to the table searching
    var dataTableLists = $(".dtcontacts").dataTable({
        searching: true, paging: true, "lengthChange": false, "bInfo": true,
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets: [9,10]
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        order: [[7, 'desc' ]],  
        oLanguage: { sProcessing:false },
        lengthMenu: [[ 25, 50, 100], [25, 50,100]],/*"dom": '<"top"f>rt<"bottom"ilp>',*/
        pagingType: "full_numbers",
        processing: true,
        serverSide: true,
        bFilter:true,
        ajax: {
            "url": ajax_base_url,
            "type": "POST"
        },
        columns: [

            { data: "$.refid",
                    render: function ( data, type, row ) {var d = data.split("|");  
                     if ( type === 'display' ) { 
                       return  '<a class="text-info" href="'+site_url_view+d[1]+'">'+d[0]+'</a>' ;  
                    }
                    return data;
                }
            },
            {data: "$.fnid",
                    render: function ( data, type, row ) {var d = data.split("|");  
                     if ( type === 'display' ) { 
                       return  '<a class="text-info" href="'+site_url_view+d[1]+'">'+d[0]+'</a>' ;  
                    }
                    return data;
                } 
            },
            { data: "detail.mobile" , 
              render: function ( data, type, row ) {
                     if ( type === 'display' && data) { 
                       return  '<a class="text-info" href="tel:'+data+'">'+data+'</a>' ;  
                    }
                    return data;
                }},   
            { data: "detail.email", 
              render: function ( data, type, row ) {
                     if ( type === 'display'  && data) { 
                       return  '<a class="text-info" href="mailto:'+data+'">'+data+'</a>' ;  
                    }
                    return data;
                } },  
            { data: "$.contact_source" },
            { data: "$.contact_type" }, 
            { data: "$.agent_name", 
              render: function ( data, type, row ) {
                     if ( type === 'display') { 
                       return  '<span class="'+(data?'':'text-warning')+'">'+(data?data:'Unassigned')+'</span>' ;  
                    }
                    return data;
                }},  
            { data: "added_date" },  
            { data: "$.addedby" },  
            { data: "c.id", 
              render: function ( data, type, row ) {
                     if ( type === 'display' ) { 
                       return  '<a class="btn btn-info btn-xs" href="'+site_url_edit+data+'"><i class="fa fa-pencil"  title="edit"></i></a>' ;  
                    }
                    return data;
                }, className: "text-center"} ,
            { data: "c.id", 
          render: function ( data, type, row ) {
                 if ( type === 'display' ) { 
                   return  '<a class="btn btn-primary btn-trans btn-xs" href="'+site_url_view+data+'"><i class="fa fa-search"  title="view"></i></a>' ;  
                }
                return data;
            }, className: "text-center"}
        ]
    }).dataTableSearch(1);
}

Doing so I'm still unable to get my data to appear in the table