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

Popular posts from this blog

magento2 - Magento 2 admin grid add filter to collection -

Android volley - avoid multiple requests of the same kind to the server? -

Combining PHP Registration and Login into one class with multiple functions in one PHP file -