分页时的数据表回调答案

【问题标题】：datatables callback on pagination分页时的数据表回调
【发布时间】：2021-03-04 10:35:16
【问题描述】：

我正在以这种方式将switchery 实现到数据表中

更新

  var table = $('#table').DataTable({
        pageLength: 25,
        responsive: true,
        deferRender: true,
        stateSave: false,
        info: false,
        ordering: false,
        dom: 'lTfgt<"float-left"i>p',
        ajax: {
            "url": "../src/routes.php",
            "type": "POST",
            "async":true,
            "dataType": "json",
            "data": function(d) {
                d.call = "data-vol";
                d.dataform = $('#filtroForm').serialize();
                d.market = JSON.stringify($('#jstree_topmarket').jstree("get_selected"));

                return d;
            }
        },
        language: {
            "url": "assets/js/plugins/dataTables/it_IT.txt"
        },
        "fnDrawCallback": function() {
            var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));

            elems.forEach(function(html) {
                var switchery = new Switchery(html, { size: 'small' });
            });
        }
    });

看起来还不错

但是当我切换到第 2 页然后回到第 1 页时，我得到了这个结果

编辑

用 initComplete 替换 fnDrawCallback 似乎不起作用

【问题讨论】：

标签： ajax datatable switchery

【解决方案1】：

我建议使用initComplete 函数而不是drawCallback。这将避免每次 DataTable 中有另一个绘制事件时添加新滑块的问题。

要从initComplete 访问复选框节点，您可以使用：

"initComplete": function() {
  var allNodes = $('#example').DataTable().cells().nodes();
  $.each($( '.js-switch', allNodes), function(index, node) {
    var switchery = new Switchery(node, { size: 'small' });
  });   
}

函数的第一行使用 Datatables API 访问表中的每个节点。

allNodes 是 <td> 节点的集合 - 所以我们必须只选择那些包含使用您的 js-switch 类的子节点的节点。

由于我们已经有了 jQuery，我选择使用它的迭代器 $.each() 来迭代所有这些复选框节点，以创建切换对象。

更新：

这是我用来测试的完整数据表：

$('#example').DataTable( {
  data: dataSet,
  columns: [
    { title: "Name", data: "name" },
    { title: "Office", data: "office" },
    { title: "Position", data: "position" },
    { title: "", defaultContent: '<input type="checkbox" class="js-switch" checked />' }
  ],
  "initComplete": function() {
    var allNodes = $('#example').DataTable().cells().nodes();
    $.each($( '.js-switch', allNodes), function(index, node) {
      var switchery = new Switchery(node, { size: 'small' });
    }); 
  }

} );

我的测试数据在一个 JavaScript 变量中：

var dataSet = [
    {
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },

    // more data not shown here...

    {
      "id": "57",
      "name": "Donna Snider",
      "position": "Customer Support",
      "salary": "$112,000",
      "start_date": "2011/01/25",
      "office": "New York",
      "extn": "4226"
    }
  ];

【讨论】：

在我的测试中，我使用这样的复选框：<input type="checkbox" class="js-switch" checked />。它们被放置在相关的 DataTable <td></td> 单元格中。你能描述一下“不工作”是什么意思吗？你看到了什么？浏览器的控制台中是否会抛出错误？每个单元格中还有多个滑块吗？
请注意，我的 DataTable 被称为“example” - 你的可能有不同的名称，如 HTML 表中定义的那样：<table id="example"...>...`。您可能需要相应地更改我的代码。
我还用完整的数据表代码更新了我的第一篇文章...问题可能是 ajax 调用吗？
您是否更改了我的示例代码以匹配您的表名？您的表称为“表”，而我的表称为“示例”：var allNodes = $('#table').DataTable().cells().nodes();
好的 - 谢谢你的笔记。我不知道为什么您使用我的代码的行为与我使用我的代码的行为不同 - 很奇怪。

【解决方案2】：

我使用createdRow，这是我的代码：

createdRow: function (row) {
    initializeSwitchElement(row)
}


function initializeSwitchElement(row) {
    let checkbox = Array.prototype.slice.call($(row).find('.js-switch'));
    if ($(checkbox).prop('checked')) {
        $(checkbox).trigger('keyup').blur()
    }
    checkbox.forEach(function (element) {
        new Switchery(element, { size: 'small' });
    });
}

【讨论】：