时间戳

首页 > 解决方案 > JQuery DataTables 1.8.1 Checkbox - 代码等价

jquery - JQuery DataTables 1.8.1 Checkbox - 代码等价

问题描述

我正在使用 datatable 1.8.1 和 ajax-source 来呈现我的表格。

我正在尝试使用一个“主”复选框选中/取消选中所有复选框。

我的复选框与 dataTables 的分页功能位于不同的页面上。这就是为什么我不能选择复选框的 id 或类别，因为这只会选择我当前页面上的复选框。

我确实进行了一些研究，并找到并尝试了以下代码：

dt.rows().nodes().to$().find('input[type="checkbox"]:not(:disabled)').prop('checked', $(this).prop('checked'));

其中 dt 是我的 Datatable 的一个实例：

var dt   = $('#selector').dataTable();

但它表明 dt.rows() 不是一个函数。也许我的 Datatable 版本太旧了？有人对我上面提到的代码有任何想法或等价吗？

编辑

数据表

        var dt   = $('#newsletter_contact_datatable').dataTable();
        var opts = dt.fnSettings();
        opts.aoDrawCallback.push({
            fn: function() {
                var form                = $(this).closest('form');
                var container           = form.find('.element-ids_js');
                var values              = container.val() ? JSON.parse(container.val()) : [];
                var blacklist_container = form.find('.element-blacklisted-ids_js');
                var blacklist_values    = blacklist_container.val() ? JSON.parse(blacklist_container.val()) : [];
        
                $('input[name="element-ids[]"]').each(function() {
                    var val = parseInt($(this).val());
        
                    if(blacklist_values.includes(val)) {
                        $(this).prop('checked', false).prop('disabled', true);
                        $(this).closest('tr').find('.blacklisted_js').removeClass('black').addClass('red').text('Annuler');
                    } else {
                        $(this).prop('checked', true).prop('disabled', false);
                        $(this).closest('tr').find('.blacklisted_js').removeClass('red').addClass('black').text('Retirer');
        
                        if(values.includes(val)) {
                            $(this).prop('checked', false);
                        }
                    }
                });
        
                $('input[name="check_all"]').prop('checked', true);
            },
            sName: 'user'
        });
// REFRESH DATATABLE WITH FILTERS
$('.box-filter input, .box-filter select').on('change', function() {
    refreshDatatable($(this));
});
refreshDatatable($('#newsletter_contact_datatable'));

function refreshDatatable($this) {
    var $form        = $this.closest('form');
    opts.sAjaxSource = "{{ path('template_path') }}?" + $form.serialize();
    dt.fnDraw();
}
$('form table input[name="check_all"]').on('change', function() {
                dt.api().rows().nodes().to$().find('input[type="checkbox"]:not(:disabled)').prop('checked', $(this).prop('checked'));
            });


    <div class="grid grid_18">
        <table id="newsletter_contact_datatable" class="data display datatable" data-sort="[[1, 'asc']]" data-ajax-source="{{ path('template_path') }}">
            <thead>
                <tr>
                    <th class="no_sort"><input type="checkbox" name="check_all" value="check_all" checked /></th>
                    <th width="15%">Lastname</th>
                    <th width="15%">First-name</th>
                    <th width="55%">Email</th>
                    <th class="no_sort" width="10%">Blacklist ?</th>
                </tr>
            </thead>
        </table>
    </div>

Template :

    <input type="checkbox" name="element-ids[]" value="{{ obj.id }}" checked />
    
    <div>{{ obj.data.lastname }}</div>
    
    <div>{{ obj.data.firstname }}</div>
    
    <div>
        {{ email.label }}
    </div>
    <button type="button" class="btn black tiny blacklisted_js" data-id="{{ obj.id }}">Delete</button>

数据样本为：

复选框 - john - doe - johndoe@email.com - 按钮黑名单

提前致谢。

标签： jquerydatatables

解决方案

而不是这个：

var dt = $('#selector').dataTable();

用这个：

var dt = $('#selector').DataTable();

换句话说，请注意使用 ofDataTable而不是datatable。

有什么区别？如DataTables API的此文档页面中所述：

$( selector ).DataTable()重要的是要注意和之间的区别$( selector ).dataTable()。前者返回一个 DataTables API 实例，而后者返回一个 jQuery 对象。

您可以从文档中看到访问 DataTables API 对象的 3 种不同方法。dataTable因此，在分配时仍然使用的另一种方法dt是：

dt.api();

1.8 版更新

我完全错过了您使用 1.8 的事实（问题中明确提到）。我的道歉 - 这改变了所有的语法。我上面的注释只适用于 1.10 以后的版本。

对于 1.8，试试这个：

你的出发点：

var dt = $('#newsletter_contact_datatable').dataTable();

使用该dt变量，您可以使用以下内容：

$(dt.fnGetNodes()) // 1.8 syntax

这相当于您尝试使用的 1.10 语法：

dt.rows().nodes().to$() // 1.10 syntax

从这一点开始，您应该能够使用 jQuery 语法的其余部分.find(...)来定位整个表格的复选框。

推荐阅读