可点击的行仅适用于数据表的第一页

Posted 2023-05-09

【中文标题】可点击的行仅适用于数据表的第一页

【英文标题】：Clickable row only works on the first page in datatable

【发布时间】：2017-02-20 21:02:57

【问题描述】：

我需要帮助。我有一个页面显示引导数据表中的记录。记录每页显示 10 行，每行的左列都有一个复选框。我想要做的是，当用户单击该行时，它将选中复选框并启用放置在表格之后的按钮（用户必须至少选择一个复选框来激活/启用按钮）。我已经实现了这个，但不幸的是它只适用于第一页。当用户转到第二页并单击表格行时，未选中该复选框。任何人都可以帮助我吗？非常感谢。

//disable button when no records are selected
var checkboxes = $("input[type='checkbox']");
var btn = $("#button");
btn.attr("disabled","disabled");

checkboxes.on('click', function(event) 
    if($(this).prop('checked'))
        btn.removeAttr('disabled');
     else 
        btn.attr("disabled",!checkboxes.is(":checked"));
    
);

//this will check the checkbox whenever user clicks the table row
$('.clickable-row').click(function (event) 
    if (event.target.type !== 'checkbox') 
        $(':checkbox', this).trigger('click');
    
); 

【参考方案1】：

当您将 DataTables 与 jQuery 一起使用时，该插件通过在您切换页面时添加和删除 DOM 中的元素来管理页面上显示的行。加载表格时，DOM 中唯一存在的行是出现在第一页上的行。

这意味着您的处理程序只会添加到第一页的元素中，一旦您切换页面，这些元素就会被删除，因此当您返回第 1 页时，这些将是新创建的元素，没有附加任何处理程序。

将您的代码更改为：

$('#some-table-id').on('click','.clickable-row', function (event) 
    if (event.target.type !== 'checkbox') 
        $(':checkbox', this).trigger('click');
    
); 

这叫event delegation

另见Event binding on dynamically created elements?

【讨论】：

您是否将'#some-table-id' 更改为实际表格的选择器？你不显示它所以我不得不使用占位符

我确实喜欢这个 '$('#table').click('click','.clickable-row', function (event)' 但没用

现在可以使用了。我只是将 $('#table')**.click**.... 更改为 $('#table')**.on**... ..

天哪，我的错。是的，这是我的错字，是的，应该是 .on()