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

Question

Whenever I use , I get the following error:

Uncaught TypeError: Cannot set property \'_DT_CellIndex\'

Answer 1

COLSPAN: Ajax or JavaScript sourced data

Excellent solution provided by Dirk Bergstrom only works with HTML sourced data.

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

You need to use createdRow option to modify required cells when TR element is created in table body.

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 example for code and demonstration.

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

ROWSPAN

It is possible to emulate ROWSPAN attribute using RowsGroup plug-in.

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

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

See this example for code and demonstration.

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

COLSPAN and ROWSPAN

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

See this example for code and demonstration.

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