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

【问题标题】：Responsive datatable with first column as checkbox第一列作为复选框的响应式数据表
【发布时间】：2017-09-18 14:04:54
【问题描述】：

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

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

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

【问题讨论】：

你能分享你的代码吗？
var oTable = $('#example').DataTable({ "processing": true, "bPaginate": false, "serverSide": true, "searching": true, "bAutoWidth":错误，响应：{详细信息：{类型：'column'，目标：0}}，“ajax”：{url：location.origin+“/hello/rest”+“/login/getList”，“type”：“POST ", "error" : function(xhr, error, throw) { handleServerErrorResponseForAdmin(throw); } }, //
"columns" : [{ "data" : "empty" }, { "data" : "empty" }, { "data" : "paymentid" }, { "data" : "uploadDate " }, { "data" : "emailsubject" }, { "data" : "closingDate" }, { "data" : "pstatus" } ], initComplete: function() { }, columnDefs: [ {
orderable: false, targets: 0, className: 'control', },{ orderable: false, className: 'select-checkbox', targets: 1 } ], select: { style: 'os ', 选择器: 'td:first-child' }, dom: 'Bfrtip', 选择: true ,

标签： jquery datatables datatables-1.10

【解决方案1】：

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

您可以向表中的每一行添加一个额外的 <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>$3,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>$5,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>$4,800</td>
      </tr>
    </tbody>

【讨论】：

谢谢普拉尚特。有效。非常感谢您的快速帮助。我看到第一列图标被剪切（扩展控制图标）。你能告诉我如何使它正确对齐。
您可以在末尾使用复选框 td 轻松右对齐
我可以跟进吗？使用 DataTables Editor 时似乎不起作用。
@LekzFlores，你用编辑器试过了吗？如果是这样，您遇到的错误是什么？您可以发送live.datatables.net的小提琴链接

【解决方案2】：

如果您想要使用第一列（复选框）作为行选择器，但响应模式导致您出现问题，因为复选框和“+”按钮（响应）都被按下，那么您可以做的是发送第一个空白列。只需在您的中再添加一个，在您的 . 中添加一个（空白）。

【讨论】：