Colspan / rowspan в настройках таблиц данных через Flask / JSON

Question

Мне было интересно, возможно ли сделать сложные заголовки в таблицах данных jQuery, если имена данных / столбцов получаются динамически через JSON?

Вот что я попробовал. Код Python с некоторыми примерами данных:

from flask import Flask, request, jsonify, render_template

import os
import json
import re

from collections import OrderedDict
import pandas as pd


df = pd.DataFrame({"Column 1":["a","b","c","d","f"],"Column 2":["a","b","c","d","e"],"Column 3":["a","b","c","d","e"],\
                   "Column 4":["a","b","c","d","e"],"Column 5":["a","b","c","d","e"]})

@app.route('/')
def index():

     return render_template('index.html')

@app.route('/get_data')
def get_data():

   data = {}

   the_data = df
   data['thedata'] = [OrderedDict(row) for i, row in the_data.iterrows()]

   df_tmp = pd.DataFrame({'data':list(the_data.columns.values),'name':list(the_data.columns.values)})

   data['columns'] = [OrderedDict(row) for i, row in df_tmp.iterrows()]

   return jsonify(data)



# run Flask app
if __name__ == "__main__":
   app.run()

А вот index.html:

 <table id="example" class="table table-striped" style="width:100%">
    <thead><tr></tr></thead>
 </table>

<script>
 function setupData() {

  $.getJSON('/get_data',function(data) {

     if ($.fn.DataTable.isDataTable('#example')) {
         $('#example').DataTable().destroy();
      }

     $('#example tbody').empty();   

     var num_columns = 0;
     $.each(data.columns, function (k, colObj) {
        num_columns = num_columns + 1;
      });

     var the_span = num_columns - 2;

      //$.each(data.columns, function (k, colObj) {
      //     if (k == 0) {
      //         str = '<th rowspan="3">' + " Overall " + colObj.name + '</th>';
      //         $(str).appendTo('#example'+'>thead>tr');
      //     } 
      //});

       var columns_obj = [];
       $.each(data.columns, function (k, colObj) {
          columns_obj[k] = ({data: colObj.name, title: colObj.name});
         });

         var table = $('#example').DataTable({                    
               "pagingType": "full_numbers",
               "paging": true,  
                   "aaSorting": [],
                   "data": data.thedata,
                   "columns": columns_obj
             });
          });

    }; //setup data


   $(window).on("load",setupData);

</script>

Таким образом, столбцы отображаются как «Столбец 1», ..., но я хочу общий заголовок, охватывающий первые 3 столбца. Код, который закомментирован, является моей последней попыткой ввести colspan в таблицу данных - он не сработал, дал мне ошибку, что таблица данных не была определена.

Есть ли умный способ использовать colspan / rowspan, когда набор данных определяется динамически, как это?

Спасибо!