jQuery DataTables中选择列

Question

在Datatables API注释中，您可以切换列可见性：https://datatables.net/extensions/buttons/examples/column_visibility/columns.html：

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'colvis',
                columns: ':not(:first-child)'
            }
        ]
    } );
} );

但是有没有一种像选择行一样通过鼠标单击选择列的方法 - 即允许用户通过高亮显示选中列来让用户知道该列已被选择 - 并从javascript中访问该列的数据（例如在选定列之后添加另一列或删除选定列并重新加载表格，计算列中数据的统计数据等等...）？

- Don Smythe

Answer 1

使用具有选择列功能的Select扩展。 HTML

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
        <tr>
            <th><input type="checkbox"></th>
            <th><input type="checkbox"></th>
            <th><input type="checkbox"></th>
            <th><input type="checkbox"></th>
            <th><input type="checkbox"></th>
            <th><input type="checkbox"></th>
        </tr>
    </thead>

    <!-- skipped -->

</table>

JavaScript

var table = $('#example').DataTable({
   'orderCellsTop': true,
   'select': 'multi'
});

$('#example').on('change', 'thead input[type="checkbox"]', function(){
   var colIdx = $(this).closest('th').index();
   if(this.checked){
      table.column(colIdx).select();
   } else {
      table.column(colIdx).deselect();      
   }
});

查看此示例获取代码和演示。

有关更多信息和示例，请查看jQuery DataTables：如何选择列。

- Gyrocode.com

Answer 2

使用index()可以实现此操作。检查以下代码片段以突出显示您想要的任何列。

$("#t").dataTable();
$("th").on("click", function() {
  var index = $(this).index();
  if ($(this).hasClass("highlighted")) {
    $(this).removeClass("highlighted");
    $("tr").find("td.highlighted").each(function(k, v) {
      if ($(v).index() == index) {
        $(v).removeClass("highlighted");
        console.log("Removed highlight in table cell with value \"" + $(v).text() + "\"");
      }
    });
  } else {
    $(this).addClass("highlighted");
    $("tr").find("td").each(function(k, v) {
      if ($(v).index() == index) {
        $(v).addClass("highlighted");
        console.log("Added highlight in table cell with value \"" + $(v).text() + "\"");
      }
    });
  }
  console.log();
});

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

.highlighted {
background:yellow;
}

<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<table id="t">
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </tbody>
</table>

- user2560539

---

请原谅我是否误解了功能。似乎没有办法取消链接 - 高亮显示列并对列进行排序？ - Rohit Dhankar

Answer 3

动态添加或删除列（与更改可见性不同）不受DataTables支持。 如上所述，您可以尝试destroy（）旧表并创建和初始化新表。

- ax.

---

我想要像选择行一样选择列 - 例如点击列顶部并将其突出显示，或者在列顶部单击复选框以此方式选择该列（通过突出整个列来让用户知道已选择该列）。 - Don Smythe