I am using jQuery DataTables in Laravel and I want to use the export functionality of the plugin.
Now my problem is that in my table I have some HTML so that instead of actual text I render a tickbox.
Example
<td>
<span class="{{($r->submitted == 1)?'checkbox-checked':''}}">
<i class="material-icons md-18">check_box</i>
</span>
</td>
When I export this table in Excel I get the value of the td 'check_box' so the excel looks like this
+-----------+----------+-----------+-----------+--+
| Firstname | Lastname | Option 1 | Option 2 | |
+-----------+----------+-----------+-----------+--+
| Christos | Savva | check_box | check_box | |
+-----------+----------+-----------+-----------+--+
| Second | Person | check_box | check_box | |
+-----------+----------+-----------+-----------+--+
| Third | Person | check_box | check_box | |
+-----------+----------+-----------+-----------+--+
Obviously this makes no sense in an excel file whereas on screen is fine because I render the icons.
As per the documentation I tried to use the Format output data - export options
var buttonCommon = {
exportOptions: {
format: {
body: function ( data, row, column, node ) {
//Do stuff to replace check_box with word Yes
//or no
return data
}
}
}
};
And here comes the problem. When I return data from my function it returns the whole html block inside the td.
So the excel looks like this
+-----------+----------+---------------------------------------------------------------+---------------------------------------------------------------+--+
| Firstname | Lastname | Option 1 | Option 2 | |
+-----------+----------+---------------------------------------------------------------+---------------------------------------------------------------+--+
| Christos | Savva | <span class="{{($r->submitted == 1)?'checkbox-checked':''}}"> | <span class="{{($r->submitted == 1)?'checkbox-checked':''}}"> | |
| | | | | |
| | | <i class="material-icons md-18">yes</i> | <i class="material-icons md-18">yes</i> | |
| | | | | |
| | | </span> | </span> | |
+-----------+----------+---------------------------------------------------------------+---------------------------------------------------------------+--+
| Second | Person | <span class="{{($r->submitted == 1)?'checkbox-checked':''}}"> | <span class="{{($r->submitted == 1)?'checkbox-checked':''}}"> | |
| | | <i class="material-icons md-18">yes</i> | | |
| | | </span> | <i class="material-icons md-18">yes</i> | |
| | | | | |
| | | | </span> | |
+-----------+----------+---------------------------------------------------------------+---------------------------------------------------------------+--+
| Third | Person | <span class="{{($r->submitted == 1)?'checkbox-checked':''}}"> | <span class="{{($r->submitted == 1)?'checkbox-checked':''}}"> | |
| | | | | |
| | | <i class="material-icons md-18">yes</i> | <i class="material-icons md-18">yes</i> | |
| | | | | |
| | | </span> | </span> | |
+-----------+----------+---------------------------------------------------------------+---------------------------------------------------------------+--+
Does anyone know how I can achieve that?
If we can assume the HTML is rendered. i.e <span class="{{($r->submitted == 1)?'checkbox-checked':''}}"> is rendered as <span class="checkbox-checked"> or <span class=""> :
exportOptions: {
format: {
body: function ( data, row, column, node ) {
if (![2,3].indexOf(column)) {
return $('span', data).hasClass('checkbox-checked')
? 'yes'
: 'no'
}
return data
}
}
}