Unable to load datatable data inside my table

Unable to load datatable data inside my table

Jay_550Jay_550 Posts: 2Questions: 1Answers: 0
edited November 2021 in Free community support

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

Answers

  • colincolin Posts: 13,196Questions: 0Answers: 2,255

    What's the Ajax response coming back from the server? Are you seeing errors in the DataTable?

    Colin

  • Jay_550Jay_550 Posts: 2Questions: 1Answers: 0

    I'm not getting an AJAX response back. I should get listsdt/ in my network tab, but I dont get any AJAX response

  • kthorngrenkthorngren Posts: 14,508Questions: 25Answers: 3,445

    Looks like Datatables should be sending the Ajax request to contacts/listsdt/. Does this happen?

    but I dont get any AJAX response

    If you are seeing the request but not the response you will need to do some debugging of the server to find out why there is not a response.

    Kevin

Sign In or Register to comment.