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

How to use rowspan and colspan in tbody using datatable.js?

提问by krutssss

Whenever I use <td colspan="x"></td>, I get the following error:

每当我使用时<td colspan="x"></td>，都会出现以下错误：

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined(…)

未捕获的类型错误：无法设置 undefined(...) 的属性“_DT_CellIndex”

Demo

演示

$("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>

It's working properly without DataTables.js, but when we use this structure with datatable.js it is not working. We need above table structure. Does anyone have any idea how we can use this table structure datatable.js?

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

回答by Dirk Bergstrom

You can hack around the lack of colspan support by adding an "invisible" cell for every cell that's eliminated:

您可以通过为每个被消除的单元格添加一个“不可见”单元格来解决缺少 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 doesn't complain, the table renders normally and sorting works (invisible columns sort as the empty string).

DataTables 没有抱怨，表格呈现正常并且排序工作（不可见列排序为空字符串）。

I haven't tried this with rowspan.

我还没有用 rowspan 试过这个。

回答by Gyrocode.com

COLSPAN: Ajax or JavaScript sourced data

COLSPAN：Ajax 或 JavaScript 源数据

Excellent solution provided by Dirk Bergstromonly works with HTML sourced data.

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

It is also possible to use the same idea with Ajax sourced data.

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

You need to use createdRowoption to modify required cells when TRelement is created in table body.

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

For example:

例如：

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');
        }
    }
});

See this examplefor code and demonstration.

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

See jQuery DataTables: COLSPAN in table body TBODY - Ajax dataarticle for more details.

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

ROWSPAN

行跨度

It is possible to emulate ROWSPANattribute using RowsGroupplug-in.

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

To use the plugin, you need to include JavaScript file dataTables.rowsGroup.jsand use rowsGroupoption to indicate indexes of the columns where you want grouping to be applied.

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

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

See this examplefor code and demonstration.

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

See jQuery DataTables: ROWSPAN in table body TBODYarticle for more details.

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

COLSPAN and ROWSPAN

COLSPAN 和 ROWSPAN

It is possible to group cells both vertically and horizontally simultaneously if we combine both workarounds described above.

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

See this examplefor code and demonstration.

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

See jQuery DataTables: COLSPAN in table body TBODY - COLSPAN and ROWSPANarticle for more details.

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

回答by Pupil

Right now, datatables do not support rowspan or colspan to the table body.

现在，数据表不支持到表体的 rowspan 或 colspan。

Reference

参考

But, the possible solution should be

但是，可能的解决方案应该是

DataTables hidden row details example

DataTables 隐藏行详细信息示例

Hope it works.

希望它有效。

回答by Malik Zahid

If you are using scrollX

如果您正在使用 scrollX

<thead>
<tr>
 <th style="width: 20px;"></th>
 <th>column H</td>
 <th>column H</td>
</tr>
</thead>
<tbody>
<tr>
 <td colspan="3">Wide column</td>
 <td style="display: none;"></td>
 <td style="display: none;"></td>
</tr>
<tr>
 <td>123</td>
 <td>Normal column</td>
 <td>Normal column</td>
</tr>
</tbody>

Modified answer of #Dirk_Bergstrom

#Dirk_Bergstrom 的修改答案

回答by puntodamar

Because datatables doesn't support colspan, I usually ended up with using unordered lists (ul) with list-style: none;

因为数据表不支持 colspan，所以我通常最终使用带有 list-style: none; 的无序列表 (ul)。

here is the result

这是结果

回答by Casperon

Refer below link.

请参考以下链接。

fnFakeRowspan

fnFakeRowspan

Also refer the plugin here.

另请参阅此处的插件。

fnFakeRowspan plugin

fnFakeRowspan 插件

Hope this will help you

希望能帮到你

回答by Bharat Geleda

I don't know at what point, but I guess the fnFakeRowspan does not support the current DataTable version.

我不知道什么时候，但我猜 fnFakeRowspan 不支持当前的 DataTable 版本。

For an alternative, checkout RowsGroupplugin.

另一种方法是查看 RowsGroup插件。

Found it pretty easy to implement and works well. Searching works perfectly, ordering doesn't.

发现它很容易实现并且运行良好。搜索工作完美，订购不。

Check herefor an implementation.

检查这里的一个实现。