第 1 页后无法从 jquery DataTable 表行中获取属性值

Posted 2023-05-09

技术标签:

【中文标题】第 1 页后无法从 jquery DataTable 表行中获取属性值【英文标题】：unable to get attribute value from jquery DataTable table rows after page 1 【发布时间】：2021-11-02 21:33:24 【问题描述】：

当我在 Jquery DataTable 中单击当前表行时，我想获取当前属性值，我实现了我的需要，但 Jquery 代码仅在 DataTable 的第一页上工作，在第一页 jquery 不工作后，无法工作获取当前表格行属性。请查看我的简单代码。 html 和 Jquery 代码。

$(document).ready(function() 
  $('#table_id').DataTable();
);

$(document).ready(function() 
  $('td').on('click', function() 
      var id = $(this).attr('id');
      console.log(id);
  )
);

<html lang="en">
<head>
    <title>Jquery data Table</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.css">

    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js"></script>
</head>

<body>
  <table id="table_id" class="display">
    <thead>
      <tr>
        <th id="one">Column 1</th>
        <th id="two">Column 2</th>
      </tr>
    </thead>
      <tbody>
        <tr>
            <td id="one">Row 1 Data 1</td>
            <td id="two">Row 1 Data 2</td>
        </tr>
        <tr>
            <td id="three">Row 2 Data 1</td>
            <td id="four">Row 2 Data 2</td>
        </tr>
        <tr>
            <td id="three">Row 2 Data 1</td>
            <td id="four">Row 2 Data 2</td>
        </tr>
         <tr>
            <td id="three">Row 2 Data 1</td>
            <td id="four">Row 2 Data 2</td>
        </tr>
         <tr>
            <td id="three">Row 2 Data 1</td>
            <td id="four">Row 2 Data 2</td>
        </tr>
         <tr>
            <td id="three">Row 2 Data 1</td>
            <td id="four">Row 2 Data 2</td>
        </tr>
        <tr>
            <td id="one">Row 1 Data 1</td>
            <td id="two">Row 1 Data 2</td>
        </tr>
        <tr>
            <td id="three">Row 2 Data 1</td>
            <td id="four">Row 2 Data 2</td>
        </tr>
        <tr>
            <td id="one">Row 1 Data 1</td>
            <td id="two">Row 1 Data 2</td>
        </tr>
        <tr>
            <td id="three">Row 2 Data 1</td>
            <td id="four">Row 2 Data 2</td>
        </tr>
        <tr>
            <td id="one">Row 1 Data 1</td>
            <td id="two">Row 1 Data 2</td>
        </tr>
        <tr>
            <td id="three">Row 2 Data 1</td>
            <td id="four">Row 2 Data 2</td>
        </tr>
      </tbody>
  </table>
</body>
</html>

【问题讨论】：

【参考方案1】：

您正在使用 jQuery 事件处理程序：

$('td').on('click', function()  ...

但您已将其附加到不合适的元素（在本例中，附加到 <td> 元素）。这意味着该事件只会附加到那些在第一次创建表格时实际存在的<td> 元素 - 即表格第一页中的<td> 元素。 DataTbles 从第 2 页开始隐藏所有剩余的 <td> 元素。

相反，您可以将 click 事件处理程序附加到合适的 parent 或 ancestor 元素（保证在页面准备好时存在的元素），并且委派到<td>元素当你这样做时：

$('body').on('click', 'td', function()  ...

（在您的具体示例中，您还可以使用table 或tbody 而不是body。）

这是一个“委托事件处理程序”。

请参阅 jQuery on() 文档：

事件处理程序仅绑定到当前选定的元素；它们必须在您的代码调用 .on() 时存在。

和：

当提供选择器时，事件处理程序被称为委托。当事件直接发生在绑定元素上时不会调用处理程序，而只会调用匹配选择器的后代（内部元素）。

这里的关键是，当祖先元素（<body>）添加了事件时，后代元素（<tr>）不需要存在。

演示：

$(document).ready(function() 

  $('#example').DataTable();

  $('table').on('click', 'td', function() 
    var id = $(this).attr('id');
    console.log(id);
   )

 );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display">
        <thead>
            <tr>
                <th id="head_one">Column 1</th>
                <th id="head_two">Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td id="one">Row 01 Data 01</td>
                <td id="two">Row 01 Data 02</td>
            </tr>
            <tr>
                <td id="three">Row 02 Data 01</td>
                <td id="four">Row 02 Data 02</td>
            </tr>
            <tr>
                <td id="five">Row 03 Data 01</td>
                <td id="six">Row 03 Data 02</td>
            </tr>
             <tr>
                <td id="seven">Row 04 Data 01</td>
                <td id="eight">Row 04 Data 02</td>
            </tr>
             <tr>
                <td id="nine">Row 05 Data 01</td>
                <td id="ten">Row 05 Data 02</td>
            </tr>
             <tr>
                <td id="eleven">Row 06 Data 01</td>
                <td id="twelve">Row 06 Data 02</td>
            </tr>
            <tr>
                <td id="thirteen">Row 07 Data 01</td>
                <td id="fourteen">Row 07 Data 02</td>
            </tr>
            <tr>
                <td id="fifteen">Row 08 Data 01</td>
                <td id="sixteen">Row 08 Data 02</td>
            </tr>
            <tr>
                <td id="seventeen">Row 09 Data 01</td>
                <td id="eighteen">Row 09 Data 02</td>
            </tr>
            <tr>
                <td id="nineteen">Row 10 Data 01</td>
                <td id="twenty">Row 10 Data 02</td>
            </tr>
            <tr>
                <td id="twenty-one">Row 11 Data 01</td>
                <td id="twenty-two">Row 11 Data 02</td>
            </tr>
            <tr>
                <td id="twenty-three">Row 12 Data 01</td>
                <td id="twenty-four">Row 12 Data 02</td>
            </tr>
        </tbody>
    </table>

</div>


</body>
</html>

最后注意：请确保您的所有id 属性在每个页面中都是唯一的。您的问题包含大量重复的 id 值。

【讨论】：

以上是关于第 1 页后无法从 jquery DataTable 表行中获取属性值的主要内容，如果未能解决你的问题，请参考以下文章

jquery datables ajax分页后的点击事件无效是怎么回事

打印预览第一页后模态内容被截断

分页后数据表jquery点击事件不起作用

对从数据库中检索到的数据进行分页后，模式窗口不会打开

JQuery Uncaught TypeError：无法读取未定义的属性“重新加载”

jQuery DataTables - 行单击未在第一个以外的页面上注册