How can use a custom callback ajax function in datatables

Hi!

I'm using a js-switch for toggle active & in_active status how can use in yajra datatables this is code plz give me the best way so that use in datatables blade script

 $(document).ready(function(){
	var columns = [
	columns.push({
                    data: 'is_active', 
                    name: 'is_active',
                    orderable: true,
                    searchable: "true",                     
                    className: "js-switch",

                });
];
	$('#consultant-table').DataTable({                
                processing: true,
                serverSide: true,                                              
                ajax: {
                    url: '{{ route('admin.product.dt') }}',
                },
                columns: columns
            }); 

            $('.js-switch').change(function () {
                let is_active = $(this).prop('checked') === true ? 1 : 0;
                let id = $(this).data('id');
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: '{{ route('admin.product.update_status') }}',
                    data: {'is_active': is_active, 'id': id},
                    success: function (data) {
                        toastr.options.closeButton = true;
                        toastr.options.closeMethod = 'fadeOut';
                        toastr.options.closeDuration = 100;
                        toastr.success(data.message);
                    }
                });
            });
});

controller

->addColumn('is_active', function ($consultant) { 
                $consultantId = $consultant->id;
                $consultantStatus = $consultant->user->is_active;               
                $html = "";
                $html .= "<input type=\"checkbox\" data-id='$consultantId' name=\"is_active\" class=\"js-switch\" 			 $consultantStatus == 1 ? 'checked' : '' >";

                return $html;
            })

hany.nasyr

5 years ago

Level 1

Having the same issue! Did you found any solutions for this?

Spiral

5 years ago

Level 3

Will solve your problem

<script>
        $(document).ready(function(){
            var columns = [
                {   data: 'DT_RowIndex', 
                    name: 'DT_RowIndex'
                },
                { 
                    data: 'first_name', 
                    name: 'first_name', 
                    searchable: true 
                },
                { 
                    data: 'email', 
                    name: 'email', 
                    searchable: true,  
                },
                { 
                    data: 'residing_country', 
                    name: 'residing_country', 
                    searchable: true,  
                },
                { 
                    data: 'target_country', 
                    name: 'target_country', 
                    searchable: true, 
                }
            ];

            columns.push({
                    data: 'rating', 
                    name: 'rating',
                    orderable: true,
                    searchable: "false",                     
                    className: "td_align"
                });
            columns.push({
                    data: 'is_active', 
                    name: 'is_active',
                    orderable: true,
                    searchable: "true",                     
                    className: "td_align",

                });
            columns.push({
                    data: 'action', 
                    name: 'action',                      
                    orderable: false,
                    searchable: "false",
                    className: "td_align"
                });
            $('#consultant-table').DataTable({                
                processing: true,
                serverSide: true,                                                 
                ajax: {
                    url: '{{ route('admin.consultant.dt') }}',
                },
                columns: columns,
                drawCallback: function(data) {
                    var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));

                      elems.forEach(function(html) {
                          var switchery = new Switchery(html,  { size: 'small' });
                      });
                    $('.js-switch').change(function () {
                        let is_active = $(this).prop('checked') === true ? 1 : 0;
                        let id = $(this).data('id');
                        $.ajax({
                            type: "GET",
                            dataType: "json",
                            url: '{{ route('admin.consultant.update_status') }}',
                            data: {'is_active': is_active, 'id': id},
                            success: function (data) {
                                toastr.options.closeButton = true;
                                toastr.options.closeMethod = 'fadeOut';
                                toastr.options.closeDuration = 100;
                                toastr.success(data.message);
                            }
                        });
                    });
                },
            });                                                           
        });
    </script>

Please or to participate in this conversation.