jQuery 如何在jquery.datatables中显示复选框

在本文中，我们将介绍如何使用jQuery在jquery.datatables中显示复选框。

1. 使用内置的插件

jquery.datatables是一个功能强大的表格插件，它提供了许多内置的功能和插件，其中之一就是复选框功能。在使用jquery.datatables前，我们需要首先引入jQuery库和jquery.datatables插件。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

接下来，我们可以通过以下代码启用jquery.datatables的复选框功能：

$(document).ready(function() {
  $('#example').DataTable({
    columnDefs: [{
      orderable: false,
      className: 'select-checkbox',
      targets: 0
    }],
    select: {
      style: 'multi',
      selector: 'td:first-child'
    },
    order: [[ 1, 'asc' ]]
  });
});

上述代码中的#example是我们要应用jquery.datatables插件的表格的id。通过设置columnDefs属性，我们将第一列设为复选框列。select属性被用来指定复选框的样式和选择器。最后，通过设置order属性，我们可以定义表格默认的排序方式。

2. 自定义复选框样式

除了使用内置的复选框功能外，我们还可以自定义复选框的样式。下面是一个示例代码：

$(document).ready(function() {
  $('#example').DataTable({
    columnDefs: [{
      orderable: false,
      className: 'custom-checkbox',
      targets: 0
    }],
    select: {
      style: 'multi',
      selector: 'td:first-child',
      blurable: true
    },
    order: [[ 1, 'asc' ]]
  });
});

在上述代码中，我们通过设置className属性为custom-checkbox来指定复选框的自定义样式。另外，通过设置blurable: true，我们可以在点击其他地方时取消选择。

然后，在CSS文件中，我们可以添加以下样式规则：

.custom-checkbox::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('checkbox.png') no-repeat;
  margin-right: 5px;
}
.custom-checkbox.select-checkbox::before {
  background: url('checkbox-selected.png') no-repeat;
}

上述代码中的checkbox.png和checkbox-selected.png是复选框的图标文件，可以根据自己的需求进行替换。

3. 获取选中的复选框值

在某些情况下，我们可能需要获取用户选择的复选框值。我们可以通过以下代码来实现：

$(document).ready(function() {
  var table = $('#example').DataTable({
    columnDefs: [{
      orderable: false,
      className: 'select-checkbox',
      targets: 0
    }],
    select: {
      style: 'multi',
      selector: 'td:first-child'
    },
    order: [[ 1, 'asc' ]]
  });

  $('#btn-submit').click(function() {
    var selectedData = table.column(0).checkboxes.selected();
    console.log(selectedData);
    // 执行其他操作
  });
});

在上述代码中，我们通过table.column(0)来获取第一列的复选框列，并使用checkboxes.selected()方法获取选中的复选框值。然后，我们可以进一步处理这些值，例如提交到服务器或执行其他操作。