wenzhixin
Make a feature that effectively implements colgroup tags that are compatible with switchable columns
Description
Maybe there's a way to do this that I'm just ignorant of, but we have a table where columns are switchable. We decided that we wanted groups of columns to have a bold border using a colgroup tag. We have a number of columns where the initial data-visible="false" data-switchable="true", so it's immediately apparent that colgroups (with span=<whatever>) do not update with updates to data-visible via column switching.
So it would be nice if there was an attribute something like data-colgroup-class that would allow one to apply css to a group of columns - and that it would be compatible with column switching.
E.g. The 2px black border would keep up with these columns being switched... template:
<table class="table">
<colgroup span="2" class="class1"></colgroup>
<colgroup span="2" class="class2"></colgroup>
<thead>
<tr>
<th data-sortable="true" data-visible="false" data-field="Animal">Animal</th>
<th data-sortable="true" data-visible="true" data-field="Sample">Sample</th>
<th data-sortable="true" data-visible="true" data-field="Tissue">Tissue</th>
<th data-sortable="true" data-visible="false" data-field="Peak_Group">Peak Group</th>
...
css:
colgroup.class1, colgroup.class2 {
border: 2px solid black;
}
Just FYI, I implemented it myself just now...
document.addEventListener("DOMContentLoaded", function(){
const real_cnt_elem = document.getElementById("realcount")
const real_cnt = real_cnt_elem.innerHTML
const rec_cnt_elem = document.getElementById("recordcount")
rec_cnt_elem.innerHTML = real_cnt
// https://bootstrap-table.com/docs/api/events/
// https://bootstrap-table.com/docs/api/events/#oncolumnswitch
$("#advsrchres").bootstrapTable({
onAll: function() {
updateColumnGroups()
}
})
function updateColumnGroups() {
var identdata_cnt = 0
var datadata_cnt = 0
var metadata_cnt = 0
$("#advsrchres th").each(function() {
if ($(this).is(":visible")) {
if ($(this).hasClass("idgrp")) {
identdata_cnt = identdata_cnt + 1
} else if ($(this).hasClass("datagrp")) {
datadata_cnt = datadata_cnt + 1
} else if ($(this).hasClass("metagrp")) {
metadata_cnt = metadata_cnt + 1
}
}
})
$("#advsrchres .identdata").attr("span", identdata_cnt)
$("#advsrchres .datadata").attr("span", datadata_cnt)
$("#advsrchres .metadata").attr("span", metadata_cnt)
}
})
<table class="table table-hover table-striped table-bordered"
id="advsrchres"
data-toggle="table"
data-buttons-toolbar=".buttons-toolbar"
data-buttons-class="primary"
data-buttons-align="right"
data-filter-control="false"
data-search="false"
data-show-search-clear-button="false"
data-show-multi-sort="true"
data-show-columns="true"
data-show-columns-toggle-all="true"
data-show-fullscreen="false"
data-show-export="false">
<colgroup span="8" class="identdata"></colgroup>
<colgroup span="4" class="datadata"></colgroup>
<colgroup span="12" class="metadata"></colgroup>
<thead>
<tr>
<th data-visible="false" data-field="Animal" class="idgrp">Animal</th>
<th data-visible="true" data-field="Sample" class="idgrp">Sample</th>
<th data-visible="true" data-field="Tissue" class="idgrp">Tissue</th>
<th data-visible="false" data-field="Peak_Group" class="idgrp">Peak Group</th>
<th data-visible="true" data-field="Compound_Name" class="idgrp">Measured<br>Compound</th>
<th data-visible="false" data-field="Compound_Synonym" class="idgrp">Measured<br>Compound<br>Synonym(s)</th>
<th data-visible="true" data-field="Labeled_Element" class="idgrp">Labeled<br>Element</th>
<th data-visible="false" data-field="Peak_Group_Set_Filename" class="idgrp">Peak Group Set Filename</th>
<th data-visible="true" data-field="Total_Abundance" class="datagrp">Total<br>Abundance</th>
<th data-visible="true" data-field="Enrichment_Fraction" class="datagrp">Enrichment<br>Fraction</th>
<th data-visible="true" data-field="Enrichment_Abundance" class="datagrp">Enrichment<br>Abundance</th>
<th data-visible="true" data-field="Normalized_Labeling" class="datagrp">Normalized<br>Labeling</th>
<th data-visible="false" data-field="Formula" class="metagrp">Formula</th>
<th data-visible="true" data-field="Genotype" class="metagrp">Genotype</th>
<th data-visible="false" data-field="Sex" class="metagrp">Sex</th>
<th data-visible="true" data-field="Feeding_Status" class="metagrp">Feeding<br>Status</th>
<th data-visible="false" data-field="Diet" class="metagrp">Diet</th>
<th data-visible="true" data-field="Treatment" class="metagrp">Treatment</th>
<th data-visible="false" data-field="Body_Weight" class="metagrp">Body<br>Weight<br>(g)</th>
<th data-visible="false" data-field="Age" class="metagrp">Age<br>(weeks)</th>
<th data-visible="true" data-field="Tracer_Compound" class="metagrp">Tracer<br>Compound</th>
<th data-visible="false" data-field="Tracer_Infusion_Rate" class="metagrp">Tracer<br>Infusion<br>Rate<br>(ul/min/g)</th>
<th data-visible="false" data-field="Tracer_Infusion_Concentration" class="metagrp">Tracer<br>Infusion<br>Concentration<br>(mM)</th>
<th data-visible="true" data-field="Study" class="metagrp">Study</th>
</tr>
</thead>
colgroup.identdata, colgroup.datadata, colgroup.metadata {
border: 2px solid black;
}
Here's an example:
Columns are switchable in the menu at the top right and the thick black border highlighting the colgroups updates. Right now, I do this via javascript triggered by onAll, which edits the span attribute of the colgroup tags.