服务器端处理后复选框在 DataTables 中不起作用
Posted
技术标签:
【中文标题】服务器端处理后复选框在 DataTables 中不起作用【英文标题】:Checkboxes not working in DataTables after server-side processing 【发布时间】:2021-07-21 05:47:43 【问题描述】:我有一个使用服务器端处理和 Ajax 加载其行的 DataTable。每行都有一个复选框,其中包含一个数字 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);
【问题讨论】:
您是否尝试过使用非动态元素?因此,例如,<table>
似乎不是动态的。你可以做类似$('table td.check input:checked')
一些需要澄清的问题:(1)您如何将复选框添加到表格的每一行?我希望看到一个列渲染器或类似的东西。 (2) 您的 click 函数期望每个复选框 <td>
有一个名为 check
的类:'td.check input:checked'
- 该类是如何添加的?
@andrewjames 它在 Ajax 调用的 list.php
文件中完成。我将编辑问题以包含该代码
@devlincarnate 谢谢,但你的建议没有运气
感谢您的更新。这涵盖了第 (1) 点 - 但是第 (2) 点呢?您的选择器'td.check input:checked'
将永远找不到任何东西。或者,或者,如果您只使用 'td input:checked'
怎么办?
【参考方案1】:
在@andrewjames 的帮助下,我能够找出问题所在。
您的点击函数希望每个复选框都有一个名为 check: 'td.check input:checked' 的类 - 该类是如何添加的?
我使用DataTables 的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
]
【讨论】:
以上是关于服务器端处理后复选框在 DataTables 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
DataTables jQuery插件服务器端处理,通过ajax删除后智能分页