Question

我想在数据表中使用 https://www.bootstraptoggle.com/ 并绑定复选框更改事件。

这是我的代码

function initialize(){
    $('#dataList').find('.login-swtich').each(function(){
        $(this).bootstrapToggle();
    });
}
$(document).ready(function() {
        var table = $('#dataList').DataTable({
            fn_init:initailize(),
            dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('users.user.index') }}",
                data: function (d) {
                    d.department = $('#department_filter').val();
                    d.keyword = $('#keyword').val();
                }
            },
             fnDrawCallback: function( oSettings ) {
                this.fn_init();
            },
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                {data: 'name', name: 'name'},
                {data: 'email', name: 'email'},
                {data: 'phone', name: 'phone'},
                {data: null, render: function ( data, type, row ) {
                    if(data.online_status == 'online')
                        return '<span class="btn btn-success">Online</span>';
                    else 
                        return '<span class="btn btn-secondary">Offline</span>';
                }},
                {data: null, render: function ( data, type, row ) {
                    if(data.online_status == 'online')
                        return '<input type="checkbox" data-toggle="toggle" data-id="'+data.id+'" onchange="LoginUpdate(this)" class="login-swtich" data-off="<i class=\'fa fa-lock\'></i> Login" data-on="<i class=\'fa fa-power-off\'></i> Logout">';
                    else 
                        return  '<input type="checkbox" checked data-toggle="toggle"  data-id="'+data.id+'" onchange="LoginUpdate(this)" class="login-swtich" data-off="<i class=\'fa fa-lock\'></i> Login" data-on="<i class=\'fa fa-power-off\'></i> Logout">';
                }},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ]
        });
    $('#search-form').on('submit', function(e) {
        table.draw();
        e.preventDefault();
    });
} )

但它给了我一个错误

caught ReferenceError: initailize is not defined
at HTMLDocument.<anonymous> (users:291)
at mightThrow (app.js:27758)
at process (app.js:27826)

是否允许使用带有数据表的外部函数；谢谢

Answer 1

问题中的代码定义了一个名为 initialize() 的函数 - 但随后尝试使用 fn_init:initailize() 调用它 - 拼写不正确。

除此之外，代替上述方法，执行此类函数的更典型方法是将其置于 initComplete 选项中：

function initialize(){
  $('#dataList').find('.login-swtich').each(function(){
    $(this).bootstrapToggle();
  });
}

var table = $('#dataList').DataTable( {
  dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'>>" +
          "<'row'<'col-sm-12'tr>>" +
          "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
  processing: true,
  serverSide: true,

  // other options not shown for brevity

  initComplete: function(settings, json) {
    initialize();
  }
} );

如果还需要，可以替换这个代码：

fnDrawCallback: function( oSettings ) {
  this.fn_init();
}

带有 draw event 回调，与主表定义分开：

table.on( 'draw', function () {
    initialize();
} );

（除此之外，正常范围规则适用于放置在“文档就绪”功能内部和外部的功能的可见性。）

数据表调用外部函数

1 个答案: