使用select元素从datatable导出数据从select元素导出每个选项 [英] Export data from datatable with select element exports each option from the select element

问题描述

我试图添加导出按钮到我的datatable，我的表包括选择框里面，问题是 - 它导出包含在选择框中的所有选项值...我正在使用ajax从服务器获取结果然后在使用 dataSrc 函数之前处理不同的数据，如下所示：

  dataTableInit：function（columns_def）{
 var me = this; 
 me.dataTable_obj = $（'＃leads_table'）。DataTable（{
pageLength：per_page，
 dom：'Blfrtip'，
按钮：[
 'copy'，'csv'，'excel'，'pdf'，'print'
]，
order：[order]，
ajax：{
 url：route，
 type：method，
 data：filtering_data，
dataSrc：function（json）{
 return me.setLeadsT​​ableData（json）; 
} 
}，
列：columns_def，
 .... 
  

在 setLeadsT​​ableData 中，我检查从服务器返回的列，如果它是应该是一个选择框的列，我正在更改它的模板：

  setStatusesSelectBox：function（status_obj，lead_id）{
 var me = this; 
 var statuses_list =''; 
 var bg_c​​olor = sta tus_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_c​​olor = 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_c​​olor +'class ='form-control status-select' lead-id ='+ lead_id +'>; 
; 
 return select_start + statuses_list; 
}，
  

任何答案都会帮助，欣赏它

解决方案

使用 exportOptions ' format.body callback以控制导出的数据。使用dataTables API查找每个< select> 框的当前选定值。这里是第一列和pdf：

 按钮：[
 {
扩展：'pdf'，
 exportOptions：{
格式：{
 body：function（data，col，row）{
 if（col == 0）{
 return table 
 .cell（{row：row，column：col}）
 .nodes（）
 .to $（）
 .find（'：selected'） 
 .text（）
} else {
 return data; 
} 
} 
} 
}，
 ... 
}，
  

其中表是表实例，在您的情况下 me.dataTable_obj 。现在只需更改 if（col == 0）{，以便对您有< select> 盒子（我不知道）。

I am try to add export buttons to my datatable, my table include select boxes inside, the problem is - it export all the options values included in the select box... A am using ajax to get results from the server then manipulate different data before render using dataSrc function like so:

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,
       ....

in the setLeadsTableData i checking the columns returned from the server then if it a column that should be a select box I am changing it template like so:

 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;
},

any answer will help, appreciate it

解决方案

Use exportOptions'format.body callback to get control over the exported data. Use the dataTables API to find the current selected value for each <select> box. Here for the first column and pdf :

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

Where table is the table instance, in your case me.dataTable_obj. Now just change if (col == 0) { so it respond to the columns where you have <select> boxes (I dont know that).

这篇关于使用select元素从datatable导出数据从select元素导出每个选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！