title: Formating angular datatable before exporting to pdf
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('myApp', ['datatables', 'datatables.buttons']);
  app.controller('MyCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder) {
  
    $scope.list = [{
        "eid": "10",
        "type": "1",
        "sales": "20",
        "status": "1"
      }, {
        "eid": "20",
        "type": "2",
        "sales": "40",
        "status": "0"
      }, {
        "eid": "30",
        "type": "1",
        "sales": "20",
        "status": "1"
      }
    ];
  
    $scope.vm = {};
  
    $scope.vm.dtOptions = DTOptionsBuilder.newOptions()
      .withOption('order', [0, 'asc'])
      .withButtons([
        {
          extend: 'collection',
          text: 'Export',
          buttons: [{
              extend: 'copyHtml5',
              title: 'Mylist'
            },
            {
              extend: 'pdfHtml5',
              title: 'My list'
            }
          ]
        }
      ]);
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Tooltip container */
  .tooltips {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  }
  
  /* Tooltip text */
  .tooltips .tooltipstext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      padding: 5px 0;
      border-radius: 6px;
   
      /* Position the tooltip text - see examples below! */
      position: absolute;
      z-index: 1;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltips:hover .tooltipstext {
      visibility: visible;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
          &lt;head&gt;
            &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
            &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"&gt;&lt;/script&gt;
            &lt;script src="https://phpflow.com/demo/angular_datatable_demo/angular-datatables.min.js"&gt;&lt;/script&gt;
            &lt;script src="https://phpflow.com/demo/angular_datatable_demo/jquery.dataTables.min.js"&gt;&lt;/script&gt;
            &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
            &lt;link rel="stylesheet" href="https://phpflow.com/demo/angular_datatable_demo/datatables.bootstrap.css"&gt; 
                        &lt;link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css"&gt; 
  
        &lt;script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://l-lin.github.io/angular-datatables/archives/dist/plugins/buttons/angular-datatables.buttons.min.js"&gt;&lt;/script&gt;
  
        &lt;/head&gt;
          &lt;div class="container"&gt;
          &lt;div ng-app="myApp" ng-controller="MyCtrl"&gt;
  
          &lt;table  class="table table-striped table-bordered" dt-options="vm.dtOptions" dt-column-defs="vm.dtColumnDefs" datatable="ng"&gt;
             &lt;thead&gt;
                &lt;tr&gt;
               &lt;th&gt;&lt;div class="tooltips"&gt;sr &lt;span class="tooltipstext"&gt;Poistion&lt;/span&gt;
  &lt;/div&gt;   &lt;/th&gt;
  
            &lt;th&gt;Employee ID&lt;/th&gt;
           &lt;th&gt;Type&lt;/th&gt;
           &lt;th&gt;sales&lt;/th&gt;
            &lt;th&gt;sales_completed&lt;/th&gt;
  
          &lt;/thead&gt;
              &lt;tbody&gt;
            
             &lt;tr ng-repeat="data in list"&gt;
                &lt;td&gt; {{ $index+1 }} &lt;/td&gt;
               
                &lt;td&gt; {{ data.eid }} &lt;/td&gt;
                &lt;td&gt; {{ data.type==2? "admin" : "employee"}} &lt;/td&gt;
                &lt;td&gt; {{ data.sales }} &lt;/td&gt;
              
                &lt;td&gt; 
                
                &lt;span ng-show="{{ data.status }}=='1'"&gt; &lt;div class="tooltips"&gt;&lt;i class="glyphicon glyphicon-ok"&gt;&lt;/i&gt;&lt;span class="tooltipstext"&gt;Yes&lt;/span&gt;&lt;/div&gt;&lt;/span&gt;
                &lt;span ng-show="{{ data.status }}=='0'"&gt; &lt;div class="tooltips"&gt;&lt;i class="glyphicon glyphicon-remove"&gt;&lt;/i&gt;&lt;span class="tooltipstext"&gt;NO&lt;/span&gt;&lt;/div&gt;&lt;/span&gt;
    
                 &lt;/td&gt;
                  &lt;/tr&gt;
          &lt;/tbody&gt;
    
          &lt;/table&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am using <a href="http://l-lin.github.io/angular-datatables/#/withButtons" rel="nofollow noreferrer">angular-datatable</a> plugin, with export buttons.I am trying to export a table as pdf which contains tool tips and glyphicon.I am facing 2 problems while exporting the table.</p>
  
  <p>Problem 1</p>
  
  <pre><code>&lt;th&gt;
      &lt;div class="tooltips"&gt;sr &lt;span class="tooltipstext"&gt;Poistion&lt;/span&gt;&lt;/div&gt; &lt;/th&gt;
  </code></pre>
  
  <p>The exported pdf contains the tooltips text</p>
  
  <p>Problem 2</p>
  
  <pre><code>&lt;span ng-show="{{ data.status }}=='1'"&gt; &lt;div class="tooltips"&gt;&lt;i class="glyphicon glyphicon-ok"&gt;&lt;/i&gt;&lt;span class="tooltipstext"&gt;Yes&lt;/span&gt;&lt;/div&gt;&lt;/span&gt;
  
  &lt;span ng-show="{{ data.status }}=='0'"&gt; &lt;div class="tooltips"&gt;&lt;i class="glyphicon glyphicon-remove"&gt;&lt;/i&gt;&lt;span class="tooltipstext"&gt;NO&lt;/span&gt;&lt;/div&gt;&lt;/span&gt;
  </code></pre>
  
  <p>The table is not exporting the glyphicon</p>
  
  <p>How can i format the table so that the tool tips text are excluded and glyphicon is shown in the exported pdf? </p>