服务器端处理后，DataTables中的复选框不起作用

Question

我有一个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动态加载结果有关。如果这是一个事件，我会像使用按钮一样将它绑定到$(文档(。我该如何使用.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);

Answer 1

在@andrewjames的帮助下，我解决了这个问题。

您的点击函数希望每个复选框都有一个名为check的类："td.check input:checked"-该类是如何添加的？

我使用DataTables的CCD_；"检查"；类到<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 }
]