Laravel中DataTable内Toggle Button无法正常显示及工作问题

你的问题主要出在动态元素初始化、模板变量错误和事件绑定失效这几个点上，以下是针对性的修复方案：

1. 修复DataTable行数据引用错误 #

DataTable服务器端渲染时，mRender函数里不能直接用Laravel模板变量{{$colleges->id}}，要通过函数提供的full参数获取当前行的完整数据：

mRender: function(data, type, full) {
    return `<input data-id="${full.id}" class="toggle-class" type="checkbox" 
            data-onstyle="success" data-offstyle="danger" 
            data-toggle="toggle" data-on="Active" data-off="InActive" 
            ${full.status ? "checked" : ""}>`;
}

2. 初始化动态生成的Toggle按钮 #

DataTable异步加载数据后，新生成的复选框不会自动被Bootstrap Toggle初始化，需要在表格绘制完成后手动初始化：

function fill_datatable(collegeID = '') {
    var table = $('.user_datatable1').DataTable({
        // 保留原有配置
        drawCallback: function(settings) {
            // 对新生成的toggle按钮做初始化
            $('.toggle-class').bootstrapToggle();
        }
    });
}

3. 用事件委托修复绑定失效问题 #

直接绑定change事件只能作用于页面初始元素，动态生成的元素需要通过父元素委托事件：

$(document).on('change', '.toggle-class', function() {
    var status = $(this).prop('checked') ? 1 : 0; 
    var user_id = $(this).data('id'); 
     
    $.ajax({
        type: "GET",
        dataType: "json",
        url: '/changeStatus',
        data: {'status': status, 'id': user_id}, // 修正原代码中变量名错误（id改为user_id）
        success: function(data){
          console.log(data.success)
        }
    });
})

完整修正后的代码 #

<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, full) {
                            return `<input data-id="${full.id}" class="toggle-class" type="checkbox" 
                                    data-onstyle="success" data-offstyle="danger" 
                                    data-toggle="toggle" data-on="Active" data-off="InActive" 
                                    ${full.status ? "checked" : ""}>`;
                        }
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                drawCallback: function(settings) {
                    $('.toggle-class').bootstrapToggle();
                }
            });
        }         
    });
    
    $(document).on('change', '.toggle-class', function() {
        var status = $(this).prop('checked') ? 1 : 0; 
        var user_id = $(this).data('id'); 
         
        $.ajax({
            type: "GET",
            dataType: "json",
            url: '/changeStatus',
            data: {'status': status, 'id': user_id},
            success: function(data){
              console.log(data.success)
            }
        });
    })
</script>

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