DataTable with Ajax is not working well after use serverSide: true

Question

I have an user table using DataTables, that will contain more than 200 rows. It\'s look so fine when I\'m using DataTables for default the \"pageLength\": 10, a

Answer 1

As long as you chose the server mode, you have to manage everything via the requests. So, you have to dynamically create the values of the output array :

$output = array(
    "draw" => $_POST['draw'],
    "recordsTotal" => $this->my_model->get_total_records(),
    "recordsFiltered" => $this->my_model->get_total_filtered(),
    "data" => $this->my_model->all_user_request($id)
);

and the model functions

public function all_user_request($task_id) {
    $query = "SELECT * FROM user_request WHERE task_id = ?"; // add limit $_POST['length'], $_POST['start'] to your request

    return $this->db->query($query, $task_id)->result();
}

Answer 2

If you're using serverSide = true, you should provide your own filter count and total count. Also provide your own search function, ordering and etc. Use controller & model below for your reference.

Controller

$task = $this->input->post('task', TRUE);
$user_request = $this->model->all_user_request($task);

$output = array(
     'draw' => $this->input->post('draw', TRUE),
     'recordsTotal' => $user_request['recordsTotal'],
     'recordsFiltered => $user_request['recordsFiltered'],
     'data'           => empty($user_request['data'])? array() : $user_request['data']
);

echo json_encode($output);

Model

public function all_user_request($task_id) {

   $params = $this->input->post(null, TRUE);

   $search_fields = array('username','type','request'); //change this into your table fields

   $data = array();
   $this->db->start_cache();
   $this->db->select("username, type, request");
   $this->db->from("user_request");
   $this->db->where("task_id", $task_id);

    if(!empty($params['search']['value'])){
        $str = $params['search']['value'];
        $this->db->group_start();
        foreach($search_fields as $row){
            $this->db->or_like($row, $str, 'BOTH');
        }
        $this->db->group_end();
    }

   $data['recordsTotal'] = $this->db->count_all_results();

   $this->db->stop_cache();
   $this->db->limit($params['length'], $params['start']);
   $data['recordsFiltered'] = $this->db->count_all_results();
   $query = $this->db->get();
   $this->db->flush_cache();
    foreach($query->result_array() as $row){
        $data['data'][] = array_values($row);
    }
   return $data;
}

Answer 3

Datatables send everything you need - if you take a look in your console under network you'll see, that they use the ajax-get method to send those requests to the server

The GET Parameter are as follows

draw
columns
start
length
search

You can find the entire list here

which means - you've to adapt your model properly...

something like that should work

public function all_user_request($task_id) 
{
    $intStart = intval($this->input->get("start"));
    $intLength = intval($this->input->get("length"));
    $strSearch = (strlen($this->input->get("search")["value"]) >= 2) ?   $this->input->get("search",true)["value"]    :   false;
    $order = $this->input->get("order",true);


    $this->setQuery($task_id,$strSearch);

    $query = $this->db->get();
    $this->recordsTotal = $query->num_rows();

    $this->setQuery($task_id, $strSearch);

    if ($intStart >= 0 && $intLength > 0)
    {
        $this->db->limit($intLength,$intStart);
    }

    $strOrderField = 'username';
    $strDirection = "ASC";
    if (is_array($order))
    {
        switch($order[0]['column'])
        {
            case 1:
                $strOrderField = 'type';
                break;
            case 2:
                $strOrderField = 'request';
                break;

        }
        if (!empty($order[0]['dir']))    $strDirection = $order[0]['dir'];
    }
    $this->db->order_by($strOrderField,$strDirection);


    $query = $this->db->get();

    $arrData = $query->result();

    return $arrData;

}

public function getRecordsTotal()
{
    return $this->recordsTotal;
}

private function setQuery($task_id, $strSearch="")
{
    $this->db
        ->select('*')
        ->from('user_request')
        ->where('task_id', $task_id);

    if (!empty($strSearch))
    {
        $this->db->like('task_id', $strSearch);
    }

}

and your controller

//controller
$task = $this->input->post('task', TRUE);
$user_request = $this->model->all_user_request($task);

$data = [];
foreach ($user_request as $ur)
{
    $data[] = [
        $ur->username,
        $ur->type,
        $ur->request
    ];
}

$arrCompiledData = [
    'data' => $data,
    'draw' => $this->input->get('draw'),
    'recordsTotal' => $this->model->getRecordsTotal(),
    'recordsFiltered' => $this->model->getRecordsTotal(),
];

$this->output
    ->set_content_type('application/json')
    ->set_output(json_encode($arrCompiledData));

Please keep in mind i just wrote this down - maybe there are some typos, but you should be able to understand how the serverside processing of a datatables request should work.