首页 > 解决方案 > 如何将datatable javaScript数据导出到eccel,不导出隐藏列,但不影响隐藏响应数据?

问题描述

除了具有主动响应功能外,我还有一个数据表,通过我显示和/或隐藏列的检查形式;这使得一些数据在第一列中的 + 下拉菜单中隐藏。问题是在导出数据表时,它会导出所有数据,甚至是隐藏的数据。如果我在导出按钮的配置中添加 exportOptions: {columns: ': visible'}} 只导出表的可见数据,它不会导出响应隐藏的数据,因为我可以导出所有活动数据数据表,也就是说只有响应者才能看到和隐藏?

实现是使用数据表和 jquery

/*With this function I create the table*/
function reloadtable(datos, tabla, alertIS, jqform) {
    tablaret = $('#' + tabla).DataTable({
        destroy: true,
        data: datos,
        scrollCollapse: true,
        autoWidth: false,
        responsive: true,

        columnDefs: [

            {
                "title": "Ejecución",
                "targets": 0,
                "createdCell": function(td, cellData, rowData, row, col) {}
            },
            {
                "title": "Estado",
                "targets": 1,
                "createdCell": function(td, cellData, rowData, row, col) {
                    if (alertIS == true) {
                        let background = "";
                        let paso;
                        if (cellData == "Finalizado" || cellData == "Cancelada" || cellData == "En Proceso") {
                            switch (cellData) {
                                case "Finalizado":
                                    background = '#004DFF';
                                    break;
                                case "Cancelada":
                                    background = '#BABABA';
                                    break;
                                case "En Proceso":
                                    background = '#FFAA00';
                                    break;
                                default:
                                    background = '#FFFFFF';
                                    break;
                            }

                        } else {
                            console.log(rowData["ejecucion"]);
                            console.log();

                            background = evalfechaByColor(rowData["ejecucion"], rowData["TareaRangoFin"]);
                            if (background != "#000000" && cellData == "Sin Asignar") {
                                background = "#0008FF"
                            }
                        }
                        let color = background == "#000000" ? "#ffffff" : "#000000"
                        $(td).css('border', 'solid 5px #FFFFFF');
                        $(td).css('border-radius', '1rem');
                        $(td).css('color', color);
                        $(td).css('background', background);
                    }
                }
            },
            {
                "title": "Cod tarea",
                "targets": 2,
            }, {
                "title": "Usuario de campo",
                "targets": 3,
            },
            {
                "title": "Prioridad",
                "targets": 4,
            },
            {
                "title": "Cliente",
                "targets": 5,
            },

            {
                "title": "Doc cliente",
                "targets": 6,
            },
            {
                "title": "Dirección",
                "targets": 7,
            },
            {
                "title": "Teléfono 1",
                "targets": 8,
            },
            {
                "title": "Teléfono 2",
                "targets": 9,
            },
            {
                "title": "Sede",
                "targets": 10,
            },
            {
                "title": "Campaña",
                "targets": 11,
            },
            {
                "title": "Zona",
                "targets": 12,
            },
            {
                "title": "Ajendamientos",
                "targets": 13,
            },
            {
                "title": "Tipo tarea",
                "targets": 14,
            },
            {
                "title": "Tipo de servicio",
                "targets": 15,
            },
            {
                "title": "Novedad",
                "targets": 16,
            }, {
                "title": "Tipo vehoculo",
                "targets": 17,
            },
            {
                "title": "Peso",
                "targets": 18,
            },
            {
                "title": "Cantidad",
                "targets": 19,
            },
            {
                "title": "Volumen",
                "targets": 20,
            },
            {
                "title": "Creación",
                "targets": 21,
            },
            {
                "title": "Inicio recorrido",
                "targets": 22,
            },
            {
                "title": "Fin recorrido",
                "targets": 23,
            },
            {
                "title": "Inicio de tarea",
                "targets": 24,
            },
            {
                "title": "fion de tarea",
                "targets": 25,
            },
            {
                "title": "Inicio de rango",
                "targets": 26,
            },
            {
                "title": "Fin de rango",
                "targets": 27,
            },
            {
                "title": "Tim Est de tarea",
                "targets": 28,
            },
            {
                "title": "Tiempo de tarea",
                "targets": 29,
            },
            {
                "title": "Tim Est Recorrido",
                "targets": 30,
            },
            {
                "title": "Tiempo recorrido",
                "targets": 31,
            },
            {
                "title": "Orden",
                "targets": 32,
            },
            {
                "title": "calificaíon",
                "targets": 33,
            },
            {
                "title": "Comentarios calificacíon",
                "targets": 34,
            },
            {
                "title": "notas",
                "targets": 35,
            },
            {
                "title": "Opciones",
                "targets": 36,
            }
        ],
        columns: [{
                data: "ejecucion"
            },
            {
                data: 'estado'
            },
            {
                data: 'codetarea'
            },
            {
                data: 'nameDriver'
            },
            {
                data: 'prioridad'
            },
            {
                data: 'nomClient'
            },
            {
                data: 'identiClient'
            },
            {
                data: 'direction'
            },
            {
                data: 'tel1'
            },
            {
                data: 'tel2'
            },
            {
                data: 'sede'
            },
            {
                data: 'campaña'
            },
            {
                data: 'zona'
            },
            {
                data: 'ajendamientos'
            },
            {
                data: 'tipoTarea'
            },
            {
                data: 'typeService'
            },
            {
                data: 'prsNoved'
            },
            {
                data: 'tipvehi'
            },
            {
                data: 'peso'
            },
            {
                data: 'piezaCant'
            },
            {
                data: 'volumen'
            },
            {
                data: 'creation'
            },
            {
                data: 'RecHoraIn'
            },
            {
                data: 'RecHoraFin'
            },
            {
                data: 'TareaHoraIn'
            },
            {
                data: 'TareaHoraFin'
            },
            {
                data: 'TareaRangoIn'
            },
            {
                data: 'TareaRangoFin'
            },
            {
                data: 'TareaTiempoEst'
            },
            {
                data: 'TareaTiempoReal'
            },
            {
                data: 'RecTiempoEst'
            },
            {
                data: 'RecTiempoReal'
            },
            {
                data: 'idRel'
            },
            {
                data: 'rate'
            },
            {
                data: 'rateObs'
            },
            {
                data: 'notas'
            },
            {
                "mData": null,
                "bSortable": false,
                "mRender": function(data, type, full) {
                    let obsi = "";
                    if (alertIS == true) {
                        obsi = `
                    <button id='delet' class='btn btn-info mx-1' onclick='info("` + full['key'] + `")'><i class='fa fa-search'></i></button>
                    <button id='infocierre' class='btn btn-success mx-1' onclick='ifoClose("` + full['key'] + `")'><i class='fas fa-clipboard-check'></i></button>
                    `
                    }
                    return obsi;;
                }
            }

        ],

        "lengthMenu": [
            [10, 25, 50, -1],
            [10, 25, 50, "Todos"]
        ],
        "language": configLanguafetable,
        dom: "<'d-block d-md-flex justify-content-md-around'<'my-2'l><B><f>>" + "rtip",
        buttons: [{
                extend: 'copy',
                text: "Copiar",
                exportOptions: {
                    // columns: ':visible'
                }
            },
            {
                extend: 'excel',
                exportOptions: {
                    //columns: ':visible'
                }
            },
            {
                extend: 'csv',
                exportOptions: {
                    // columns: ':visible'
                }
            },
            {
                extend: 'pdf',
                exportOptions: {
                    // columns: ':visible'
                }
            },
            {
                extend: 'print',
                exportOptions: {
                    // columns: ':visible'
                }
            },

        ],


    });


    return tablaret;
}
//With this function I create the form
function CreaCtlVosibletable(form) {
    let DataTar = ["Todos",
        "Ejecución", "Estado", "Cod tarea", "Usuario de campo", "Prioridad", "Cliente", "Doc cliente", "Dirección", "Teléfono 1", "Teléfono 2", "Sede", "Campaña", "Zona", "Ajendamientos", "Tipo tarea", "Tipo de servicio", "Novedad", "Tipo vehoculo", "Peso", "Cantidad", "Volumen", "Creación", "Inicio recorrido", "Fin recorrido", "Inicio de tarea", "fion de tarea", "Inicio de rango", "Fin de rango", "Tim Est de tarea", "Tiempo de tarea", "Tim Est Recorrido", "Tiempo recorrido", "Orden", "calificaíon", "Comentarios calificacíon",
        "Obciones"
    ]
    DataTar.forEach((element1, index) => {
        activo = index < 7 && index > 0 ? "checked" : ""
        let itemName = element1.replace(/\b\w/g, l => l.toUpperCase()).replace(/ /gi, "")


        if (index < (DataTar.length)) {
            $("#" + form).append(`
            <div class="btn-group" >
                <label class="btn btn-primary">
                    <input type="checkbox" name="` + itemName + `" id="` + itemName + `" ` + activo + ` autocomplete="off">
                    ` + element1 + `
                </label>
            </div>
       `);
        }
    })
}
//with this hidden function and I show columns
function chageVicibleTable(tabla, jqform) {
    $("#" + jqform + " input").each(function(index, element) {
        if (element.id != "Todos" && index != element.id != "Opciones") {
            let active = $("#" + this.id).prop('checked') == true || $("#Todos").prop('checked') == true ? true : false;
            tabla.columns(index - 1).visible(active);
        }
enter code here
    })

    tabla.columns.adjust().draw();

}

标签: javascriptdatatablesdatatables-1.10

解决方案


推荐阅读