I want to use datatable to display my ajax result data!

knkramya

My view file:

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#getreport").click(function(){
     var fromdate = $('#date1').val();
     var todate = $('#date2').val();
     $("#header").css("visibility", "visible");
     // $("#bodycontent").empty();
     // $("#bodycontent").html('<div id="subcontent"></div>');
     data =
{
    "from"  : fromdate,
    "to" : todate
} 
    $.post('<?=site_url("Report/managecustomers_report"); ?>', data ,function (data) {
    $('#datatable').dataTable({
        // data : data,
        "ajax": {
            "url": "data.json" ,
            "data" : "data"
           
        }
    });
    });     
    });
});
</script>
 <div class="table-responsive">
    <table id="datatable" class="table allcp-form theme-warning fs13">
    <thead>
    <tr class="bg-light">
    <th class="">Image</th>
    <th class="">Customer Name</th>
    <th class="">Contact Person</th>
    <th class="">Mobile Number</th>
    <th class="">Phone</th>
    <th class="">Email</th>
    </tr>
    </thead>
   <!--  <tbody id="bodycontent">
    </tbody> -->
    </table>
    </div>

I am getting the response by debugging -

[{"id":"1","customername":"    customers","street1":"    street1","street2":"    street2","city":"    city","pincode":"123","companyname":"    company","tin":"123","cst":"123","ecc":"233","contactperson":"    contact","mobilenumber":"12345","phone":"123","fax":"123","website":"  dfgdh","email":"ada@rtd","picture":"Koala8.jpg","date":"2016-11-21"},{"id":"2","customername":"customer1","street1":"x","street2":"x","city":"x","pincode":"1","companyname":"x","tin":"1","cst":"1","ecc":"1","contactperson":"x","mobilenumber":"1","phone":"0","fax":"0","website":"","email":"hvjh@jhfgh","picture":"","date":"2016-11-22"},{"id":"3","customername":"customer2","street1":"x","street2":"x","city":"x","pincode":"1","companyname":"x","tin":"1","cst":"1","ecc":"1","contactperson":"x","mobilenumber":"0","phone":"0","fax":"0","website":"","email":"gfvhg@hvh","picture":"","date":"2016-11-23"},{"id":"4","customername":"sf","street1":"sdf","street2":"sd","city":"sdf","pincode":"324","companyname":"wr","tin":"242","cst":"124","ecc":"214","contactperson":"ewsd","mobilenumber":"214","phone":"214","fax":"0","website":"wqe","email":"sdf@dsgsg","picture":"","date":"2016-12-05"},{"id":"5","customername":"sdfsd","street1":"sdgs","street2":"dsg","city":"sdg","pincode":"0","companyname":"dsgds","tin":"325","cst":"235","ecc":"235","contactperson":"esdf","mobilenumber":"325","phone":"32523","fax":"0","website":"sedfs","email":"seg@ewtewt","picture":"","date":"2016-12-05"},{"id":"6","customername":"vchg","street1":"fdh","street2":"fdh","city":"dfh","pincode":"345","companyname":"sdg","tin":"24421","cst":"1241","ecc":"2353","contactperson":"646","mobilenumber":"657","phone":"757","fax":"0","website":"yuy","email":"uygu@yfy","picture":"","date":"2016-12-05"},{"id":"7","customername":"fhfgj","street1":"jvgj","street2":"jhgkj","city":"kjgkj","pincode":"547657","companyname":"85687","tin":"868","cst":"986","ecc":"9879","contactperson":"jgku","mobilenumber":"9879","phone":"9709","fax":"970","website":"ikhjyi","email":"cx@tgfy","picture":"","date":"2016-12-05"},{"id":"8","customername":"jgjk","street1":"gfh","street2":"ghfh","city":"hgf","pincode":"0","companyname":"6757","tin":"5765","cst":"57","ecc":"75","contactperson":"dg","mobilenumber":"675","phone":"0","fax":"0","website":"hfg@yfy","email":"hgfhg@jgjh","picture":"","date":"2016-12-05"},{"id":"9","customername":"aa","street1":"asf","street2":"sf","city":"hgj","pincode":"0","companyname":"5646","tin":"75","cst":"2423","ecc":"87578","contactperson":"ghfh","mobilenumber":"467","phone":"657","fax":"7657","website":"yfuy","email":"dgdfht@gtdyt","picture":"","date":"2016-12-05"},{"id":"10","customername":"hjvjh","street1":"JKB","street2":"JBHK","city":"JBK","pincode":"57","companyname":"876","tin":"8768","cst":"8768","ecc":"86","contactperson":"HGVJH","mobilenumber":"7868","phone":"0","fax":"0","website":"HGF","email":"GHFVH@TFGH","picture":"","date":"2016-12-05"}]

My controller :

public function managecustomers_report()
    {
    
     $query = $this->Reportmodel->customerreport_select($this->input->post('from'),$this->input->post('to'));

     $data = $query['records'];
      $this->output->set_content_type('application/json');
     $this->output->set_output(json_encode($data));
     return $data;
    }

allan

Use ajax.dataSrc set to be an empty string if you want DataTables to read from a plain array of data.

You also need to use columns.data to tell DataTables what data point to use for each column, since it can't know that you want "customername" to appear in display index 2.

The manual contains this information and more.

Allan

knkramya

ya thank you i will check into it. but can you check if i have properly attached the script files?

allan

Load jQuery first. DataTables is a plug-in for jQuery.

Allan

knkramya

yes i am loading it in the header file