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访问该列中的数据（例如添加另一个选定列之后的列或删除所选列并重新加载表，计算列中数据的统计信息等。？）

Answer 1

这可以通过index()的使用来完成。请检查以下代码段以突出显示您想要的任何列。

＆＃13;

$("#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();
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

使用选择扩展程序，可以选择列。

<强> 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();      
   }
});

请参阅this example以获取代码和演示。

有关更多信息和示例，请参阅jQuery DataTables: How to select columns。

Answer 3

动态添加或删除列（而不是更改可见性）is not supported by DataTables。如前所述，您可以尝试destroy()旧的，并创建并初始化一个新表。

在jQuery DataTables

3 个答案: