数据表-导出字段输入内外的值以及选择字段的值

时间:2018-10-23 18:52:01

标签: javascript jquery html css datatables

让我们看看谁能帮助我解决这个问题。

我有几个带有JS datatables插件(https://datatables.net/)的表

我的问题是在PDF和Excel中导出数据。

我无法将输入或选择字段内的值导出到PDF或Excel(仅所选值)

我有几个表,其中有作为输入的列,另一列选择和另一列简单文本。如果您可以使用此插件,我想知道如何将所有这些值导出到Excel或PDF。到目前为止,我还没有得到它。

Table with simple text and inputs

以下是我的代码摘录,用于构建数据表:

var tabla_table = $('#table').DataTable({
    dom: 'Blfrtip',
    buttons: [{
            extend: 'collection',
            text: "<i class='fa fa-cog'></i>",
            buttons: [
              {
                  extend: 'pdfHtml5',
                  orientation: 'landscape',
                  customize: function ( doc ) {
                    doc.defaultStyle.fontSize = 10;  
                  },
                  exportOptions: {
                    columns: ':visible',
                    columns: ':not(.no-print)',
                  /*  format: {
                    body: function ( data, row, column, node, sValue, nTr, type ) {
                      //
                      //check if type is input using jquery
                    //  console.log('data val: ' + $(data).val() );
                      console.log('data: ' + data );
                      console.log('row: ' + row );
                      console.log('nTr: ' + nTr );
                      console.log('node: ' + node );
                      console.log('type: ' + type );
                      /*if( $(data).is("input") ){
                        return data;     
                      }else{
                        return $(data).val();  

                      }

                      }
                    }*/
                    //columns: [4, 8, 9, 10, 11, 12, 13, 14]
                  }
              },{
                  extend: 'excel',
                  orientation: 'landscape',
                  exportOptions: {
                    columns: ':visible',
                    columns: ':not(.no-print)',
                    format: {
                    body: function ( data, row, column, node ) {
                      //
                      //check if type is input using jquery
                      //console.log('PRUEBA: ' + $(data).val() );
                      if( $(data).is("input") ){
                        return data;     
                      }else{
                        return $(data).val();  

                      }

                      }
                    }
                    //columns: [4, 8, 9, 10, 11, 12, 13, 14]
                  }
                },{
                  text: 'Imprimir',
                  extend: 'print',
                  orientation: 'landscape',

                  exportOptions: {
                    columns: ':visible',
                    columns: ':not(.no-print)'
                  }
                },
               /* 'colvis'*/

            ]
        }

    ],.....

输出为PDF:

OUTPUT in PDF

如果可以解决,我希望我能提供足够的信息来解决此问题。而且,如果需要更多信息,请随时告诉我。

非常感谢您

3 个答案:

答案 0 :(得分:0)

确定,在您的按钮中

                        exportOptions: {
                        orthogonal: 'export',
                    }

在您的列中:

            render: function (data, type, row) {
            return type === 'export' ? row.Descripcion: "";
        }

答案 1 :(得分:0)

我最近一直在努力解决这个问题,终于找到了解决方案。我会尝试使其更加详细。

这是一个检查导出的节点是否为节点的函数。在这种情况下,它将返回input.value-否则仅返回数据:

//function for DataTable data export to export <input>.value
var buttonCommon = {
    exportOptions: {
        format: {
            body: function ( data, row, column, node ) {
                //check if type is input using jquery
                return node.firstChild.tagName === "INPUT" ?
                        node.firstElementChild.value :
                        data;

            }
        }
    }
};

现在,在定义此功能之后,我们将其用于扩展按钮:

    buttons: [
        $.extend( true, {}, buttonCommon, {
            extend: 'copyHtml5'
        } ),
        $.extend( true, {}, buttonCommon, {
            extend: 'excelHtml5'
        } ),
        $.extend( true, {}, buttonCommon, {
            extend: 'pdfHtml5'
        } ),
        $.extend( true, {}, buttonCommon, {
            extend: 'csvHtml5'
        } )
        ],

答案 2 :(得分:0)

var buttonCommon = {
    exportOptions: {
        format: {
            body: function(data, column, row, node) {
                if (row == 1) {
                    return $(data).is("div") ? $(data).text() : data
                }
                else  if (row == 4) {
                    return $(data).is("select") ? $(data).val() : data
                }
                else {
                    return $(data).is("input") ? $(data).val() : data
                }
            }
        }
    }
};
$(document).ready(function() {
    $('#Goal_tables').DataTable({
        dom: 'Bfrtip',
        "paging": !1,
        buttons: [$.extend(!0, {}, buttonCommon, {
            extend: "excel"
        })]
    })
});