Answers

• allan Posts: 63,075Questions: 1Answers: 10,385 Site admin

  December 2015

  In the Chrome console I see:

  Unsafe JavaScript attempt to initiate navigation for frame with URL 'about:blank' from frame with URL 'http://live.datatables.net/runner'. The frame attempting navigation is sandboxed, and is therefore disallowed from navigating its ancestors.

  I think this is expect to JSBin and how it is operating. It should be that on its own page that works correct. I've just uploaded the code from the bin to a static file and it seems to work as expected.

  Allan
• tbithell Posts: 13Questions: 3Answers: 1

  December 2015

  I see what is going on, so I have one other issue with this, that is really how to exclude something from the pdf. I have added some code that puts filter dropdowns under each column header... http://live.datatables.net/pevetepa/2/edit

  When I click export to PDF it works fine, I removed the portion that made it open in a new window for testing purposes, BUT it also includes all the drop down values and wreaks havoc on the pdf formatting.

  I have been working with the following, but can't get it to work. I'm honestly, just not quite sure where to put it...

  "exportOptions":[
  {
  "format":[{
  "header": function(data)
  {

                      var test = data.substring(0, data.indexOf(':'));
                      var test2 = test.split(">");
                      console.log(test2[1]);
                      return test;
                  }
              }]
  

  The above is a modified version of the code found here...
  https://datatables.net/reference/api/buttons.exportData()

  Specifically...
  var data = table.buttons.exportData( {

  format: {
  
      header: function ( data, columnIdx ) {
  
          return columnIdx +': 'String+ data;
  
      }
  
  }
  

  } );

  I'm having this same issue with Excel, so answering this question can close out a couple questions at once. I wouldn't have opened both had I realized that the PDF export worked fine.
• allan Posts: 63,075Questions: 1Answers: 10,385 Site admin

  December 2015 Answer ✓

  So the issue here is that to get the header text, Buttons reads the html for the cell and then strips the HTML tags. The result is that you are left with only the plain text.

  You could alter the code so it doesn't do that, however, I would recommend changing your table slightly so that the input select elements are on a different row in the table's header. Add another tr where they can be placed and use orderCellsTop to tell DataTables to use the top row in the header as the main titles for the columns.

  That will also fix the issue in your example whereby the table is ordered if you click on a select element in the header.

  Allan
• tbithell Posts: 13Questions: 3Answers: 1

  December 2015

  Thanks so much! I'm looking at this and trying to sort out how to change this line, so that I append the select to the second row in the header,

  var select = $('<br /><select style="width:75px; text-align:left;"><option value=""></option></select>').appendTo( $(column.header()) ).on( 'change', function () {

  Any idea how to do that?
• tbithell Posts: 13Questions: 3Answers: 1

  December 2015

  Got that part sorted out via... .appendTo( $('.two')[counter] ) or something similar. Now I'm just trying to sort out how to make that work when the table is populated dynamically.
• tbithell Posts: 13Questions: 3Answers: 1

  December 2015 edited December 2015

  Woohoo, got it. Just in case anyone is using json to populate their table like I am I added the following... Previously I just had the table tags and <thead> and <tbody> tags. I know, I know hardcoding it is kind of lame, but I was already hardcoding the column headers in the javascript

  <table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="progress">
  <thead ><tr>
              <th>Edit:</th>
              <th>Request-ID:</th>
              <th>Requestor: </th>
              <th>Task Name: </th>
              <th>Status:</th>
              <th>Due Date:</th>
              <th>Priority:</th>
              <th>Assigned:</th>
              <th>Team:</th>
              <th>Start Date:</th>
              <th>Effort:</th>
              <th>Pipeline:</th>
            </tr>
             <tr id="two">
             <th class="two"></th>
             <th class="two"></th>
              <th class="two"></th>
              <th class="two"></th>
              <th class="two"> </th>
              <th class="two"></th>
              <th class="two"></th>
              <th class="two"></th>
              <th class="two"> </th>
              <th class="two"></th>
              <th class="two"></th>
              <th class="two"></th>
            </tr></thead>
  <tbody></tbody>
  </table>
  
• allan Posts: 63,075Questions: 1Answers: 10,385 Site admin

  December 2015

  Thanks for posting back with your solution. Good to hear you got it working.

  Allan