使用 serverSide 后，带有 Ajax 的 DataTable 无法正常工作：true

Posted 2023-05-07

【中文标题】使用 serverSide 后，带有 Ajax 的 DataTable 无法正常工作：true

【英文标题】：DataTable with Ajax is not working well after use serverSide: true

【发布时间】：2018-06-01 19:05:43

【问题描述】：

我有一个使用 DataTables 的用户表，它将包含 200 多行。当我使用 DataTables 作为默认 "pageLength": 10 时，它看起来很好，这是表格示例。

  Username     |   Type    |    Request   |
user01               1         request01
user02               1         request02
user03               2         request03
user04               1         request04
user05               1         request05
user06               1         request06
user07               1         request07
user08               1         request08
user09               1         request09
user10               1         request10

Showing 1 to 10 of 200 entries 第一个上一个123。 ..20下一个上一个

所以，为了减少加载时间，我决定使用"processing": true 和"serverSide": true。然后我遇到了这个"serverSide" : true 的问题，它在表格中打印了 200 行数据。

Showing 0 to 0 of 0 entries (filtered from NaN total entries)。然后分页仍然打印，在我单击页面 2 后，它什么也没做。

我不希望DataTables首先获取10个数据，点击分页2后，它会再获取10个，依此类推。

我正在使用 CodeIgniter，这是我的代码：

在我的Views + Js上：

<select name="task" id="task">
   <option value="1">Task 1</option>
   <option value="2">Task 2</option>
</select>
<table id="user-request" class="table">
<thead>
   <tr>
      <th>Username</th>
      <th>Type</th>
      <th>Request</th>
   </tr>
</thead>
</table>
<script>
... on task change ...
... var task = $("#task").val(); ...
   $('#user-request').DataTable(
        'processing': true,
        'serverSide': true,
        'ajax': 
            'type': 'POST',
            'url': base_url+'user/get_user_request',
            'data': "task":task,"csrf_token":$("input[name=csrf_token]").val()
        
    )
</script>

注意：任务是不同的组，例如 Class 1 或 Class 2，Orchard University 或Harvard University

在我的控制器上：

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

    $arr = array();
    $arr[] = $ur->username;
    $arr[] = $ur->type;
    $arr[] = $ur->request;
    $data[] = $arr;

$output = array(
    "data" => $data
);
if (COUNT($output) > 0)

    echo json_encode($output);

在我的模型上：

public function all_user_request($task_id) 
   $query = "SELECT * FROM user_request WHERE task_id = ?";
   return $this->db->query($query, $task_id)->result();

注意：在模型中实际上是使用 2 INNER JOIN，我只是简化了选择，仅用于此处询问。 （仅在此处转化为非规范化表）。

我试图在我的控制器中仅使用数字数据将draw、recordsTotal、recordsFiltered 添加到$output。示例

$output = array(
    "draw" => 5,
    "recordsTotal" => 5,
    "recordsFiltered" => 5,
    "data" => $data
);
if (COUNT($output) > 0)

    echo json_encode($output);

我一直在寻找答案，但我认为问题就在这里，但我仍然不知道我必须从哪里获得 draw - recordsTotal - recordsFiltered 数据。我看到其他人的另一个答案，他们使用"draw" => $_POST['draw']，然后我尝试了它，它什么也没做。

所以我尝试使用数字数据，但结果仍然相同。我需要一些帮助。它仍然在 table 中打印 200 行数据。

Showing 0 to 0 of 0 entries (filtered from NaN total entries)。然后分页仍然打印，在我单击页面 2 后，它什么也没做。

【问题讨论】：

具体来说，这里抛出了什么错误？请将其添加到您的问题中

嗨@Akintunde，我在顶部添加了错误，但我编辑了我的问题并在底部再次添加。

【参考方案1】：

数据表发送您需要的所有内容 - 如果您查看网络下的控制台，您会看到，它们使用 ajax-get 方法将这些请求发送到服务器

GET参数如下

draw
columns
start
length
search

你可以找到整个列表here

这意味着 - 你必须适当地调整你的模型......

类似的东西应该可以工作

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);
    

和你的控制器

//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));

请记住，我只是把它写下来了——也许有一些错别字，但你应该能够理解数据表请求的服务器端处理应该如何工作。

【讨论】：

谢谢您sintakonte，请给我时间检查您的代码。

嗨@sintakonte，我试图使用你的代码。记录的结果现在已经是，在分页更改后，行条目正在更改。但我仍然有一些问题，它仍然在表格上打印 200 行数据。我正在尝试在查询中添加->limit(10)，它只打印 10 并且不再打印数据。

检查变量recordsTotal的值-就像我说的，研究这段代码你应该能理解它

我正在尝试，draw：null，recordsFiltered: 200 和 recordsTotal: 200

请展示您的 js 方面 - 您如何调用 dataTable 函数，尤其是 ajax 部分...

【参考方案2】：

只要你选择了服务器模式，你就必须通过请求来管理一切。 因此，您必须动态创建输出数组的值：

$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)
);

和模型功能

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

【讨论】：

谢谢 Arthur Lekane，请给我时间检查您的代码

你能给我一个get_total_filtered和get_total_records()@ArthurLekane的例子

【参考方案3】：

如果您使用serverSide = true，您应该提供自己的过滤器计数和总计数。也提供你自己的搜索功能，订购等。使用下面的控制器和型号供你参考。

控制器

$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);

型号

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;