切换按钮在laravel中的数据表内不起作用

wooyq4lh  于 2022-11-26  发布在  其他
关注(0)|答案(1)|浏览(168)


图片顶部的InActive按钮,当它在数据表之外时可以正确显示,但在数据表内部不起作用。我已经为数据表内部的status列添加了相同的代码,但它只显示了一个复选框。我如何在数据表内部获得InActive按钮?

<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) {
                           
                            return '  <input data-id="{{$colleges->id}}" class="toggle-class" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" data-off="InActive" {{ $colleges->status ? "checked" : "" }}>'
                                                                                                                                                                                                                                       
                            }
                        }

                    },

                    {
                                data: 'action',
                                name: 'action',
                                orderable: false,
                                searchable: false
                            },
                ]
            });
        }         
    });
     $(function() {
    $('.toggle-class').change(function() {
        var status = $(this).prop('checked') == true ? 1 : 0; 
        var user_id = $(this).data('id'); 
         
        $.ajax({
            type: "GET",
            dataType: "json",
            url: '/changeStatus',
            data: {'status': status, 'id': id},
            success: function(data){
              console.log(data.success)
            }
        });
    })
  })
</script>
nkoocmlb

nkoocmlb1#

请添加css.....

CSS格式

<style>
    .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
    }
    
    .switch input { 
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
    }
    
    .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }
    
    input:checked + .slider {
      background-color: #2196F3;
    }
    
    input:focus + .slider {
      box-shadow: 0 0 1px #2196F3;
    }
    
    input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }
    
    /* Rounded sliders */
    .slider.round {
      border-radius: 34px;
    }
    
    .slider.round:before {
      border-radius: 50%;
    }
    </style>

您可以简单地在状态后添加....

拨动开关

{
        "data": "id",
         render: function(data, type, row, meta) {
           $html = '<label class="switch">  <input type="checkbox">  
                    <span class="slider round"></span></label>';
           return $html;
         }
 },

相关问题