ajax - 复选框上更改 ajax 的数据表不起作用

Question

复选框上更改 ajax 的数据表不起作用，我有一个数据表，如果单击复选框，我正在尝试将表中活动的值更新为 1，如果再次单击，则更新为 0。它甚至没有显示我插入的控制台日志，我不知道从哪里开始。预先感谢您的任何帮助

商店控制器：

public function activeswitch(){
   DB::table('shops')
   ->update(['active'=>1]);
   
 }

刀片.php：

 <script>
        $(document).ready(function () {

            table = $('#shops_table').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "{{url('api/admin/shops/get-shops')}}",
                rowId: "id",
                stateSave: true,
                dom: 'Bfrtip',
                "buttons": [
                    'excelHtml5',
                    'pdf',
                    'print'
                ],
                "order": [[ 0, "desc" ]],
                columns: [
                    {data: 'id'},
                    {data: 'name'},
                    {data: 'image', render: function(data){
                        return "<img src='/storage/uploads/logo/" + data + "' width=auto height='50' />"
                        }},
                    {data: 'color'},
                    {data: 'switch', render: function(data){

                            return '<label class="switch">' +                                   
                                ' <input type="checkbox" class="checkbox">' +
                                '<span class="slider round" data-active-value=0>' +
                                '  </span>' +
                                ' </label>';
                           
                        }},
                    {data: 'id', 'width' : '10%', render: function(data){
                            return '<div class="action-buttons">' +
                                '<a href="shops/'+data+'/" class="btn btn-xs btn-rounded btn-default m-r-xs"><i class="fa fa-eye"></i></a>' +
                                '<a href="shops/'+data+'/edit" class="btn btn-xs btn-rounded btn-default m-r-xs"><i class="fa fa-pencil"></i></a>' +
                                '                                        <form action="shops/'+data+'" method="POST" style="display: inline-block;">' +
                                '<input type="hidden" name="_method" value="DELETE" />' +
                                '                                            @csrf' +
                                '<button class="btn btn-xs btn-rounded btn-danger" type="submit"><i class="fa fa-trash"></i></button>' +
                                '                                        </form>' +
                                '</div>';
                        }}
                ],
            });
        });





    $( document ).ready(function() {
    $(".checkbox").change(function(e){
        console.log('hi')
e.preventDefault();

var selct_ = $(this) //declare this
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

    $.ajax({
    url: "{{ route('active.switch') }}", 
    
    data:{
    'active':$(this).data('active-value')
  
    }, 
    type: "get",
    success: function(result){
        console.log('hi')

    }
  });
});
});
</script>

标签： ajaxlaraveldatatabledatatables

Answer 1

它不起作用，因为您正在向尚不存在的元素添加侦听器。

Datatables.js 有一个回调，一旦绘制就运行，试试这个：

$(document).ready(function () {

        table = $('#shops_table').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "{{url('api/admin/shops/get-shops')}}",
            rowId: "id",
            stateSave: true,
            dom: 'Bfrtip',
            "buttons": [
                'excelHtml5',
                'pdf',
                'print'
            ],
            "order": [[ 0, "desc" ]],
            columns: [
                {data: 'id'},
                {data: 'name'},
                {data: 'image', render: function(data){
                        return "<img src='/storage/uploads/logo/" + data + "' width=auto height='50' />"
                    }},
                {data: 'color'},
                {data: 'switch', render: function(data){

                        return '<label class="switch">' +
                            ' <input type="checkbox" class="checkbox">' +
                            '<span class="slider round" data-active-value=0>' +
                            '  </span>' +
                            ' </label>';

                    }},
                {data: 'id', 'width' : '10%', render: function(data){
                        return '<div class="action-buttons">' +
                            '<a href="shops/'+data+'/" class="btn btn-xs btn-rounded btn-default m-r-xs"><i class="fa fa-eye"></i></a>' +
                            '<a href="shops/'+data+'/edit" class="btn btn-xs btn-rounded btn-default m-r-xs"><i class="fa fa-pencil"></i></a>' +
                            '                                        <form action="shops/'+data+'" method="POST" style="display: inline-block;">' +
                            '<input type="hidden" name="_method" value="DELETE" />' +
                            '                                            @csrf' +
                            '<button class="btn btn-xs btn-rounded btn-danger" type="submit"><i class="fa fa-trash"></i></button>' +
                            '                                        </form>' +
                            '</div>';
                    }}
            ],
            "fnDrawCallback": function() {
                $(".checkbox").change(function (e) {
                    console.log('hi')
                });
            }
        });
    });