jQueryのDataTableのExcelに検索条件/ csvファイルをエクスポートする方法

Question

下図のように私は、EXCELやCSVへのエクスポート検索結果のためのjQueryのデータテーブルを使用している

：

EmployeeList.html

<form name="officeForm" id="officeForm" method="post" action="EmployeeList.action"> 
      <div class="pull-right"> 
        <button class="btn btn-primary-outline btn-sm" type="submit">Search</button> 
      </div> 
      <table class="table table-form"> 
      <tbody> 
       <tr> 
        <td class="control-label">Office</td> 
        <td> 
         <select id="officeId" name="office"> 
          <option value="0">ALL</option> 
          <option value="108">Bangalore</option> 
          <option value="109">Mumbai</option> 
          <option value="110">Pune</option> 
                </select> 
            </td> 
           </tr> 
        <tr> 
        <td class="control-label">Department</td> 
        <td> 
         <select id="departmentId" name="department"> 
          <option value="0">ALL</option> 
          <option value="118">IT</option> 
          <option value="119">HR</option> 
          <option value="120">Operations</option> 
</select> 
           </td> 
        </tr> 
        </tbody> 
      </table> 

    </form> 
    <div class="content-wrapper"> 
      <table class="table table-hover" id="employee-grid" > 
       <thead> 
        <tr> 
         <th>Employee Id</th> 
         <th>Name</th> 
         <th>Department</th> 
         <th>Joined date</th> 
        </tr> 
       </thead> 
      </table> 
    </div> 

Employee.jsを

var dt = $("#employee-grid").DataTable({ 
      "scrollY": "500px","scrollCollapse":true,"paging":false,"bSortCellsTop": true, 
      data : [], 
      "columns" : [{"data":"Id"}, {"data":"name"}, {"data":"department"},{"data":"joinedDate"}] 
     }); 


