javascript - Datatables - Export values inside and outside the field input and value of the select field

Question

let's see who can help me solve this problem.

I have several tables with the JS datatables plugin (https://datatables.net/)

My problem is in exporting the data in PDF and Excel.

I can not export to PDF or Excel the values that are inside the input or select fields (only the selected value)

I have several tables where there are columns that are inputs, another column selects and another column simple text. I would like to know how I can do to export all these values to Excel or PDF, if you can with this plugin. So far I have not been able to get it.

Here a extract of my code to build the datatable:

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'*/

            ]
        }

    ],.....

Out put in PDF:

I hope I could have provided enough information to resolve this, if it can be resolved. And if more information is needed, do not hesitate to tell me.

Thank you very much in advance

Answer 1

I've been struggling with this one recently and finally found the solution. I'll try to make it a bit more detailed.

Here's a function that checks if the exported node is the node. In such case it returns the input.value - otherwise just the data:

//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;

            }
        }
    }
};

Now, with this function defined, we use it to extend the buttons:

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