Export values typed in input box (excelHtml5)

Tronik

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

kthorngren

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

Tronik

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

kthorngren

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

kthorngren

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

Tronik

Hi again,

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

Find it here:

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

allan

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

allan

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

Allan

Tronik

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?

kthorngren

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

Tronik

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")

Tronik

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

divyamj

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.

Yoska

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;
        }
    },

Melodie

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' 
                        } 
                    ] 
                }); 
            }); 

Melodie

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' 
                        } 
                    ] 
                }); 
            }); 

Melodie

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