服务器端处理后,复选框在 DataTable 中不起作用

Checkboxes not working in DataTables after server-side processing

提问人:Paul Ruocco 提问时间:4/28/2021 最后编辑:Paul Ruocco 更新时间:4/28/2021 访问量:1323

问:

我有一个 DataTable,它使用服务器端处理和 Ajax 加载其行。每行都有一个复选框,其中包含一个数字 ID 作为值。

<input class="form-check-input" type="checkbox" id="coupon-111" name="chk[]" value="111">

表外部有一个按钮,用于对选中的行执行操作 - 在本例中,将条目从“活动”更改为“非活动”。单击该按钮时,它将运行以下脚本:

$(document).on('click', 'button[data-action]', function () {

    var action = $(this).data('action');  //Gets the action from the button clicked "Active" / "Inactive"
    var selected = [];  // Starts empty array of IDs for the rows checked.

    // If the checkbox is checked, push its value (111) to the array.
    $('td.check input:checked').each(function(i, e) {
        selected.push($(this).val());
    });

    console.log(selected); // Console shows an empty array "[]" 

    // ...

});

在添加服务器端处理和 ajax 之前,此功能运行良好。我知道这与 Ajax 动态加载结果有关。如果这是一个事件,我会像使用按钮一样将其绑定到 $(document)。我怎样才能让它工作(或者我应该做些什么不同的事情)?.each()

下面是 DataTables JS 和 Ajax:

jQuery(document).ready(function() {
    
    var table = jQuery('#coupons-list').dataTable({
        'pageLength': 25,
        'autoWidth': false,
        'bProcessing': true,
        'sAjaxSource': './list.php',
        'bPaginate': true,
        'sPaginationType': 'full_numbers',
        'iDisplayLength': 5,
        'oLanguage': {
            'sProcessing': '<div class="loader"><i class="fad fa-spinner-third fa-spin" aria-hidden="true"></i></div>'
        },
        'aoColumns': [
            { mData: 'check' },
            { mData: 'status' },
            { mData: 'code' },
            { mData: 'assigned_to' },
            { mData: 'discount_value' },
            { mData: 'start_date' },
            { mData: 'end_date' },
            { mData: 'uses_left' }
        ],
        'createdRow': function(row, data, dataIndex) {
            $(row).addClass('click-row').attr('data-href', './view/?id='+data['id']);
        }
    });

});

list.php:

$coupons_list = array();
$select = $db -> prepare("SELECT coupons.id, coupons.influencer_id, coupons.status, coupons.code, coupons.value, coupons.type, coupons.start_date, coupons.end_date, coupons.uses_left, users.fname, users.lname FROM coupons LEFT OUTER JOIN influencers ON influencers.id = coupons.influencer_id LEFT OUTER JOIN users ON users.id = influencers.user_id ORDER BY coupons.code ASC");
$select -> execute();
$select -> bind_result($coupon_id, $influencer_id, $coupon_status, $coupon_code, $coupon_value, $coupon_type, $coupon_start_date, $coupon_end_date, $coupon_uses_left, $user_fname, $user_lname);
while ($select -> fetch())
{
    $coupon = array(
        'check' => '<input class="form-check-input" type="checkbox" id="coupon-'.$coupon_id.'" name="chk[]" value="'.$coupon_id.'">',
        'id' => $coupon_id,
        'status' => $coupon_status,
        'code' => $coupon_code,
        'assigned_to' => $coupon_influencer,
        'discount_value' => number_format($coupon_value, 2),
        'start_date' => $coupon_start_date,
        'end_date' => $coupon_end_date,
        'uses_left' => $coupon_uses_left
    );
    array_push($coupons_list, $coupon);
}

$table_data = array(
    'sEcho' => 1,
    'iTotalRecords' => count($coupons_list),
    'iTotalDisplayRecords' => count($coupons_list),
    'aaData' => $coupons_list
);

echo json_encode($table_data);
jQuery ajax datatables 服务器端

评论

0赞 devlin carnate 4/28/2021
您是否尝试过使用非动态元素?因此,例如,这似乎不是动态的。你可以做这样的事情<table>$('table td.check input:checked')
0赞 andrewJames 4/28/2021
需要澄清的一些问题:(1) 您如何将复选框添加到表格的每一行?我希望看到一个列渲染器或类似的东西。(2)你的点击函数希望每个复选框都有一个名为: - 该类是如何添加的?<td>check'td.check input:checked'
0赞 Paul Ruocco 4/28/2021
@andrewjames它是在 Ajax 调用的文件中完成的。我将编辑问题以包含该代码list.php
0赞 Paul Ruocco 4/28/2021
@devlincarnate 谢谢,但您的建议没有运气
0赞 andrewJames 4/28/2021
感谢您的更新。这涵盖了第 (1) 点 - 但第 (2) 点呢?您的选择器将永远不会找到任何东西。或者,如果你只是使用呢?'td.check input:checked''td input:checked'

答:

0赞 Paul Ruocco 4/28/2021 #1

在@andrewjames的帮助下,我能够找出问题所在。

您的 click 函数希望每个复选框都有一个名为 check 的类: 'td.check input:checked' - 该类是如何添加的?

我使用 DataTables 将“check”类添加到 中,以及另一个“no-click”类。问题是,第二个类覆盖了第一个类。columnDefs<td>

'columnDefs': [
    { className: 'check', targets: 0 },
    { className: 'no-click', targets: 0 },  // Overwrites "check"
    { className: 'fixed', targets: 1 }
]

因此,我这样做是为了使其按预期工作:

'columnDefs': [
    { className: 'check no-click', targets: 0 },
    { className: 'fixed', targets: 1 }
]