Jquery数据表在第二页上不起作用

时间:2023-01-12 21:13:32

I was using the jquery datatables plugin and it does not work after first page, the event click function only work on first page.

我使用的是jquery datatables插件,它在第一页后不起作用,事件点击功能仅适用于第一页。

So I have found out https://datatables.net/faqs/

所以我发现了https://datatables.net/faqs/

Q. My events don't work on the second page

问:我的活动在第二页上不起作用

A. When attaching events to cells in a table controlled by DataTables, you need to be careful how it is done. Because DataTables removes nodes from the DOM, events applied with a static event listener might not be able to bind themselves to all nodes in the table. To overcome this, simply use jQuery delegated event listener options, as shown in this example. Additionally, you could use my Visual Event bookmarklet to help debug event issues.

A.将事件附加到由DataTables控制的表中的单元格时,您需要小心如何完成它。由于DataTables从DOM中删除节点,因此使用静态事件侦听器应用的事件可能无法将自身绑定到表中的所有节点。要解决这个问题,只需使用jQuery委托的事件监听器选项,如本例所示。此外,您可以使用我的Visual Event书签来帮助调试事件问题。

And they suggest like this:

他们建议这样:

$('#example tbody').on('click', 'tr', function () {
    var name = $('td', this).eq(0).text();
    alert( 'You clicked on '+name+'\'s row' );
});

it works, however, In my case I need selector like this:

它工作,但是,在我的情况下,我需要像这样的选择器:

  $('#dataTables tbody tr').on('click', 'td', function (event) {
        if ($(this).attr('id') != "first" && $(this).parent().attr('data-href') !== undefined) {
            document.location = $(this).parent().attr('data-href');
        }
    });

How to fix the problem with keeping the selector target? Thanks.

如何通过保持选择器目标来解决问题?谢谢。

1 个解决方案

#1


2  

You still need to bind it to the tbody with "#example tbody", then in your second selector put "tr td", then it should still bind to the td after changing pages.

你仍然需要用“#example tbody”将它绑定到tbody,然后在你的第二个选择器中输入“tr td”,然后在更改页面后它仍然应该绑定到td。

It's the table rows and their children that change, so binding it statically to them is still missing the point, you have to use the optional binding parameter to dive in to the changing elements, giving you access to them even after they change

它是表行和它们的子项发生变化,因此静态地将它们绑定到它们仍然缺少这一点,您必须使用可选的绑定参数来深入了解更改的元素,即使在它们发生更改后也可以访问它们

#1


2  

You still need to bind it to the tbody with "#example tbody", then in your second selector put "tr td", then it should still bind to the td after changing pages.

你仍然需要用“#example tbody”将它绑定到tbody,然后在你的第二个选择器中输入“tr td”,然后在更改页面后它仍然应该绑定到td。

It's the table rows and their children that change, so binding it statically to them is still missing the point, you have to use the optional binding parameter to dive in to the changing elements, giving you access to them even after they change

它是表行和它们的子项发生变化,因此静态地将它们绑定到它们仍然缺少这一点,您必须使用可选的绑定参数来深入了解更改的元素,即使在它们发生更改后也可以访问它们