响应式数据表 Th Data 属性 Get

Question

我有如下数据表。

<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 所以在移动设备中，最后两列将放入下拉列表中。

这里是datatable默认生成的下拉区域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>

我想在单击响应式下拉菜单 <li> 区域时获得 data-colid 属性。

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

Answer 1

您可以使用 jQuery 委托事件侦听器从属性访问列索引（DataTables 的auto-generated）：

data-dt-column="4"

然后，您可以使用 DataTables API 访问该索引的 table 标题节点 - 最后从标题访问“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>0,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>,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>3,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>2,000</td>
            </tr>
        </tbody>
    </table>

</div>


</body>
</html>

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

$( "#example" )

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

响应式数据表 Th Data 属性 Get

Responsive Datatable Th Data Property Get

javascript

jquery

html-table

datatables