我有以下数据表,其中有一些列分组。
使用响应式插件调整大小时,我会显示这个显示。
然而,2个第一列标题丢失了,这是否可以使用jquery数据表来改变这种行为?
这是我正在使用的html模板
tableVistaEjecucionPendientes: "<div>" +
"<div>" +
"<div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\">" +
"<button type=\"button\" id=\"btnVistaIniciativas\" class=\"btn btn-default\" onclick=\"iniciativasEstrategicas.GetVistaEjecucionPendientes('Iniciativas')\">Iniciativas</button>" +
"<button type=\"button\" id=\"btnVistaResponsables\" class=\"btn btn-default\" onclick=\"iniciativasEstrategicas.GetVistaEjecucionPendientes('Responsables')\">Responsables</button>" +
"</div>" +
"</div>" +
"<div class=\" divTableVistaEjecucionPendientes\">" +
"<table class='table tableVistaEjecucionPendientes' width=\"100%\">" +
"<thead>" +
"<tr>" +
"<th rowspan=\"3\" class=\"all\">" +
"{0}" +
"</th>" +
"<th colspan=\"4\">" +
"En Ejecución" +
"</th>" +
"<th colspan=\"4\">" +
"Pendientes" +
"</th>" +
"</tr>" +
"<tr>" +
"<th colspan=\"2\">" +
"A tiempo" +
"</th>" +
"<th colspan=\"2\">" +
"Desfasadas" +
"</th>" +
"<th colspan=\"2\">" +
"A tiempo" +
"</th>" +
"<th colspan=\"2\">" +
"Atrasadas" +
"</th>" +
"</tr>" +
"<tr>" +
"<th class=\"min-tablet-l\">" +
"Porcentaje" +
"</th>" +
"<th class=\"min-tablet-l\">" +
"Cantidad" +
"</th>" +
"<th class=\"min-tablet-l\">" +
"Porcentaje" +
"</th>" +
"<th class=\"min-tablet-l\">" +
"Cantidad" +
"</th>" +
"<th class=\"min-tablet-l\">" +
"Porcentaje" +
"</th>" +
"<th class=\"min-tablet-l\">" +
"Cantidad" +
"</th>" +
"<th class=\"desktop\">" +
"Porcentaje" +
"</th>" +
"<th class=\"desktop\">" +
"Cantidad" +
"</th>" +
"</tr>" +
"</thead>" +
"<tbody>" +
"{1}" +
"</tbody>" +
"</table>" +
"</div>" +
"</div>",
和thiis我如何使用模板
绘制数据表 function drawVistaEjecucionPendientes(data, filter) {
resetBreadCrumb();
var html = "";
for (var i = 0; i < data.length; i++) {
html += template.rowVistaEjecucionPendientes.replace("{0}", data[i].Nombre)
.replace("{1}", data[i].ATiempoEjecucionPorcentaje != null ? data[i].ATiempoEjecucionPorcentaje + "%" : "0%")
.replace("{2}", data[i].ATiempoEjecucionCantidad)
.replace("{3}", data[i].DesfasadasEjecucionPorcentaje != null ? data[i].DesfasadasEjecucionPorcentaje + "%" : "0%")
.replace("{4}", data[i].DesfasadasEjecucionCantidad)
.replace("{5}", data[i].ATiempoPendientesPorcentaje != null ? data[i].ATiempoPendientesPorcentaje + "%" : "0%")
.replace("{6}", data[i].ATiempoPendientesCantidad)
.replace("{7}", data[i].DesfasadasPendientesPorcentaje != null ? data[i].DesfasadasPendientesPorcentaje + "%" : "0%")
.replace("{8}", data[i].DesfasadasPendientesCantidad);
}
$("#tab_iniciativasTiempos").html("<br>" + "<br>" + template.tableVistaEjecucionPendientes.replace("{0}", filter).replace("{1}", html));
$(".tableVistaEjecucionPendientes").DataTable({
responsive: {
details: {
type: "inline"
}
}
});
}