Laravel中实现管理员切换学生审批状态（status字段更新）

一、修复Toggle切换按钮的问题 #

你的现有代码存在逻辑错误，以下是修正后的完整实现：

1. 前端DataTable渲染修正 #

<script type="text/javascript">
$(document).ready(function() {
    $.noConflict();
    fill_datatable();

    function fill_datatable(collegeID = '') {
        var table = $('.user_datatable1').DataTable({
            order: [[0, 'desc']],
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('alumni.datatable1') }}",
                data: { collegeID: collegeID }
            },
            columns: [
                { data: 'id', name: 'id' },
                { data: 'name', name: 'name' },
                {
                    data: 'status',
                    name: 'status',
                    mRender: function(data, type, row) {
                        // 用当前行的id和status值渲染开关
                        return `<input data-id="${row.id}" class="toggle-class" type="checkbox" 
                                data-onstyle="success" data-offstyle="danger" 
                                data-toggle="toggle" data-on="Approved" data-off="Pending" 
                                ${data == 1 ? "checked" : ""}>`;
                    }
                },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ]
        });
    }
});
</script>

<script>
$(function() {
    // 用事件委托绑定动态生成的开关
    $(document).on('change', '.toggle-class', function() {
        // 修正状态逻辑：勾选=已审批(1)，未勾选=待审批(0)
        var status = $(this).prop("checked") ? 1 : 0;
        var id = $(this).data("id");
        
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "{{ route('changeStatus') }}",
            data: { 
                "_token": "{{ csrf_token() }}", // 必须携带CSRF令牌
                "status": status, 
                "id": id 
            },
            success: function(data) {
                console.log(data.success);
                // 刷新表格更新状态
                $('.user_datatable1').DataTable().ajax.reload();
            },
            error: function(xhr) {
                console.error("状态更新失败：", xhr.responseText);
            }
        });
    });
});
</script>

2. 路由修正 #

修改操作建议用POST请求，避免GET的缓存和安全问题：

Route::post('changeStatus', [AdminAuthController::class, 'changeStatus'])->name('changeStatus');

3. 控制器方法修正 #

public function changeStatus(Request $request)
{
    // 验证请求参数合法性
    $request->validate([
        'id' => 'required|integer|exists:colleges,id',
        'status' => 'required|integer|in:0,1'
    ]);

    $college = College::find($request->id);
    $college->status = $request->status;
    $college->save();

    return response()->json(['success' => '状态已成功更新']);
}

二、普通按钮实现状态切换 #

如果偏好使用按钮而非开关，可按以下方式实现：

1. 前端DataTable渲染按钮 #

<script type="text/javascript">
$(document).ready(function() {
    $.noConflict();
    fill_datatable();

    function fill_datatable(collegeID = '') {
        var table = $('.user_datatable1').DataTable({
            order: [[0, 'desc']],
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('alumni.datatable1') }}",
                data: { collegeID: collegeID }
            },
            columns: [
                { data: 'id', name: 'id' },
                { data: 'name', name: 'name' },
                {
                    data: 'status',
                    name: 'status',
                    mRender: function(data, type, row) {
                        if (data == 1) {
                            // 已审批状态，显示取消审批按钮
                            return `<button class="btn btn-danger btn-sm change-status-btn" 
                                    data-id="${row.id}" data-current-status="1">取消审批</button>`;
                        } else {
                            // 待审批状态，显示通过审批按钮
                            return `<button class="btn btn-success btn-sm change-status-btn" 
                                    data-id="${row.id}" data-current-status="0">通过审批</button>`;
                        }
                    }
                },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ]
        });
    }
});
</script>

<script>
$(function() {
    $(document).on('click', '.change-status-btn', function() {
        var currentStatus = $(this).data("current-status");
        // 切换状态：0→1，1→0
        var newStatus = currentStatus == 1 ? 0 : 1;
        var id = $(this).data("id");
        
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "{{ route('changeStatus') }}",
            data: { 
                "_token": "{{ csrf_token() }}",
                "status": newStatus, 
                "id": id 
            },
            success: function(data) {
                console.log(data.success);
                // 刷新表格更新按钮状态
                $('.user_datatable1').DataTable().ajax.reload();
            },
            error: function(xhr) {
                console.error("状态更新失败：", xhr.responseText);
            }
        });
    });
});
</script>

2. 路由与控制器 #

路由和控制器方法与Toggle按钮修正后的版本完全一致，无需额外修改。

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