從選擇元素導出數據表中的數據從選擇元素導出每個選項

Question

我嘗試將導出按鈕添加到我的數據表，我的表包括選擇框裏面，問題是 - 導出選擇框中包含的所有選項值...一個正在使用AJAX來從服務器獲取結果的話，操作不同的數據之前渲染使用dataSrc功能，像這樣：

dataTableInit: function (columns_def) { 
    var me = this; 
    me.dataTable_obj = $('#leads_table').DataTable({ 
     "pageLength": per_page, 
     dom: 'Blfrtip', 
     buttons: [ 
      'copy', 'csv', 'excel', 'pdf', 'print' 
     ], 
     "order": [order], 
     "ajax": { 
      url: route, 
      type: method, 
      data: filtering_data, 
      "dataSrc": function (json) { 
       return me.setLeadsTableData(json); 
      } 
     }, 
     "columns": columns_def, 
     .... 

在 setLeadsTableData我檢查列

從服務器返回然後如果一列，應該是一個選擇框我正在改變它的模板像這樣：

setStatusesSelectBox: function (status_obj, lead_id) { 
    var me = this; 
    var statuses_list = ''; 
    var bg_color = status_obj.name == "new" ? me.new_status_row_bg_color : ''; 
    $.each(me.client_statuses, function (key, val) { 
     if (val.id != status_obj.id) { 
      if (typeof val.is_won !== "undefined" && val.is_won != 0) { 
       statuses_list += "<option data-icon='fa fa-thumbs-o-up' value='" + val.id + "'>" + val.name + "</option>"; 
      } else if (typeof val.is_lost !== "undefined" && val.is_lost != 0) { 
       statuses_list += "<option data-icon='fa fa-thumbs-o-down' value='" + val.id + "'>" + val.name + "</option>"; 
      } else { 
       statuses_list += "<option value='" + val.id + "'>" + val.name + "</option>"; 
      } 
     } else { 
      if (typeof val.row_bg_color !== 'undefined') { 
       bg_color = val.row_bg_color; 
      } 
      if (typeof status_obj.is_won !== "undefined" && status_obj.is_won != 0) { 
       statuses_list += "<option data-icon='fa fa-thumbs-o-up' value='" + val.id + "' selected>" + val.name + "</option>"; 
      } else if (typeof status_obj.is_lost !== "undefined" && status_obj.is_lost != 0) { 
       statuses_list += "<option data-icon='fa fa-thumbs-o-down' value='" + val.id + "' selected>" + val.name + "</option>"; 
      } else { 
       statuses_list += "<option value='" + val.id + "' selected>" + val.name + "</option>"; 
      } 
     } 
    }); 
    statuses_list += "</select>"; 
    var select_start = "<select name='status' data-show-icon='true' data-row-bg='" + bg_color + "' class='form-control status-select' data-lead-id='" + lead_id + "'>"; 
    ; 
    return select_start + statuses_list; 
}, 

任何回答將幫助，不勝感激

Answer 1

使用exportOptions'format.body回調，並得到了導出的數據控制。使用dataTables API查找每個<select>框的當前選定值。這裏的第一列和pdf：

buttons: [ 
    { 
    extend : 'pdf', 
    exportOptions : { 
     format: { 
     body: function(data, row, col, node) { 
      if (col == 0) { 
      return table 
       .cell({row: row, column: col}) 
       .nodes() 
       .to$() 
       .find(':selected') 
       .text() 
      } else { 
       return data; 
      } 
     } 
     } 
    }, 
    ... 
    } 
] 

哪裏table是表例如，在你的情況me.dataTable_obj。現在只需更改if (col == 0) {，以便它響應您有<select>框的列（我不知道）。

Answer 2

如果你使用的導出格式僅可見列，固定列索引會起到一些技巧上的你，還等什麼幫助了我的情況是檢查的子節點，如果是選擇，然後再進行格式

body: function(data, row, col,node) { 
    var elementType = node.firstChild; 
    if (elementType != null) { 
     if (elementType.nodeName == "SELECT") return 
     $(elementType).find(':selected').text(); 
     else return data; 
    } 
    else return data 

Answer 3

感謝米哈伊爾烏沙科夫讓我開始。有一些機會來簡化代碼並使其工作更順利（就我而言），最大的問題是我的表中的所有內容都是鏈接或選擇。在鏈接的情況下，其他代碼也捕獲鏈接的html，而不是文本。在我的情況下，我也有奇怪的東西，如表，所以我不得不在每個節點預計多個孩子。也選擇不使用jQuery）

exportOptions: { 
    format : { 
     body : (data, row, col, node) => { 
      let node_text = ''; 
      const spacer = node.childNodes.length > 1 ? ' ' : ''; 
      node.childNodes.forEach(child_node => { 
       const temp_text = child_node.nodeName == "SELECT" ? child_node.selectedOptions[0].textContent : child_node.textContent; 
       node_text += temp_text ? `${temp_text}${spacer}` : ''; 
      }); 
      return node_text; 
     } 
    } 
},