jQuery+Perl实现Datatable服务端处理时数据无法加载求助

核心问题分析 #

Datatable开启serverSide: true时，对后端返回的JSON格式有严格规范要求，你的Perl脚本返回的{"748847":"Jane Deo"}完全不符合该规范；同时脚本存在数据获取逻辑错误，仅能返回最后一条数据库记录，这两个问题共同导致页面一直处于Processing状态。

修复步骤 #

1. 修正Perl脚本的数据获取与JSON格式 #

修改后的脚本会正确收集所有数据，并生成Datatable服务端模式要求的标准JSON结构：

#!/usr/bin/perl -wT

use strict;
use warnings;
use DBI;
use JSON;
use CGI qw/:standard/;

my $Cgi = CGI->new();

# 获取Datatable请求携带的draw参数，必须原样返回用于请求校验
my $draw = $Cgi->param('draw') || 1;

my $host =   "host";
my $usr =    "user";
my $pwd =    "pwd";
my $dbname = "datname";

my $dbh = DBI->connect("DBI:mysql:$dbname:$host", $usr, $pwd, {
                                  RaiseError => 1,
                                  }) or die $DBI::errstr;

# 查询总记录数，用于填充recordsTotal和recordsFiltered字段
my $count_stmt = $dbh->prepare("SELECT COUNT(*) FROM dbuser");
$count_stmt->execute();
my ($total_records) = $count_stmt->fetchrow_array();

# 查询目标数据
my $Test = $dbh->prepare("SELECT idnum, fname FROM dbuser");
$Test->execute();

my @data;
# 循环获取所有行数据，每行以数组形式存入@data
while (my ($idnum, $fname) = $Test->fetchrow_array()) {
    push @data, [$idnum, $fname];
}

# 构造Datatable要求的标准JSON结构
my $json_data = {
    draw => $draw,
    recordsTotal => $total_records,
    recordsFiltered => $total_records, # 无过滤逻辑时与总记录数一致
    data => \@data
};

my $json = encode_json($json_data);
print $Cgi->header( -type => 'application/json' ), $json;

# 关闭数据库连接
$dbh->disconnect();

改动说明：

• 新增draw参数处理：Datatable每次请求会发送该参数，后端必须原样返回，用于请求合法性校验。
• 新增总记录数查询：填充recordsTotal和recordsFiltered字段，Datatable依赖这些信息展示分页和数据总数。
• 修正数据收集逻辑：用while循环替代原foreach，确保获取所有数据库记录，每行数据以数组形式存储，对应表格列顺序。
• 生成标准JSON结构：包含Datatable服务端模式必需的四个核心字段。

2. 优化前端HTML代码 #

移除tbody中的空行（服务端模式下Datatable会自动渲染数据），并明确列数据映射关系：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-3.3.1/dt-1.10.18/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/jq-3.3.1/dt-1.10.18/datatables.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script>
        jQuery(function($){
            $("#table_id").DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "file.pl",
                "columns": [
                    { "data": 0 }, // 对应后端data数组中每个子数组的第0位（ID）
                    { "data": 1 }  // 对应后端data数组中每个子数组的第1位（NAME）
                ]
            });
        });
</script>
</head>

<body>
    <h1>sample dataTable</h1>
    <table id="table_id" class="table table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>NAME</th>
            </tr>
        </thead>
        <tbody>
            <!-- 空行已移除，由Datatable自动填充数据 -->
        </tbody>
    </table>
</body>
</html>

改动说明：

• 移除tbody空行：避免干扰Datatable的自动渲染逻辑。
• 新增columns配置：明确指定每列对应后端返回的data数组中的索引，提升兼容性和代码可读性。

验证方法 #

1. 直接访问file.pl，确认返回的JSON格式类似如下：

{"draw":1,"recordsTotal":1,"recordsFiltered":1,"data":[["748847","Jane Deo"]]}

2. 打开浏览器开发者工具（F12），查看Network标签下的AJAX请求，确认返回状态为200，且JSON格式符合上述标准。

内容的提问来源于stack exchange，提问作者tom lee