如何在分组数据表中创建可折叠标头？

Question

假设我有一个具有这种结构的城市列表（每个城市）：

{
   "country": "england",
   "city": "london"
},
{
   "country": "england",
   "city": "watford"
},
{
   "country": "usa", 
   "city": "new york"
}
{
   "country": "usa", 
   "city": "florida"
}

表的html包含以下结构：

<table id="cities">
<thead>
    <tr>
        <th>Country</th>
        <th>City</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>england</td>
        <td>london</td>
    </tr>
    <tr>
        <td>england</td>
        <td>watford</td>
    </tr> 
    <tr>
        <td>usa</td>
        <td>new york</td>
    </tr>
    <tr>
        <td>usa</td>
        <td>florida</td>
    </tr> 
</tbody>
</table>

我创建了一个代码，可帮助我实现this的结果。如您所见，我已使用以下代码启用了分组：

$(document).ready(function () {
    $("#cities").DataTable({
        drawCallback: function ()
        {
            var api = this.api();
            var rows = api.rows({ page: 'current' }).nodes();
            var last = null;

            api.column(0, { page: 'current' }).data().each(function (group, i)
            {
                console.log("=> " + group);
                if (last !== group)
                {
                    $(rows).eq(i).before(
                        '<tr class="group"><td colspan= "8" style="background-color: yellow">'
                        + 'Country' + group + '</td></tr>');

                    last = group;
                }
            });
        }
    });
});

现在，我想通过引导程序应用类collapse provided，并且我希望每次用户单击容器“包含国家/地区的标头”时，该容器的分组项目都会展开或崩溃。

如何获得相似的结果？