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 https://stackoverflow.com/questions/47885399/datatable-with-ajax-is-not-working-well-after-use-serverside-true/47885949#47885949 — Atural, Jun 26 '18 at 08:43
@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, Jun 26 '18 at 08:55

Pradeep · Accepted Answer · 2018-06-26T09:36:54.937

1

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

edited Jun 26 '18 at 09:36

answered Jun 26 '18 at 09:00

Pradeep

9,667
13
27
34

I think, there might be some issue with my ajax. It's not calling the controller, I checked in network tab – user9437856 Jun 26 '18 at 09:04
you just forget to echo your base_url in ajax url see my updated answer – Pradeep Jun 26 '18 at 09:08
yes, that's correct I forget to add the echo, Now I am getting the ajax function name in the network but it's showing 404. might be file name issue – user9437856 Jun 26 '18 at 09:10
Yes, I added index.php/Clinic_control/list_data_ajax. now it's working – user9437856 Jun 26 '18 at 09:17
But why index.php before? any help in this? – user9437856 Jun 26 '18 at 09:17
user `site_url` instead of `base_url` if you not removed the `index.php` in your config.php – Pradeep Jun 26 '18 at 09:18
ok try by removing `"serverSide": true,` in your datatable settings – Pradeep Jun 26 '18 at 09:34
see my updated answer for searching and pagination in datatable initialisation – Pradeep Jun 26 '18 at 09:37
Yes, if I remove the "serverSide": true, then it's working. just for understand, why we are removing this? Is it for the server side to display the record fast in the data table.right? – user9437856 Jun 26 '18 at 09:51
When making a request to the server using server-side processing, DataTables will send the few item with its own may be here it is not setting, for more : https://datatables.net/manual/server-side – Pradeep Jun 26 '18 at 09:55
If my answer helps you pls don't hesitate to upvote and check it as green – Pradeep Jun 26 '18 at 09:56
@praddep, Yes, It's helped me a lot. Sure I will accept this answer and upvote now. – user9437856 Jun 26 '18 at 09:59
Hi @Pradeep, Hope doing well, Can you help me in this datatable query? https://stackoverflow.com/questions/62708059/datatables-server-side-processing-not-displaying-the-output-on-page-and-where-co – user9437856 Jul 03 '20 at 12:47

score 0 · Answer 2 · answered Jun 26 '18 at 08:48

Rewrite your 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();

    $arr_result = array();
    $arr_result['draw'] = 1;
    $arr_result['recordsTotal'] = count($books);
    $arr_result['recordsFiltered'] = count($books);
    foreach ($books as $key => $row) {
        $arr_result['data'][] = 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);
}

I just copy and paste your code in my controller. but nothing is happing.. 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 datatable with server-side and ajax can display the fast records — user9437856, Jun 26 '18 at 08:54

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

2 Answers2