嘿伙计们,我的数据表插件有问题 问题是我无法选择操作列中的复选框将其转换为 bootstrap-toggle 它之前可以工作,但是当我使用数据表的服务器端并在 Controller 中声明复选框时,没有任何效果(对不起我的英语) 请帮忙!! 这是 Controller 代码
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);
这是 View 中的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>
最佳答案
使用服务器端时,结果表会在整页加载后显示。因此,当数据表显示结果时,引导元素已经生成。
您可以通过调用一个函数来解决这个问题,该函数负责在“完整”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"},
]
});
});
关于javascript - jQuery 选择器不适用于数据表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59228087/