Datatables - Add Row / Columns on export

Viewed 6343

I am looking at adding some data into the exporting csv from a datatables export button that isn't in the initial table on the view.

The table as headers looks like below with data following below in rows.

ID | Name | Address | Contact | Description

I'm trying to get it so that when the export button is clicked and a csv is generated, a new row is added to the start which will have values in two cells above ID and Name, as well as adding new columns onto the end of the table (after description field).

I've tested using an example I found using the "customize" function but couldn't get this to work properly.

Any pointers would be appreciated!


How I'd like it to look:

Nickname | Value

Action   | ID    | Name | Address | Contact | Description | Date | Code

Edit:

var table;
$(document).ready(function () {

var filetitle = "file";
if (document.getElementById("csvfilename") !== null) {
    filetitle = document.getElementById("csvfilename").textContent;
}

table = $('.datatables').DataTable({
    "initComplete": function () {
        $('.datatables').attr("hidden", false);
    },
    stateSave: true,
    deferRender: true,
    responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.childRowImmediate,
            type: ''
        }
    },
    paging: $(".datatables").find("tbody tr").length > 10,
    lengthChange: false,
    dom: 'lfrtip',
    buttons: [
        {
            extend: 'csv',
            title: filetitle,
            exportOptions: {
                columns: ':visible'
            }
        },
        {
            extend: 'excel',
            title: filetitle,
            exportOptions: {
                columns: ':visible'
            }
        }
    ]
});
$(".dt-buttons").hide(); //Hide redundant buttons
table.search("").draw(); //Clear search filter

//Export current table's contents to CSV in browser.
$(".export-csv").on("click", function (e) {
    e.preventDefault();
    table.button('0').trigger()
});

$('.pagelength').on('click', function () {
    var length = $(this).data('value');
    table.page.len(length).draw();
});

$(window).resize(function () {
    table.draw();
});
});

The above is the js file which will handle datatables for the view, and the code when export is pressed.

I got errors when I tried to implement and alter this. Error was that it wasn't used. I added this into the export button under the title option.

customize: function (xlsx) {
    console.log(xlsx);
    var sheet = xlsx.xl.worksheets['sheet1.xml'];
    var downrows = 3;
    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="42">';
            msg += '<is>';
            msg +=  '<t>'+value+'</t>';
            msg+=  '</is>';
            msg+='</c>';
        }
        msg += '</row>';
        return msg;
    }

    //insert
    var r1 = Addrow(1, [{ k: 'A', v: 'ColA' }, { k: 'B', v: '' }, { k: 'C', v: '' }]);
    var r2 = Addrow(2, [{ k: 'A', v: '' }, { k: 'B', v: 'ColB' }, { k: 'C', v: '' }]);
    var r3 = Addrow(3, [{ k: 'A', v: '' }, { k: 'B', v: '' }, { k: 'C', v: 'ColC' }]);

    sheet.childNodes[0].childNodes[1].innerHTML = r1 + r2+ r3+ r4+ sheet.childNodes[0].childNodes[1].innerHTML;
}

Unsure of how to edit this to add columns to the end as well.

0 Answers
Related