$("#officeForm").submit(function(event){ 
    event.preventDefault(); 
    var $form = $(this); 
    data = $form.serializeArray(); 
    url = $form.attr("action"); 

    var posting = $.post(url,data); 
    posting.done(function(dataset){ 
     dt.clear(); 
     dt.rows.add(dataset.searchResults.EMPLOYEE_LIST).draw(); 

       if(dataset.searchResults.EMPLOYEE_LIST != null && dataset.searchResults.EMPLOYEE_LIST.length != 0) 
       { 
        new $.fn.dataTable.Buttons(dt, { 
         buttons: [ 
          { 
           extend: 'excelHtml5', 
           filename:'EmployeeList' 
          },  
          { 
           extend: 'csvHtml5', 
           filename:'EmployeeList' 
          } 
         ] 
        }); 

        dt.buttons(0, null).container().prependTo(
          dt.table().container() 
        ); 
       } 

}); 

ここでは、データテーブルの行のみがexcel/csvにエクスポートされます。
私は/ csvファイルをエクセルも検索オプション（オフィスや部門）をエクスポートする必要があります。/csvファイルをエクセルも検索オプションをエクスポートする方法
。

Answer 1

これは他の人にも役立つことを願っています。

1. 各ボタン
2. [簡単これがあるので、テキストのみ]ための入力検索のDataTableから価値保存departemenId
3. 選択
4. 使用cusomizeオプションのテキストを保存し、選択しofficeId
5. のテキストを保存csvhtml5の場合は、新しい行を入力するために "\ n"が必要です。作成したdt CSV要素の前に追加してください。
6. [これはOFFICE XMLなので] excelhtml5のための私たちは、作成されたdt XML要素の前にOFFICE XMLを追加する必要があります。ハードポイント我々はオフィスXMLで最初に何を知っている必要がありますされ、どのようOFFICE XMLを作成するために手動で

ここで我々は

この

buttons: [ 
      { 
       extend: 'csvHtml5', 
       filename:'EmployeeList', 
       customize: function(csv) { 
        var office = $('#officeId :selected').text(); 
        var department = $('#officeId :selected').text(); 
        var search = $('.dataTables_filter input').val(); 
        return "Office: "+ office +"\n"+"Department: "+department+"\n"+"Search Keyword: "+search+"\n\n"+ csv; 
       } 
      }, 
      { 
       extend: 'excelHtml5', 
       filename:'EmployeeList', 
       customize: function(xlsx) { 
        var office = $('#officeId :selected').text(); 
        var department = $('#officeId :selected').text(); 
        var search = $('.dataTables_filter input').val(); 
        var search = $('.dataTables_filter input').val(); 
        var sheet = xlsx.xl.worksheets['sheet1.xml']; 
        var downrows = 4; //number of rows for heading 
        var clRow = $('row', sheet); 
        //update Row 
        clRow.each(function() { 
         var attr = $(this).attr('r'); 
         var ind = parseInt(attr); 
         ind = ind + downrows; 
         $(this).attr("r",ind); 
        }); 

        // Update row > c 
        $('row c ', sheet).each(function() { 
         var attr = $(this).attr('r'); 
         var pre = attr.substring(0, 1); 
         var ind = parseInt(attr.substring(1, attr.length)); 
         ind = ind + downrows; 
         $(this).attr("r", pre + ind); 
        }); 

        function Addrow(index,data) { 
         msg='<row r="'+index+'">' 
         for(i=0;i<data.length;i++){ 
          var key=data[i].k; 
          var value=data[i].v; 
          msg += '<c t="inlineStr" r="' + key + index + '" s="0">'; 
          msg += '<is>'; 
          msg += '<t>'+value+'</t>'; 
          msg+= '</is>'; 
          msg+='</c>'; 
         } 
         msg += '</row>'; 
         return msg; 
        } 

        //insert 
        var newline = Addrow(1, [{ k: 'A', v: 'Office: ' + office}]); 
        newline += Addrow(2, [{ k: 'A', v: 'Department: ' + department}]); 
        newline += Addrow(3, [{ k: 'A', v: 'Search Keyword: ' + search}]); 

        sheet.childNodes[0].childNodes[1].innerHTML = newline + sheet.childNodes[0].childNodes[1].innerHTML; 
       } 
      } 
     ]  

に

buttons: [ 
    { 
     extend: 'excelHtml5', 
     filename:'EmployeeList' 
    },  
    { 
     extend: 'csvHtml5', 
     filename:'EmployeeList' 
    } 
] 

を交換を行きますDEMO：https://output.jsbin.com/teyupav

パスポート：http://pastebin.com/ZGt61DCT

AugustLEE、J e Harms（メンバー）とAlan（サイト管理者）のデータシートからのおかげで。ネットフォーラム

REFERENCE：

https://datatables.net/extensions/buttons/examples/initialisation/export.html

https://datatables.net/reference/button/excelHtml5

https://datatables.net/reference/api/buttons.exportData()

CSVエクスポート

https://datatables.net/forums/discussion/38275

EXCELHTML5エクスポート

https://datatables.net/forums/discussion/39707

https://datatables.net/forums/discussion/36045/excel-export-add-rows-and-data

UPDATE 1：

この修正以下サファリとIE8から修正innerHTMLの問題は、同じDataTableのスレッドでRaghulから基準となるhttps://datatables.net//forums/discussion/comment/103911/#Comment_103911

function Addrow(index, data) { 
        var row = sheet.createElement('row'); 
        row.setAttribute("r", index);    
         for (i = 0; i < data.length; i++) { 
          var key = data[i].key; 
          var value = data[i].value; 

          var c = sheet.createElement('c'); 
          c.setAttribute("t", "inlineStr"); 
          c.setAttribute("s", "0"); 
          c.setAttribute("r", key + index); 

          var is = sheet.createElement('is'); 
          var t = sheet.createElement('t'); 
          var text = sheet.createTextNode(value) 

          t.appendChild(text);          
          is.appendChild(t); 
          c.appendChild(is); 

          row.appendChild(c);                               
         } 

         return row; 
        } 

        var r1 = Addrow(1, [{ key: 'A', value: 'Office: ' + office }]); 
        var r2 = Addrow(2, [{ key: 'A', value: 'Department: ' + department }]);       
        var r3 = Addrow(3, [{ key: 'A', value: 'Search Keyword: ' + search }]); 
        var r4 = Addrow(4, [{ key: 'A', value: '' }]);    

        var sheetData = sheet.getElementsByTagName('sheetData')[0]; 

        sheetData.insertBefore(r4,sheetData.childNodes[0]); 
        sheetData.insertBefore(r3,sheetData.childNodes[0]); 
        sheetData.insertBefore(r2,sheetData.childNodes[0]); 
        sheetData.insertBefore(r1,sheetData.childNodes[0]); 

DEMO INTO

function Addrow(index,data) { 
     msg='<row r="'+index+'">' 
     for(i=0;i<data.length;i++){ 
      var key=data[i].k; 
      var value=data[i].v; 
      msg += '<c t="inlineStr" r="' + key + index + '" s="0">'; 
      msg += '<is>'; 
      msg += '<t>'+value+'</t>'; 
      msg+= '</is>'; 
      msg+='</c>'; 
     } 
     msg += '</row>'; 
     return msg; 
    } 


        //insert 
        var newline = Addrow(1, [{ k: 'A', v: 'Office: ' + office}]); 
        newline += Addrow(2, [{ k: 'A', v: 'Department: ' + department}]); 
        newline += Addrow(3, [{ k: 'A', v: 'Search Keyword: ' + search}]); 

        sheet.childNodes[0].childNodes[1].innerHTML = newline + sheet.childNodes[0].childNodes[1].innerHTML; 

REPLACE：https://output.jsbin.com/kevosub/