如何使用datatable.js在tbody中使用rowspan和colspan？

Question

每当我使用时<td colspan="x"></td>,我都会收到以下错误:

未捕获的TypeError:无法设置未定义的属性'_DT_CellIndex'(...)

演示

$("table").DataTable({});

<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>

<table style="width:50%;">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td colspan="2">3 4</td>
      <td colspan="3">4 5 6</td>
    </tr>
  </tbody>
</table>

它在没有DataTables.js的情况下正常工作,但是当我们将这个结构与datatable.js一起使用时,它无法正常工作.我们需要上面的表结构.有谁知道我们如何使用这个表结构datatable.js？

Answer 1

您可以通过为每个已消除的单元格添加"隐形"单元来解决缺少colspan支持的问题:

<tr>
 <td colspan="3">Wide column</td>
 <td style="display: none;"></td>
 <td style="display: none;"></td>
</tr>
<tr>
 <td>Normal column</td>
 <td>Normal column</td>
 <td>Normal column</td>
</tr>

DataTables没有抱怨,表正常呈现并且排序工作(不可见列排序为空字符串).

我没有用rowspan试过这个.

Answer 2

COLSPAN：Ajax 或 JavaScript 源数据

Dirk Bergstrom提供的优秀解决方案仅适用于 HTML 源数据。

也可以对 Ajax 源数据使用相同的想法。

在表格正文中创建元素时，您需要使用createdRow选项来修改所需的单元格TR。

例如：

var table = $('#example').DataTable({
    ajax: 'https://api.myjson.com/bins/qgcu',
    createdRow: function(row, data, dataIndex){
        // If name is "Ashton Cox"
        if(data[0] === 'Ashton Cox'){
            // Add COLSPAN attribute
            $('td:eq(1)', row).attr('colspan', 3);

            // Hide required number of columns
            // next to the cell with COLSPAN attribute
            $('td:eq(2)', row).css('display', 'none');
            $('td:eq(3)', row).css('display', 'none');

            // Update cell data
            this.api().cell($('td:eq(1)', row)).data('N/A');
        }
    }
});

有关代码和演示，请参阅此示例。

有关更多详细信息，请参阅jQuery DataTables: COLSPAN in table body TBODY - Ajax 数据文章。

行跨度

可以ROWSPAN使用RowsGroup插件模拟属性。

要使用该插件，您需要包含 JavaScript 文件dataTables.rowsGroup.js并使用rowsGroup选项来指示要应用分组的列的索引。

var table = $('#example').DataTable({
   'rowsGroup': [2]
});

有关代码和演示，请参阅此示例。

有关更多详细信息，请参阅表体 TBODY文章中的jQuery DataTables：ROWSPAN。

COLSPAN 和 ROWSPAN

如果我们结合上述两种解决方法，则可以同时垂直和水平地对单元格进行分组。

有关代码和演示，请参阅此示例。

有关更多详细信息，请参阅jQuery DataTables: COLSPAN in table body TBODY - COLSPAN 和 ROWSPAN文章。

Answer 3

请参阅下面的链接。

fnFakeRowspan

另请参阅此处的插件。

fnFakeRowspan 插件

希望对你有帮助