CODEWITHSUNDEEP
javascripthtmlasp.netdatatable
RA19
RA19

Reputation: 819

Javascript exporting datatable to csv but want to include table headers and exclude three columns

Trying to export a datatable HTML table to CSV which I have implemented some code using Javascript but this doesnt include my column headers which I want to add in. Also I want to exclude a particular column from the export but not sure how to tweak the current code I have working:

Created a JS FIDDLE with an example where the CSV is not including headers and want to hide the column 'Office' and 'Age' on export: https://jsfiddle.net/matp4bjn/

function download_csv_normal(csv, filename) {
    var csvFile;
    var downloadLink;

    // CSV FILE
    csvFile = new Blob([csv], { type: "text/csv" });

    // Download link
    downloadLink = document.createElement("a");

    // File name
    downloadLink.download = filename;

    // We have to create a link to the file
    downloadLink.href = window.URL.createObjectURL(csvFile);

    // Make sure that the link is not displayed
    downloadLink.style.display = "none";

    // Add the link to your DOM
    document.body.appendChild(downloadLink);

    // Lanzamos
    downloadLink.click();
}

function export_table_to_csv_normal(html, filename) {
    var csv = [];
    //var rows = document.querySelectorAll(".vs tr"); //gets paginated version
    var rows = $("#tabledt").dataTable().fnGetNodes(); //gets all rows
    //var rows = document.querySelectorAll("tabledt tr");

    for (var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll("td, th");

        for (var j = 0; j < cols.length; j++)
            row.push(cols[j].innerText);

        csv.push(row.join(","));
    }

    // Download CSV
    download_csv_normal(csv.join("\n"), filename);
}


function pad2(n) { return n < 10 ? '0' + n : n }


document.querySelector(".savebtn").addEventListener("click", function () {
    var html = document.querySelector(".vs").outerHTML;
    var date = new Date();
    var file = "vstable_" + date.getFullYear().toString() + pad2(date.getMonth() + 1) + pad2(date.getDate()) + pad2(date.getHours()) + pad2(date.getMinutes()) + pad2(date.getSeconds()) + ".csv";
    export_table_to_csv_normal(html, file);
});

HTML:

  <button class="savebtn">
SAVE
</button>

Upvotes: 1

Views: 1262

Answers (1)

Umer Abbas
Umer Abbas

Reputation: 1876

Your code was working fine just needed to insert the header and implement condition for the columns to skip columns, you have made the columns to display none but that were still present in the code although not visible on the screen, that's why they were printing in the csv. In for loop you need to skip them.

Solution to your problem

for (var i = 0; i < rows.length; i++) {
    
    //only run for the first iteration to set header row in the csv
    if(i==0){
        var row2 = [], cols2 = $('#tabledt thead tr')[0];
        for(var i2 = 0; i2 < cols2['cells'].length; i2++){
            //skip office and age columns
            if(i2==2 || i2==3){continue;}
            
            //add columns
            row2.push(cols2['cells'][i2].innerText);
            //console.log(cols2['cells'][i2].innerText);
        }
        //insert header
        csv.push(row2.join(","));
    }        
        
    var row = [], cols = rows[i].querySelectorAll("td");
    
    for (var j = 0; j < cols.length; j++){
        //skip office and age columns
        if(j==2 || j==3){continue;}

        //add columns
        row.push(cols[j].innerText);
    }

    csv.push(row.join(","));
}

// Download CSV
download_csv_normal(csv.join("\n"), filename)

Upvotes: 1

Related Questions