如何使用 Jquery / DataTables 根據單擊的元素獲取表的列名

Question

我有一個 Jquery數據表，在頁腳我添加了一個引導選擇來過濾我的數據。

Inside the dropdown select, I added a button ' Clear filter ' When there is/are option(s) selected.

當我單擊該按鈕時，我需要獲取 header 名稱。

因此，在我的示例中，如果我單擊“ Position ”列中的“清除過濾器”按鈕，我應該提醒“ Position ”。 但它始終顯示最后一列名稱。

任何建議請我在我的代碼中缺少什么？ 我添加了對我所做步驟的詳細說明。 非常感謝。

 $(document).ready(function() { var table = $('#example').DataTable({ searching: false, info: false, paging: false, initComplete: function() { this.api().columns().every(function() { //add select to each column footer var column = this; var select = $('<select class="form-control show-tick" data-container="body" data-header="Select option(s)" data-actions-box="true" data-live-search="true" title="All" data-selected-text-format="count > 0" multiple></select>').appendTo($(column.footer()).empty()); // populate the select options with unique values of current column column.data().unique().sort().each(function(d, j) { select.append('<option value="' + d + '">' + d + '</option>'); }); }); //apply bootstrap selectpicker $("select").selectpicker(); //add 'clear filter' button below the search box in the dropdown select var buttonPosition = $('.bs-searchbox'); $('<div class="text-center"><button type="button" class="btn btn-sm btn-light clearButton">Clear filter</button></div>').appendTo(buttonPosition); // $(".clearButton").on("click", function(){ //check the closest <th> in the footer to the clicked button var tableFoot =$(this).closest('tfoot').find('th'); //console.log(tableFoot); //we know the position of the button in which <th> on the footer and from it we will check the column name on header alert('Column:'+$('table thead tr th').eq(tableFoot.index()).html().trim()); }); } }); });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet"> <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script> <table id="example" class="table table-bordered table-hover nowrap" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> </tr> </thead> <tbody> <tr> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> </tr> <tr> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> </tr> <tr> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> </tr> </tbody> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> </tr> </tfoot> </table>

Answer 1

問題是由於 Bootstrap select 不是它顯示的表格的一部分，而是連接到 HTML 主體並絕對定位在表格單元格上。

有一個配置選項container: string | false container: string | false可用於.selectpicker()調用，因此您可以做的是在列上設置 ID 並設置選項以在此元素中呈現。

    let cf = $(column.footer()).empty();
    var select = $('<select class="form-control show-tick" data-container="body" data-header="Select option(s)" data-actions-box="true" data-live-search="true" title="All" data-selected-text-format="count > 0" multiple></select>')
      .appendTo(cf).selectpicker({container: '#ci'+ci});
      cf.attr('id',  'ci' + ci).data('col', ci);

在你清晰的例行程序中：

  $(".clearButton").on("click", function() {
    var col = $(this).closest('th').data('col');
    alert('Column:' + $('table thead tr th').eq(col).html().trim());
  });

擺弄這個解決方案。

---

另一種選擇是創建 object 並引用循環中的當前列索引，並顯示 select 通過show.bs.select事件設置列索引：

    let obj= { ci: ci};
    var select = $('<select id="ci' + ci + '" class="form-control show-tick" data-container="body" data-header="Select option(s)" data-actions-box="true" data-live-search="true" title="All" data-selected-text-format="count > 0" multiple></select>')
      .appendTo($(column.footer()).empty()).selectpicker().on('show.bs.select',  function() {
        window.currentSelect = obj.ci;
      });

在明確的例程中：

  $(".clearButton").on("click", function() {
    alert('Column:' + $('table thead tr th').eq(window.currentSelect).html().trim());
  });

擺弄替代解決方案。