How to display the records from the datatable in the view page using AJAX?

Question

I am using CodeIgniter and displaying data using AJAX in the table using jquery datatable.

https://datatables.net/examples/data_sources/server_side.html

What I am doing is, After login

/*This is the small code after getting the right result */

if ($result) {
    $this->load->view('list_details');
} else {
    $this->session->set_flashdata('invalid_password', 'Invalid Username And Password');
    $this->load->view('login');
}

Now in the list details page, I am displaying the total number of the record using AJAX in datatable .

list_detials (view)

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/jquery.dataTables.min.css">
</head>
<body>
<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Sr.no</th>
            <th>First name</th>
            <th>middlename</th>
            <th>Last name</th>
            <th>Disease </th>
            <th>Thermal</th>
            <th>Last fallowup</th>
            <th>Progress </th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<script type="text/javascript" src="<?php echo base_url()?>assets/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url()?>assets/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="<?php echo base_url()?>assets/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="<?php echo base_url()?>assets/js/additional-methods.min.js"></script>
<script type="text/javascript" src="<?php echo base_url()?>assets/js/validation.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('#example').DataTable( {
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "<?php base_url('Clinic_control/list_data_ajax')?>",
                "type": "POST"
            },
            "columns": [
                { "data": "id" },
                { "data": "firstname" },
                { "data": "middlename" },
                { "data": "lastname" },
                { "data": "disease" },
                { "data": "thermal" },
                { "data": "last_fallowup" },
                { "data": "progress" }
            ]
        });
    });
</script>
</body>
</html>

Controller for AJAX

function list_data_ajax() {
    $draw = intval($this->input->get("draw"));
        $start = intval($this->input->get("start"));
        $length = intval($this->input->get("length"));
        $books =$this->Clinic_model->get_list();

        $data['draw'] = 1;
        $data['recordsTotal'] = count($books);
        $data['recordsFiltered'] = count($books);
        foreach ($books as $key => $row) {
            $arr_result[] = array(
                "id" =>$row->id,
                "firstname" => $row->firstname,
                "middlename" => $row->middlename,
                "lastname" => $row->lastname,
                "disease" => $row->disease,
                "thermal" => $row->thermal,
                "last_fallowup" => $row->last_fallowup,
                "progress" => $row->progress
            );
        }
    echo json_encode($arr_result);
}

Model

public function get_list(){
    $query=$this->db->get('test_record');
    $result=$query->result();
    if ($result) {
        return $result;
    } else {
        return 0;
    }
}

this wont work that way - you need to setup a pagination, and your arr_result array should get merged with data array... you may take a closer look here stackoverflow.com/questions/47885399/… — sintakonte
@sintakonte, Let me tell you the story... I have a login page and list page. After login page will redirect on the list page. In the list page, I have to display the all the records from the database. I have more than 1 lack data. so I thought using data table with server-side and ajax can display the fast records. — user9437856

Pradeep Pradeep · Accepted Answer · 2018-06-26T09:00:18

Hope this will help you:

function list_data_ajax()
{

    $draw = intval($this->input->get("draw"));
    $start = intval($this->input->get("start"));
    $length = intval($this->input->get("length"));
    $books =$this->Clinic_model->get_list();

    $data['draw'] = 1;
    $data['recordsTotal'] = count($books);
    $data['recordsFiltered'] = count($books);
    foreach ($books as $key => $row) 
    {
        $arr_result = array(
                    "id" =>$row->id,
                    "firstname" => $row->firstname,
                    "middlename" => $row->middlename,
                    "lastname" => $row->lastname,
                    "disease" => $row->disease,
                    "thermal" => $row->thermal,
                    "last_fallowup" => $row->last_fallowup,
                    "progress" => $row->progress
        );
        $data['data'][] = $arr_result;

      }
    echo json_encode($data);
    exit;
}

And your ajax should be like this :

You forget to echo the base_url in ajax url

Replace this

"url": "<?php base_url('Clinic_control/list_data_ajax')?>",

with

"url": "<?php echo  base_url('Clinic_control/list_data_ajax')?>",

Whole should be like this :

$(document).ready(function() {
            $('#example').DataTable( {
                "processing": true,
                "searching": true,
                "paging": true,
                "ajax": {
                    "url": "<?php echo  base_url('Clinic_control/list_data_ajax')?>",
                    "type": "POST"
                },
                "columns": [
                { "data": "id" },
                { "data": "firstname" },
                { "data": "middlename" },
                { "data": "lastname" },
                { "data": "disease" },
                { "data": "thermal" },
                { "data": "last_fallowup" },
                { "data": "progress" }
            ]

            } );
        } );

For more : https://datatables.net/examples/data_sources/server_side.html

How to display the records from the datatable in the view page using AJAX?

2 Answers