Question

我在DataTable中填充了js-switch，这里是代码：

$('#bandsTable').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
        'type': 'GET',
        'url': 'myUrl',
        'data': function (d) {
            d._token = Laravel.csrfToken;
        }
    },
    columns: [
        {
            title: "Number",
            data: "number"
        },
        {
            title: "Privileged",
            data: "privileged"
        }
    ],
    columnDefs: [
        {
            render: function (data) {
                var checked = data ? 'checked' : '';

                return '' +
                    '<input type="checkbox" class="js-switch" id="schedule_deactivation" ' +
                    checked + ' data-switchery="false" style="display: none;"> \n';

            },
            targets: 1
        }
    ],
    order: [[0, 'asc']],
    fnRowCallback: function( nRow, aData, iDisplayIndex ) {
        nRow.className = "band-row";
        nRow.setAttribute("data-band", aData.number);
        return nRow;
    },
    responsive: true
});

当我过滤结果时，它们会正确显示，但我看不到生成的复选框，我可以从控制台输入JS，当我输入时它会起作用：

var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function (html) {
    var switchery = new Switchery(html, {
        color: '#26B99A',
        secondaryColor: '#ff7a77'
    });
});

但我不知道何时应该调用此代码。我不知道DataTable生命周期以及我应该在哪里注入代码。它应该是DataTables定义的一些回调吗？

Answer 1

请参阅以下链接中的文档了解更多信息，但代码应如下：

$('#bandsTable').on('draw.dt', function () { 
   var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
   elems.forEach(function (html) {
    var switchery = new Switchery(html, {
        color: '#26B99A',
        secondaryColor: '#ff7a77'
    });
   });
});

链接： https://datatables.net/reference/event/

过滤DataTable后的调用函数

1 个答案: