jQuery 选择器不适用于数据表答案

【问题标题】：jQuery selector won't work with DatatablesjQuery 选择器不适用于数据表
【发布时间】：2020-04-01 07:54:12
【问题描述】：

大家好，我对 Datatable 插件有疑问问题是我无法选择操作列中的复选框将其转换为引导切换它以前可以工作但是当我使用数据表的服务器端并在控制器中声明复选框时没有任何作用（对不起我的英语）请帮忙！！这是控制器代码

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);

这是视图中的js代码，我认为问题来自这里

<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>

【问题讨论】：

标签： javascript jquery laravel datatables angular-bootstrap-toggle

【解决方案1】：

使用 serverSide 时，结果表会在整个页面加载后显示。因此，当数据表显示结果时，引导元素已经生成。

您可以通过调用一个函数来解决这个问题，该函数负责在“完整”ajax 处理程序中显示引导元素。（这里 $.extend 适用于数据表选项对象）

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

所以在你的情况下，这可能是这样的简单：

$(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"},
        ]
    });
});

【讨论】：