带有 jQuery-toggles 的数据表在第 1 页以外的页面上不起作用答案

【问题标题】：Datatables with jQuery-toggles not working on pages other than page 1带有 jQuery-toggles 的数据表在第 1 页以外的页面上不起作用
【发布时间】：2015-04-27 22:54:18
【问题描述】：

我有一个使用服务器端代码填充的数据表。

<table id="email_alerts" class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.crmContactsList)
        {
            <tr>
                <td>@item.fname</td>
                <td>
                    @if (item.claimsOpenedAlert)
                    {
                        <div class="control-label">
                            <div class="toggle toggle-primary" data-toggle-on="true" data-contact-id="@item.crmContactID"></div>
                        </div>
                    }
                    else
                    {
                        <div class="control-label">
                            <div class="toggle toggle-primary" data-toggle-on="false" data-contact-id="@item.crmContactID"></div>
                        </div>
                    }
                </td>
            </tr>
        }
    </tbody>
</table>

我使用这个 jQuery 来初始化所有 jQuery Toggles 以设置为数据库返回的内容。

jQuery('.toggle').each(function () {
            $(this).toggles({
                on: $(this).data('toggle-on')
            });
        });

当他们被点击时，我使用这个代码来改变他们的状态。 Off 变为 on，反之亦然。

// Toggle Switches
        $('.toggle').on('click', function () {
            console.log($(this).data('toggle-on'));
            if ($(this).data('toggle-on') == true) {
                $(this).data('toggle-on', false)
                console.log('Turning off ' + $(this).data('contact-id'));
            }
            else {
                $(this).data('toggle-on', true)
                console.log('Turning on ' + $(this).data('contact-id'));
            }
        });

现在所有这些都可以完美运行，除非我单击数据表第一页以外的任何页面。第 2 页以上它们都默认开启。

知道为什么这适用于第一页而不适用于数据表中的其他页面吗？

【问题讨论】：

你在哪里调用切换绑定代码？听起来后续页面没有绑定切换事件。您需要在每次绘制表格后调用它，最好是在数据表回调函数中，如 fnRowCallback
@markpsmith 我认为这是 jQuery 的第一部分。这需要所有 .toggle 类并初始化 Toggle 行为。

标签： jquery jquery-plugins datatables

【解决方案1】：

动态初始化切换插件，因此您还可以在更改页面、排序等时“切换”注入的元素：

jQuery('#example').on('draw.dt', function() {
    jQuery('.toggle').each(function() {
        $(this).toggles({
           on: $(this).data('toggle-on')
        });
    });
});

您还必须使用委托的事件处理程序。就像现在一样，您只有一个用于第一页切换的点击处理程序：

$('#example').on('click', '.toggle', function () {
    console.log($(this).data('toggle-on'));
    if ($(this).data('toggle-on') == true) {
        $(this).data('toggle-on', false)
        console.log('Turning off ' + $(this).data('contact-id'));
    } else {
        $(this).data('toggle-on', true)
        console.log('Turning on ' + $(this).data('contact-id'));
    }
});

demo -> http://jsfiddle.net/gmptpbqg/ 其中所有.toggle 元素都变为“切换”并且在页面中正确记住开/关状态。

【讨论】：

我能够使用上面的代码让它工作。但是出于某种原因，我还必须使用我的 ('.toggle').each 部分以及你的部分。只有你的我的第一页搞砸了。在第一页搞砸之后，我的任何东西都可以。两者似乎都运行良好。

【解决方案2】：

您可以像这样使用 DataTable 回调函数：

$('#email_alerts').DataTable( {

    "scrollCollapse": true,
    "paging":         true,
    "fnDrawCallback": function() {
        jQuery('.toggle').bootstrapToggle();
    }

} );

它对我来说很好用。祝你好运！！！

【讨论】：

【解决方案3】：

因为我使用的是 Bootstrap Toggle 而不是 JQuery Toggle，所以只是分享我的答案，但我使用了上面一些公认的答案：

$('#tblMyTable').on('draw.dt', function () {
            $('.myInputCheckBoxClass').bootstrapToggle();

            fncAdditionalBindingLogicForBoostrapToggle(); //In case you need any logic when you click the toggle button

        });

下面的代码不起作用，因为每当我点击DataTable的分页时，绑定就会变得不稳定，所以我使用了上面修改后的版本代码：

$('#tblCFRMode').on('draw.dt', function () {

              $('.myInputCheckBoxClass').each(function () {

              if ($(this).prop('checked') == true) {
                $(this).bootstrapToggle('on');
              } else {
                $(this).bootstrapToggle('off');
              }
          });
      });

【讨论】：