Email Data From Table

Restful Web Services

This is just an exploratory question looking for some advice before I start trying things. I love the new buttons extension, the way you can select what data to print by column and row. I was wondering if there was any easy way to make this data from the table accessible to a form which could then be used to send the data via email.

Does anyone have any suggestions of the most practical way to go about this?

GardOlsen

You can use the customization of print button. Grab the win.document.body html and send it to server via ajax to send it.

Or you can send the html to a hidden textarea, type email and then send. Hope it helps :)

Restful Web Services

Are there any resources which describe in detail how to send the html to a hidden textarea? That sounds like a good solution but I am not really sure how I grab the win.document.body html?

Many thanks for your help.

Restful Web Services

Is this the kind of function which would allow me to intercept the table contents so I can add it to a textarea?

function sendemail() {
    var pid = $("#elempid").val();
    var dt = $('#pexpenses').dataTable();
    var footer = dt.api().columns().footer()[4].innerHTML;
    var rows = dt.fnGetNodes();
    var rowStr = "";
    for(var i = 0; i < rows.length; i++){
        rowStr += rows[i].innerHTML;
        if(i < rows.length - 1){
            rowStr += ",";
        }
    }
}

Or,

var thehtml = "";
    $(document).ready(function() {
$('#expenses').on( 'draw.dt', function () {
  thehtml = $( "#expensesdiv" ).html();
});
});

Thanks

allan

I would suggest perhaps using the Buttons buttons.exportData() method to get the data from the table (or just rows().data()). It won't give you the HTML, but that is easy to create with a couple of loops if you need it for the e-mail.

Then you can submit the text in an Ajax call to a server that will send the e-mail.

Allan

Restful Web Services

Hi Allan,

This sound sensible too. From a usability point of view what I think would be most sensible was if the user could press a button, Email, this would load a modal/new page which displays a form with the fields; email to, subject, notes (this would be a visible text area containing the exported table data). The user can then complete the form, amend the data in the text area if necessary, i.e. add a note or two, then press submit to send the email.

I think it is useful for the user to see the data they are emailing before it is sent rather than it going automatically.

Does this sound plausible using buttons.exportData?

Thanks

Chris

allan

Hi Chris,

Sounds perfectly feasible. The only aspect that buttons.exportData() will help with is getting the data from the table - everything else you'll need to code up :-)

Allan

Restful Web Services

Thanks for your help so far, I have a semi working solution but I am stuck with two things:

1. Including hidden columns in the table.buttons.exportData when using "columns": ':visible'? When I enable the column visible option I cannot find a way to include the hidden columns in my data export even when I make the column 'visible' in the datatable view, i.e. by clicking the button 'column visibility' and selecting the initially hidden column.
2. Field name in inner array loop? I am unsure how to access the fieldname for each cell because I cannot see it in my array, just a numerical value.

Here is what I have so far,

{
text: 'Button 1',           
action: function ( e, dt, node, conf ) {
var data = table.buttons.exportData( {
    "stripHtml": true,
    "columns": ':visible',
    "modifier": {
        "selected": true
    }
    });
console.log(data);
var rowsArray = data.body;
var rowItem = '';
var innerRowItem = '';
                
for ( var h=0, hen=rowsArray.length ; h<hen ; h++ ) { 
var innerRowsArray = rowsArray[h];
    for ( var i=0, ien=innerRowsArray.length ; i<ien ; i++ ) { 
    innerRowItem += 'Fieldname:' + innerRowsArray[i] + '<br>';
    }; 
};               

$("textarea#ExampleMessage").val(innerRowItem);
},   

I dont know if this is the right way to do this but it seems to work other than the issues I have outlined above.

Is it possible to solve issue 1 or 2?

Thanks

allan

1. I'm afraid I don't understand this one. You want to export all columns, but you've set it to export only visible columns?
2. What field name?

Restful Web Services

Hi Allan,

1. I have solved problem one.

2. I want the name of the column from the header. As I am not using a table structure in my textarea I wanted to add the name of the column next to the value from the column for each row,

Column name: value
Column name: value
Column name: value
Column name: value
Column name: value
Column name: value
Column name: value
Column name: value
Column name: value
Column name: value

Thanks

Chris

Restful Web Services

I think the code needs some refinement but it is working in its current state. I looped the headers array and used a rudimentary if statement to ensure only the correct header was displayed with the correct value:

{
                "text" : 'Email',
                action : function(e, dt, node, conf) {
                    var data = table.buttons.exportData({
                        "stripHtml" : true,
                        "columns" : ':visible',
                        "modifier" : {
                            "selected" : true
                        }
                    });
                    console.log(data);
                    var headerArray = data.header;
                    var rowsArray = data.body;
                    var rowItem = '';
                    var innerRowItem = '';

                    for (var h = 0, hen = rowsArray.length; h < hen; h++) {
                        var innerRowsArray = rowsArray[h];

                        for (var i = 0, ien = innerRowsArray.length; i < ien; i++) {
                            var outerCount = [i];

                            var checker = 'false';
                            for (var j = 0, jen = headerArray.length; j < ien; j++) {
                                if ( outerCount = [j] & checker == 'false') {
                                    checker = 'true';
                                    innerRowItem += headerArray[i];
                                }
                            }

                            if (innerRowsArray[i] != '') {
                                innerRowItem += ': ';
                            }

                            innerRowItem += innerRowsArray[i];

                            if (innerRowsArray[i] != '') {
                                innerRowItem += '\n';
                            }

                        };

                        innerRowItem += '\n';

                    };
                    $('#emailForm').modal({
                        showClose : true,
                        fadeDuration : 250,
                        fadeDelay : 1.5
                    });
                    $("textarea#email_content").val(innerRowItem);
                }
            }

The end result is a nicely formatted entry into my forms textarea, ready for email.

Chris