Datatables buttons pdfHtml5 exportOptions to remove nested tags -
i'm trying optimize datatables buttons pdfhtml5 export of page. table data contains nested html tags creating additional space above , below cell data, makes pdf long.
the text in cell wrapped in 2 nested <div>
, <p>
. in pdf export, need contents of <p>
<td> <div class="flagimg" style="background-image: url(...)"> <div class="flagtext"> <p>name of country</p> </div> </div> </td>
i'm trying remove nested html tags using exportoptions, i'm not sure how write syntax correctly. can me this?
$(document).ready(function() { var buttoncommon = { exportoptions: { format: { body: function(data, column, row) { data = data.replace(/<div class="flagtext"\">/, ''); data = data.replace(/<.*?>/g, ""); return data; } } } }; var otable = $('#example').datatable({ dom: 'bfrtip', buttons: [ $.extend( true, {}, buttoncommon, { extend: 'copyhtml5' } ), $.extend( true, {}, buttoncommon, { extend: 'excelhtml5' } ), $.extend( true, {}, buttoncommon, { extend: 'pdfhtml5' } ) ] }); })
i discovered problem not nested div after all, but rather tags indented in code instead of being on 1 line. i've reported datatables , i'm documenting problem here, in case else runs it.
i've built on fiddle @davidkonrad made illustrate what's happening.
https://jsfiddle.net/lbriquet/7f08n0qa/
in first row, nested tags indented in code... produces space above , below country name data in pdf export.
in second row i've put of tags in same line of code... , no spacing produced in pdf export.
<table id="example" width="100%" border="0" cellspacing="0" cellpadding="0" > <thead> <tr> <th>name</th> <th>position</th> <th>office</th> </tr> </thead> <tbody> <tr> <td> <div class="myclass"><a href="#">company name</a> </div> </td> <td> <div class="flagimg" style="background-image: url(#"> <div class="flagtext"> <p>country name</p> </div> </div> </td> <td> <div class="myclass">product sold</div> </td> </tr> <tr> <td> <div class="myclass"><a href="#">company name</a> </div> </td> <td><div class="flagimg" style="background-image: url(#)"><div class="flagtext"><p>country name</p></div></div> </td> <td> <div class="myclass">product sold</div> </td> </tr> </tbody> </table>
Comments
Post a Comment