DataTables export for complex HTML (python deform)

Question

I'm using DataTables jquery for nice-looking tables and python's deform for generating my form elements easily from schema. DataTables exporting functionality doesn't play nice with the form elements generated.

Because of that, I need to use DataTables' export function to properly generate my exports. There's actually four types of cells I can think of in my application (arranged in order of increasing complexity), and the function would need to handle all of them.

Firstly, a standard <input>. Expected output here would just be with some brand

<input name="brand" value="with some brand" id="deformField1168" class=" form-control " type="text">

Secondly, a textarea (this is actually the only one DataTables handles correctly by default, as it strips away HTML to get 'only text contents'). Expected output here would be a short description

<textarea id="deformField1169" name="description" rows="2" class=" form-control ">a short description</textarea>

Third, a stack of divs which I use to place a trash/delete icon on one side of a cell, otherwise this is the same as the first case. If this is the only case which cannot be solved, I don't mind moving the icon to it's own cell, it's just uglier that way. Expected output here would be a_test_item

<div style="float: left; width: 85%; text-align: left">
    <input name="item_number" value="a_test_item" id="deformField1167" class=" form-control " type="text">
</div>
<div style="float: right; width: 15%; text-align: right">
    <form class="form" action="" method="post" accept-charset="utf-8" enctype="multipart/form-data">
        <input name="id" value="1" type="hidden">
        <button type="submit" class="btn btn-default" name="delete">
            <span class="glyphicon glyphicon-trash">
        </span></button>
    </form>
</div>

Fourth and last, this set of hidden inputs + javascript which brings up a datepicker. Expected output here would be 2017-03-07

<input name="__start__" value="delivery_date:mapping" type="hidden">
<input name="date" value="2017-03-07" id="deformField1171" class="  form-control hasDatepicker" type="date">
<input name="__end__" value="delivery_date:mapping" type="hidden">
<script type="text/javascript">
    deform.addCallback(
    'deformField1171',
     function deform_cb(oid) {
       if (!Modernizr.inputtypes['date'] ||"date" != "date" || window.forceDateTimePolyfill){
         $('#' + oid).pickadate({"format": "yyyy-mm-dd", "selectMonths": true, "selectYears": true, "formatSubmit": "yyyy-mm-dd"});
       }
     }
    );
</script>

My current exportOption function looks like this:-

exportOptions: {
    format: {
        body: function ( data, row, column, node ) {
            console.log(data)
            return data
        }
    }
}

I've never used javascript to process strings before (only to getElementByID etc.), and it doesn't seem like string processing is the way to go anyway. Could I create a JS 'page' using these cells and use standard HTML access (all the getElement* functions)?

Ng Oon-Ee Ng Oon-Ee · Accepted Answer · 2017-02-22T18:33:28

And as usual the very act of typing out the question provides me with insight which helps. Based on the accepted answer here about creating a DOM from a HTML string, as well as the observation that all visible inputs have the class form-control, here's the (embarrassingly simple) function I've written.

exportOptions: {
    format: {
        body: function ( data, row, column, node ) {
            var div = document.createElement('div')
            div.innerHTML = data
            var value = div.getElementsByClassName('form-control')[0].value
            return value
        }
    }
}

DataTables export for complex HTML (python deform)

1 Answers