Search code examples
javascriptjqueryexcelbootstrap-table

Values are empty on editable columns while exporting bootstraptable

While exporting the bootstraptable as excel, headers and the non editable columns are exported properly but the editable columns are showing empty values.

enter image description here

in the above image first column is exported properly and the second column is showing empty values on excel.

HTML

<div id="toolbar">
    <select class="form-control">
        <option value="">Select Export</option>
        <option value="all">Export All</option>
        <option value="selected">Export Selected</option>
    </select>
</div>
<table id="cttable" data-search="true" data-toolbar="#toolbar"
    data-id-table="advancedTable" data-show-refresh="true"
    data-show-columns="true" data-classes="table table-hover"
    data-show-export="true" 
    data-url="MY SERVER URL"
    data-show-footer="false" data-minimum-count-columns="2"
    data-pagination="true" data-id-field="id" data-striped="true"
    data-page-list="[10, 25, 50, 100]" data-show-multi-sort="true"
    data-sort-priority='[{"sortName": "id","sortOrder":"asc"}]'
    data-show-footer="false">
</table>

JS

var $table=$("#cttable");

var ctData=[];

var xhr=$.ajax({
    type : "GET",
    dataType: "json",
    url : dir + "MY SERVER URL",
    async: false,
    success : function(resp) {
        ctData = JSON.parse(resp);
    }
});

$table.bootstrapTable('destroy');

$table.bootstrapTable({
    cookie : true,
    cookieIdTable : 'cookieid',
    cookieExpire : '5mi',
    data : ctData,
    height : 550,
    filterControl : true,

    // fixedColumns: true,
    // fixedNumber: 5,
    showExport : true,
    exportTypes : [ 'excel' ],
    columns : [ {
        field : 'state',
        checkbox : true,
        align : 'center',
        valign : 'middle'
    }, {
        title : 'ID',
        field : 'id',
        align : 'middle',
        valign : 'middle',
        sortable : true,
    }, {
        title : 'Col1',
        field : 'col1',
        align : 'middle',
        valign : 'middle',
        sortable : true,
        emptytext:"Please fill here!",
    }, {
        title : 'col2',
        field : 'col2',
        align : 'left',
        valign : 'middle',
        sortable : true,
        filterControl : 'input'
    }, {
        title : 'col3',
        field : 'col3',
        align : 'middle',
        valign : 'middle',
        sortable : true,
    }, {
        title : 'col4',
        field : 'col4',
        align : 'left',
        valign : 'middle',
        sortable : true,
    }, {
        title : 'col5',
        field : 'col5',
        align : 'left',
        valign : 'middle',
        sortable : true,

    }, {
        title : 'col6',
        field : 'col6',
        align : 'left',
        valign : 'middle',
        sortable : true,

    }, {
        title : 'col7',
        field : 'col7',
        align : 'left',
        valign : 'middle',
        sortable : true,

    }, {
        title : 'col8',
        field : 'col8',
        align : 'left',
        valign : 'middle',
        sortable : true,

    }, {
        title : 'col9',
        field : 'col9',
        align : 'left',
        valign : 'middle',
        sortable : true,

    }, {
        title : 'col10',
        field : 'col10',
        align : 'left',
        valign : 'middle',
        sortable : true,

    }, {
        title : 'col11',
        field : 'col11',
        align : 'left',
        valign : 'middle',
        sortable : true,

    }, {
        title : 'col12',
        field : 'col12',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true         
    }, {
        title : 'col13',
        field : 'col13',
        align : 'left',
        valign : 'middle',
        sortable : true,

    }, {
        title : 'col14',
        field : 'col14',
        align : 'left',
        valign : 'middle',
        sortable : true,

    }, {
        title : 'col15',
        field : 'col15',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col16',
        field : 'col16',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col17',
        field : 'col17',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col18',
        field : 'col18',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col19',
        field : 'col19',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col20',
        field : 'col20',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col21',
        field : 'col21',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col22',
        field : 'col22',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col23',
        field : 'col23',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col24',
        field : 'col24',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col25',
        field : 'col25',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col26',
        field : 'col26',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col27',
        field : 'col27',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col28',
        field : 'col28',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }]
}).on('editable-init.bs.table', function(e){
    console.log("init ", e.toString());
}).on('editable-save.bs.table', function(field, row, oldValue, $el){
    console.log("save ", field, row, oldValue, $el);
    var xhr=$.ajax({
        type : "POST",
        contentType: "application/json",
        data: JSON.stringify(oldValue),
        url : dir + "MY SERVER URL",
        async: false,
        success : function(resp) {
            console.log(resp);
        },
        error:function(resp){
            console.log("error:", resp)
        }
    });
});
$('#toolbar').find('select').change(function() {
        $table.bootstrapTable('refreshOptions', {
          exportDataType: $(this).val()       
        });
     });

Please let me know what is the problem, thank you.

Solution

  • I have used the old version of tableExport.js, but its working when i checked with the latest version of tableExport.js what they have in bootstrap-table examples.