AJAX无刷新分页数据表格时input_date读取null错误排查

一、修复JS遍历数据的错误 #

Laravel的paginate()方法返回的分页实例转JSON后，项目数据会被包裹在data属性中，而非直接返回数组。你的JS代码直接遍历整个响应对象，导致拿到分页元数据（如current_page）而非实际项目数据，从而触发Cannot read properties of null (reading 'input_date')错误。

修改JS的success回调部分：

success: function (response) {
    var tbody = $('.table-responsive-data2 tbody');
    tbody.empty();

    // 遍历response.data而非response本身
    $.each(response.data, function (index, project) {
        var rowHtml = `
            <tr class="tr">
                <td >${project.input_date || ''}</td>
                <td >${project.nama_project}</td>
                <td class="desc">${project.requestor}</td>
                <td >${project.category_project}</td>
                <td >
                <span>${project.description_project}</span>
                </td>
                <td >${project.status}</td>
                <td ><span class="status--process">${project.pic_project}</span></td>
                <td >${project.eta_project || ''}</td>
                <td>
                    <div class="table-data-feature">                                
                        <button type="button" class="item" data-toggle="modal" data-target="#editModal${project.id}" data-placement="top" title="Edit">
                            <i class="zmdi zmdi-edit"></i>
                        </button>
                        <button class="item" data-toggle="tooltip" data-placement="top" title="Delete">
                            <i class="zmdi zmdi-delete"></i>
                        </button>                                
                    </div>
                </td>
            </tr>
        `;

        tbody.append(rowHtml);
    });
},

二、解决input_date返回null的问题 #

1. 检查模型的可填充字段 #

确保Project模型中input_date被加入$fillable数组，否则Eloquent不会返回该字段：

// app/Models/Project.php
class Project extends Model
{
    protected $fillable = [
        'input_date',
        'nama_project',
        'requestor',
        'category_project',
        'description_project',
        'status',
        'pic_project',
        'eta_project'
    ];
}

2. 处理日期字段序列化 #

如果input_date是日期类型，可在模型中添加类型转换，确保返回格式化后的字符串：

// app/Models/Project.php
use Carbon\Carbon;

class Project extends Model
{
    protected $fillable = [
        // 其他字段...
        'input_date'
    ];

    protected $casts = [
        'input_date' => 'datetime',
        'eta_project' => 'datetime'
    ];

    // 自定义日期格式（可选）
    public function getInputDateAttribute($value)
    {
        return Carbon::parse($value)->format('Y-m-d');
    }
}

三、优化控制器代码 #

控制器中orderBy('id', 'desc')和latest()重复，latest()默认按created_at降序，根据需求保留其一即可：

public function getLatestProjects()
{
    $projects = Project::latest()->paginate(5); 
    // 或 $projects = Project::orderBy('id', 'desc')->paginate(5);
    return response()->json($projects);
}

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