带有复选框的 JQuery DataTable 选择行

Posted 2023-02-21

【中文标题】带有复选框的 JQuery DataTable 选择行

【英文标题】：JQuery DataTable select row with checkbox

【发布时间】：2017-05-15 07:39:53

【问题描述】：

我正在 ReactJS 应用程序中渲染一个 JQuery DataTable，并且该表绘制得很好。但是，当我尝试绘制复选框时，它们不会被绘制。我还尝试对要选择的两行进行硬编码，然后得到一个

TypeError: table.columns(...).select 不是函数。

import 'datatables.net';
import dt from 'datatables.net-bs';
import 'datatables.net-select';

const table = container.find('.dataTable').DataTable(
  columnDefs: [
    orderable: false,
    className: 'select-checkbox',
    targets: 0,
  ],
  select: 
    style: 'os',
    selector: 'td:first-child',
  ,
  order: [[1, 'asc']],
);

table.columns([1, 2]).select();

一旦我使用复选框进行行选择，我的下一个目标是通过复选框进行列选择（即标题上方的复选框行，选择时下方的列突出显示）。

知道为什么复选框行渲染可能不起作用吗？

【参考方案1】：

您很可能忘记为 Select 扩展添加 CSS/JS 文件。除了 jQuery DataTables 文件之外，还需要包含它。

使用 Download builder 并包含 Select 扩展或 download individual files 用于 Select 扩展。

还可以查看jQuery DataTables Checkboxes 扩展，它简化了由 jQuery DataTables 支持的表格中复选框的处理。