使用Laravel切换数据表切换

Question

我正在尝试在数据表中为切换开关添加一列，但它无法正常工作。它只显示了这个文本

应该是这样的

这些是我的代码

$(function(){
    $('#table').DataTable({
      processing: true,
      serverSide: true,
      ajax: '{!! URL::asset('/amenity/table') !!}',
      columns : [
        { data: function (data) {return '<a href="amenity-details?id=' + data.id + '">' + data.name + '</a>';}, name: 'name' },
        { data: 'dayrate', name: 'dayrate' },
        { data: 'nightrate', name: 'nightrate' },
        { data: function(data){
            return '<div class="switch switch-square" data-on-label=\"<i class=" fa fa-check"></i>\" data-off-label=\"<i class="fa fa-times"></i>\"> <input type="checkbox" class="status '+data.status+'" data-id="'+data.id+'" /></div>';
        }, name: 'state', orderable: true, searchable: false},
        { data: 'action', name: 'action', orderable: false, searchable: false}
      ]

    });
  });

Answer 1

原因

由于您的切换是在ready事件之后的某个时间添加的，因此无法初始化。

解

每次重绘表时，都需要初始化jQuery DataTable中使用的控件。使用drawCallback选项定义每次重绘表时将调用的函数。

例如：

$('#table').DataTable({
   // ... skipped ...
   drawCallback: function(settings){
      var api = new $.fn.dataTable.Api( settings );

      // Initialize switch
      $('.switch', api.table().body()).bootstrapSwitch(); 
   }
});

LINKS

有关更多示例和详细信息，请参阅jQuery DataTables: Custom control does not work on second page and after。