第一列作为复选框的响应数据表

Question

我有一个数据表，其中第一列作为行选择的复选框。

columnDefs: [{
  orderable: false,
  className: 'select-checkbox',
  targets: 0
}]

试图使数据表响应，但当我尝试时，第一列中的复选框被替换为可扩展图标。谁能告诉我如何在同一列中保留两个图标（复选框和扩展）。

Answer 1

我认为您正试图将同一列用于两个不同的事物 - 响应式控件 和 select 复选框。这是行不通的，因为点击事件会触发两者。

您可以向 table 中的每一行添加一个额外的 <td> 元素，这样它就可以定位到该行而不是具有实际内容的列。

$(document).ready(function() {
  var table = $('#example').DataTable({
    select: {
      style: 'multi',
      selector: '.select-checkbox',
      items: 'row',
    },
    responsive: {
      details: {
        type: 'column',
        target: 0
      }
    },
    columnDefs: [{
        targets: 0,
        className: 'control'
      },
      {
        targets: 1,
        className: 'select-checkbox'
      },
      {
        targets: [0, 1],
        orderable: false
      }
    ],
    order: [2, 'asc']
  });
});

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css" />

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>

<div class="container">
  <table id="example" class="display nowrap" width="100%">
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>

    <tfoot>
      <tr>
        <th></th>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </tfoot>

    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>,120</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td>Garrett Winters</td>
        <td>Director</td>
        <td>Edinburgh</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>,300</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td>Ashton Cox</td>
        <td>Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>,800</td>
      </tr>
    </tbody>

Answer 2

如果您想要使用第一列（复选框）作为行选择器，但由于复选框和“+”按钮（响应）都被按下，响应模式给您带来了问题，那么您可以做的是发送第一个空白列。只需在您的 .

中再添加一个，在您的 .

中添加一个（空白）

第一列作为复选框的响应数据表

Responsive datatable with first column as checkbox

jquery

datatables

datatables-1.10