jQuery selector won't work with Datatables

Question

hey guys i have a problem with Datatable plugin the problem is that i can't select the checkbox in the action column to convert it into bootstrap-toggle it was working before but when i use the serverside of datatable and declare the checkbox in the controller nothing works (Sorry for my english ) please help!! this is the controller code

return DataTables::of($participant)
        ->addColumn('action',function($participant){
            $route = route('admin.participant.presence',$participant);

            return '<form action="'.$route.'" method="PATCH">
            <input type="hidden" name="presence" value="0">
            <input type="checkbox" class="participation" onchange="this.form.submit()" '.isChecked($participant).' name="presence" value="1">
            </form>';
        })->make(true);

and here's the js code in the view and I think the problem comes from here

<script>
        $(document).ready( function(){
            var id = {{request()->route('id')}};
        $('#table').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "/admin/evenment/event/participant/ajaxdatatable/"+id,
        "columns":[
            {"data": "adherent_id"},
            {"data": "nom_participant"},
            {"data": "prenom_participant"},
            {"data": "fonction"},
            {"data": "action"},
        ]
    });
    $('.participation').bootstrapToggle({
        on: 'Oui',
        off: 'Non',
        onstyle: 'success',
        offstyle: 'danger',
        width: '70'
    });
    });

    </script>

Answer 1

When using serverSide, the resulting table is displayed after the full page load. Therefore the bootstrap elements have already been generated when datatable displays the results.

You can solve this by calling a function which takes care of displaying bootstrap elements in the "complete" ajax handler. (here the $.extend applies to a datatable options object)

$.extend(true, options, {
    "ajax": {
        "url": self.data('url'),
        "data": function ( d ) {
            d.action = "drawDatatable"
        },
        "type": "POST",
        "complete": function() {
            prepareDisplayElements("#"+self.attr("id"));
        }
    }
});

So in your case this could be something simple like this:

$(document).ready( function(){
    var id = {{request()->route('id')}};

    $('#table').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "/admin/evenment/event/participant/ajaxdatatable/"+id,
            "complete": function() {
              $('.participation').bootstrapToggle({
                  on: 'Oui',
                  off: 'Non',
                  onstyle: 'success',
                  offstyle: 'danger',
                  width: '70'
              });
            }
        },
        "columns":[
            {"data": "adherent_id"},
            {"data": "nom_participant"},
            {"data": "prenom_participant"},
            {"data": "fonction"},
            {"data": "action"},
        ]
    });
});