时间戳

首页 > 解决方案 > 响应式数据表 Th 数据属性获取

javascript - 响应式数据表 Th 数据属性获取

问题描述

我有如下数据表。

<table>
<thead>
<tr>
  <th data-colid="id">ID</th>
  <th data-colid="name">Name</th>
  <th data-colid="email">Email</th>
  <th data-colid="address">Address</th>
  <th data-colid="action">Action</th>
</tr>
</thead>
</table>

我responsive:true在移动设备中使用过，最后两列将被放入下拉列表中。

这是数据表默认生成的下拉区域 HTML 部分。

<ul class="dtr-details">
 <li data-dt-row="0" data-dt-column="3">
   <span class="dtr-title">Address</span> 
   <span class="dtr-data">Address data Here</span>
 </li>
 <li data-dt-row="0" data-dt-column="4">
   <span class="dtr-title">Action</span> 
   <span class="dtr-data">Action Data Here</span>
 </li>
</ul>

data-colid当我单击响应式下拉<li>区域时，我想获得财产。

data-dt-column这个属性对我没有帮助。

标签： javascriptjqueryhtml-tabledatatables

解决方案

您可以使用 jQuery 委派事件侦听器从以下属性访问列索引（由 DataTables 自动生成）：

data-dt-column="4"

使用它，您可以使用 DataTables API 访问该索引的表标题节点 - 最后从标题访问“data-colid”属性：

$(document).ready(function() {

  $('#example').DataTable( {
    responsive: true
  } );

$( "#example" ).on( "click", "tbody tr td ul li", function() {
  var colIdx =  $( this ).attr("data-dt-column");
  var headingNode = $('#example').DataTable().column( colIdx ).header();
  //console.log( $(headingNode).html() ); // the title text
  console.log( $(headingNode).attr("data-colid") ); // the property in the question
});

} );
<!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">

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css"/>
  <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>

</head>

<body>

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

    <table id="example" class="display dataTable nowrap cell-border" style="width:100%">
        <thead>
            <tr>
                <th data-colid="name">Name</th>
                <th data-colid="department">Department</th>
                <th data-colid="office">Office</th>
                <th data-colid="age">Age</th>
                <th data-colid="start_date">Start Date</th>
                <th data-colid="salary">Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>2011/01/25</td>
                <td>$112,000</td>
            </tr>
        </tbody>
    </table>

</div>


</body>
</html>

请注意，事件侦听器需要附加到创建页面时保证存在于 DOM 中的元素 - 所以我使用表 ID 作为选择器：

$( "#example" )

然后我使用"tbody tr td ul li"选择器来定位专门生成的<li>元素。

推荐阅读