我可以更改响应式数据表插件的呈现

时间:2015-09-15 22:07:17

标签: javascript jquery datatable datatables

我有以下数据表,其中有一些列分组。

enter image description here

使用响应式插件调整大小时,我会显示这个显示。

enter image description here

然而,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"
                }
            }
        });
    } 

0 个答案:

没有答案