Export values typed in input box (excelHtml5)

Export values typed in input box (excelHtml5)

TronikTronik Posts: 122Questions: 28Answers: 1

Hi,

I've searched and tried getting this fixed for some hours now, but cannot get it to work.

The cell consists of some div's wrapped around an input type text, and I need to only get the typed value from this input exported to excel.

Any help is much appreciated

Answers

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    Can you post a link to an example with your data and code?
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • TronikTronik Posts: 122Questions: 28Answers: 1

    Yes... but cant I do that if someone first provide an idea/solution for this which wouldnt work?

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    The point is for you to at least start an example that has an example of your data and maybe some code you've tried. Otherwise we would be guessing as to what you have. At a minimum please build a Datatable that represents your data.

    Kevin

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    If it helps this will give you a base to start from with an Excel export button. Just take one of the columns and create the inputs as you normally have them. Add some code to the export button if you wish.

    http://live.datatables.net/vuqarogu/1/edit

    Kevin

  • TronikTronik Posts: 122Questions: 28Answers: 1

    Hi again,

    Yes sorry didn't mean to be lazy.....

    Find it here:

    http://live.datatables.net/vanalove/1/

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    You need to use a body export function if you want to get data from a "live" element such as an input. That will give you access to the DOM element so you can query it directly for its value.

    Allan

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    Oh sorry - there is an example of using a formatting function available here.

    Allan

  • TronikTronik Posts: 122Questions: 28Answers: 1

    Thanks,

    Are you refering to the example where ”$” is stripped from cell/value?

    So I will need to use regex to extract the value from all the HTML?

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    I think what you need to do is use the example you posted to here:
    https://datatables.net/forums/discussion/42205/export-data-with-text-box-in-td-of-data-table#latest

    body: function ( data, row, column, node ) {
    //
    //check if type is input using jquery
    return $(data).is("input") ?
    $(data).val():
    data;
    

    You will need to workout the selector to use to get to the input element. You can use some console.log() output to see how to drill down the nested div tags to get the input value.

    Kevin

  • TronikTronik Posts: 122Questions: 28Answers: 1

    Thanks for the ideas

    Do you guys have any suggestions on how to do that?

    When I use the above code this gets exported into the excel file

    <div class='form-inline'><div class='form-group'><input type='text' class='form-control input-sm addField' style='height:23px; width:45px;' value='22'></div></div>

    I've tried useing class name, return $(data).is("input.addField")

  • TronikTronik Posts: 122Questions: 28Answers: 1

    I solved it by modifying the above example.

    body: function ( data, row, column, node ) {
                                    return $(data).is("div") ?
                                    $(data).find('input').val():
                                    data;
                                    }
    

    Thank you for guidance

  • divyamjdivyamj Posts: 1Questions: 0Answers: 0

    Hi.. Please Help..
    The above code doesn't work for me..
    I want to export the date entered in the textbox available in the datatable to Excel.

  • YoskaYoska Posts: 1Questions: 0Answers: 0
    format: {
            body: function (data, row, column, node) {
                var retorno = "", tag, respuesta = "", reponer = [];
                tag = $(node).find('input:hidden');
                if (tag.length > 0) { for (i = 0; i < tag.length; i++) { reponer.push(tag[i]); $(tag[i]).remove(); } }
                tag = $(node).find('input:radio');
                if (tag.length > 0) { retorno = retorno + ($(node).find(':checked').length > 0 ? $(node).find(':checked').val() : " "); }
                tag = $(node).find('input:checkbox');
                if (tag.length == 1) {
                    retorno = retorno + ($(node).find(':checked').length > 0 ? "Si" : "No");
                } else if (tag.length > 1) { retorno = retorno + ($(node).find(':checked').length > 0 ? $(node).find(':checked').val() : " "); }
                tag = $(node).find('input,select,textarea').not(':radio,:checkbox,:hidden');
                if (tag.length > 0) { retorno = retorno + ($(tag).map(function () { return $(this).val(); }).get().join(',')); }
    
                respuesta = (retorno != "") ? retorno : $.trim($(node).text());
                for (i = 0; i < reponer.length; i++) { $(node).append(reponer[i]); }
    
                return respuesta;
            }
        },
    
  • MelodieMelodie Posts: 3Questions: 0Answers: 0
    edited November 2020

    the above comments helped me put it together; my input was of type submit and it was inside forms tag,my column was second in so had index 1 :

     body: function (data, row, column, node) { 
                                    //check if type is input using jquery 
                                    return $(data).is("form") ? 
                                    $(data).find('input:submit').val(): 
                                    data; 
                                    } 
    

    the whole code:

    $(document).ready(function () { 
                    var buttonCommon = { 
                        exportOptions: { 
                            format: { 
                                body: function (data, row, column, node) { 
                                    //check if type is input using jquery 
                                    return $(data).is("form") ? 
                                    $(data).find('input:submit').val(): 
                                    data; 
                                    } 
                            } 
                        } 
                    }; 
                    $('#table_checkbox').DataTable({ 
                        dom: 'Bfrtip', 
                        lengthMenu: [ 
                            [4, 10, 25, 50, -1], 
                            ['4 rows', '10 rows', '25 rows', '50 rows', 'Show all'] 
                        ], 
                        buttons: [ 
                            $.extend(true, {}, buttonCommon, { 
                                extend: 'excelHtml5', 
                                className: 'bg-white btn-outline-danger', 
                                titleAttr: 'Export to Excel', 
                                exportOptions: { 
                                    columns: [1, 2, 3, 4], 
                                } 
                            }), 
                            { 
                                extend: 'pageLength', 
                                className: 'bg-white btn-outline-melody' 
                            } 
                        ] 
                    }); 
                }); 
    
  • MelodieMelodie Posts: 3Questions: 0Answers: 0
    edited November 2020

    This is whole code that actually works for me:

    $(document).ready(function () { 
                    var buttonCommon = { 
                        exportOptions: { 
                            format: { 
                                body: function (data, row, column, node) { 
                                    //check if type is input using jquery 
                                    return $(data).is("form") ? 
                                    $(data).find('input:submit').val(): 
                                    data; 
                                    } 
                            } 
                        } 
                    }; 
                    $('#table_checkbox').DataTable({ 
                        dom: 'Bfrtip', 
                        lengthMenu: [ 
                            [4, 10, 25, 50, -1], 
                            ['4 rows', '10 rows', '25 rows', '50 rows', 'Show all'] 
                        ], 
                        buttons: [ 
                            $.extend(true, {}, buttonCommon, { 
                                extend: 'excelHtml5', 
                                className: 'bg-white btn-outline-melody', 
                                //  text: '<i class="fa fa-file-excel-o fa-x5"></i>', 
                                titleAttr: 'Export to Excel', 
                                exportOptions: { 
                                    columns: [1, 2, 3, 4], 
                                } 
                            }), 
                            { 
                                extend: 'pageLength', 
                                className: 'bg-white btn-outline-melody' 
                            } 
                        ] 
                    }); 
                }); 
    
  • MelodieMelodie Posts: 3Questions: 0Answers: 0
    edited November 2020

    This worked for me:
    Mine is input type submit inside forms tag;

    body: function (data, row, column, node) {
        //check if type is input using jquery
            return $(data).is("form") ?
                   $(data).find('input:submit').val():
            data;
    }
    
This discussion has been closed.