分页时复选框在数据 table 中不起作用

Question

我有一个数据 table 使用 jquery 显示数据列表。我在第一列上实现了一个复选框，我可以检查每条记录或一次检查所有记录。如果有一个或多个 selected 复选框，则会显示批准和拒绝按钮。虽然目前所有这些都可以工作，但如果我 select 下一页并开始选中任何复选框，approve/reject 按钮将不会显示。

代码：

<article class="col-xs-6 text-right">
            <button id="approveButton" class="btn btn-success update-button" value="1">Approve</button>
            <button id="rejectButton" class="btn btn-danger update-button" value="2">Reject</button>
        </article>

var $table = $("#dt_basic").DataTable({
    "scrollY": ($(window).height() - 270)+"px",
    "scrollX": false,
    "pageLength": ' . Yii::$app->params['settings']['listing_length'] . ',
    "processing": true,
    "serverSide": true,
    "columnDefs": [{ "targets": [0, 6], "searchable": false, "orderable": false, "visible": true, className: "text-center-desktop" }],
    "deferLoading": ' . $total . ',
    "order": [],
    "ajax": "' . Yii::$app->urlManager->createUrl(['xxxx']) . '",
    "sDom": "<\'dt-toolbar\'<\'col-xs-12 col-sm-9\'f><\'col-sm-3 hidden-xs\'l>>r"+
        "t"+
        "<\'dt-toolbar-footer\'<\'col-sm-5 col-xs-12 hidden-xs\'i><\'col-xs-12 col-sm-7\'p>>",
    "autoWidth" : true,
    "preDrawCallback" : function() {
        responsiveHelper_dt_basic = new ResponsiveDatatablesHelper($(\'#dt_basic\'), {tablet : 1024, phone : 480});
    },
    "rowCallback" : function(nRow) {
        responsiveHelper_dt_basic.createExpandIcon(nRow);
    },
    "drawCallback" : function(oSettings) {
        responsiveHelper_dt_basic.respond();
        var pagination = $(this).closest(".dataTables_wrapper").find(".dataTables_paginate");
        pagination.toggle(this.api().page.info().pages > 1);
    }
});

    $("#approveButton").hide();
    $("#rejectButton").hide();

    $("#masterCheck").on("click", function (e) { 
        if ($(this).is(":checked", true)) {
            $(".subChk").prop("checked",true);
        } else {
            $(".subChk").prop("checked", false);
        }
    });

    //This would not detect if checkbox is ticked in next page
    $("input:checkbox").on("change",function(){  
        if ($("input:checkbox:checked").length > 0) {
            $("#approveButton").show();
            $("#rejectButton").show();
        } else {
            $("#approveButton").hide();
            $("#rejectButton").hide();
        }
    }); 

    $(".update-button").on("click", function(e) {
        e.preventDefault();
        var status =  $(this).val(); 
        let allVals = [];
        $(".subChk:checked").each(function() {
            allVals.push($(this).attr("id"));
        });

        console.log(allVals);
        let join_selected_values = allVals.join(",");
        $.ajax({
            url: "updatewithdrawbulk",
            type: "UPDATE",
            data: {
                ids: join_selected_values,
                type: status
            },
            success: function(data) {
                location.reload();
            },
            error: function (data) {
                alert("There is some error, please try again");
            }
        });
    });

进入下一页后，选中主复选框将起作用（也选中所有子复选框）并且将显示 approve/reject 按钮。我唯一的问题是当我单独勾选任何复选框时，它不会显示按钮。

我想知道这是否是代码或 jquery 数据 table 的问题？

Answer 1

问题是，当您附加这些 .on 绑定时 - 它只会附加当前存在于 html 中的元素。

绘制下一组行时 - 这些行没有绑定到它们。

如果您连接到通知您何时出现新行的事件回调 - 您应该再次绑定您的事件，以便这些新行按预期工作。

在示例中，我希望这可以在 drawCallback 事件中实现。

分页时复选框在数据 table 中不起作用

checkbox not working in data table when paginated

javascript

datatable

jquery