Export html table into CSV file , always return em

I am working on an asp.net mvc5 web application. and i need to implement a functionality to export an Html table into a .csv file . so i added the following link :-

<a href="#" class="export">Export Table data into Excel</a>

and i have the following script:-

$(document).ready(function () {

    function exportTableToCSV($table, filename) {

        var $rows = $table.find('tr:has(td)'),

            // Temporary delimiter characters unlikely to be typed by keyboard
            // This is to avoid accidentally splitting the actual contents
            tmpColDelim = String.fromCharCode(11), // vertical tab character
            tmpRowDelim = String.fromCharCode(0), // null character

            // actual delimiter characters for CSV format
            colDelim = '","',
            rowDelim = '"\r\n"',

            // Grab text from table into CSV formatted string
            csv = '"' + $rows.map(function (i, row) {
                var $row = $(row),
                    $cols = $row.find('td');

                return $cols.map(function (j, col) {
                    var $col = $(col),
                        text = $col.text();

                    return text.replace('"', '""'); // escape double quotes

                }).get().join(tmpColDelim);

            }).get().join(tmpRowDelim)
                .split(tmpRowDelim).join(rowDelim)
                .split(tmpColDelim).join(colDelim) + '"',

            // Data URI
            csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);

        $(this)
            .attr({
                'download': filename,
                'href': csvData,
                'target': '_blank'
            });
    }

    // This must be a hyperlink
    $(".export").on('click', function (event) {
        // CSV
        exportTableToCSV.apply(this, [$('#dvData>table'), 'export.csv']);

        // IF CSV, don't do event.preventDefault() or return false
        // We actually need this to be a typical hyperlink
    });
});

and i am using the tabletoCSV plugin at this link , as follow:-

jQuery.fn.table2CSV = function (options) {
    var options = jQuery.extend({
        separator: ',',
        header: [],
        delivery: 'popup' // popup, value
    },
    options);

    var csvData = [];
    var headerArr = [];
    var el = this;

    //header
    var numCols = options.header.length;
    var tmpRow = []; // construct header avalible array

    if (numCols > 0) {
        for (var i = 0; i < numCols; i++) {
            tmpRow[tmpRow.length] = formatData(options.header[i]);
        }
    } else {
        $(el).filter(':visible').find('th').each(function () {
            if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
        });
    }

    row2CSV(tmpRow);

    // actual data
    $(el).find('tr').each(function () {
        var tmpRow = [];
        $(this).filter(':visible').find('td').each(function () {
            if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
        });
        row2CSV(tmpRow);
    });
    if (options.delivery == 'popup') {
        var mydata = csvData.join('\n');
        return popup(mydata);
    } else {
        var mydata = csvData.join('\n');
        return mydata;
    }

    function row2CSV(tmpRow) {
        var tmp = tmpRow.join('') // to remove any blank rows
        // alert(tmp);
        if (tmpRow.length > 0 && tmp != '') {
            var mystr = tmpRow.join(options.separator);
            csvData[csvData.length] = mystr;
        }
    }
    function formatData(input) {
        // replace " with â€œ
        var regexp = new RegExp(/["]/g);
        var output = input.replace(regexp, "â€œ");
        //HTML
        var regexp = new RegExp(/\<[^\<]+\>/g);
        var output = output.replace(regexp, "");
        if (output == "") return '';
        return '"' + output + '"';
    }
    function popup(data) {
        var generator = window.open('', 'csv', 'height=400,width=600');
        generator.document.write('<html><head><title>CSV</title>');
        generator.document.write('</head><body >');
        generator.document.write('<textArea cols=70 rows=15 wrap="off" >');
        generator.document.write(data);
        generator.document.write('</textArea>');
        generator.document.write('</body></html>');
        generator.document.close();
        return true;
    }
};

currently i got the following markup, which shows a table and the Export hyperlink :-

<table id="dvData" class= "table table-striped table-bordered bootstrap-datatable datatable">
    <tr>
        <th></th>
        <th>
            Name
        </th>
        <th class="hidden-phone hidden-tablet">
             Description
        </th>
        <th>
            User Groups
        </th>
        <th>
            Security Roles
        </th>
        <th class="hidden-phone hidden-tablet">

        </th>
    </tr>

    <tr id = "234">
        <td>
            <a href="/SecurityGroup/Edit/234">Edit</a> 
 |
<a data-ajax="true" data-ajax-confirm="Are You sure You want to delete (de)" data-ajax-failure="deletionerror" data-ajax-method="Post" data-ajax-success="deletionconfirmation" href="/SecurityGroup/Delete/234">Delete</a>  </td>
        <td>
            <a href="/SecurityGroup/Details/234">de</a>
        </td>
        <td class="hidden-phone hidden-tablet">
            d
        </td>
        <td>
            The are <a href="/SecurityGroup/Details/234">0</a> Users.

        </td>
        <td>

        </td>
        <td class="center hidden-phone hidden-tablet">



            <a class="btn btn-success" href="/SecurityGroup/Details/234">
    <i class="icon-zoom-in icon-white"></i>
    Details
    </a>

        </td>
    </tr>
    <tr id = "233">
        <td>
            <a href="/SecurityGroup/Edit/233">Edit</a> 
  </td>
        <td>
            <a href="/SecurityGroup/Details/233">only me</a>
        </td>
        <td class="hidden-phone hidden-tablet">

        </td>
        <td>
            The are <a href="/SecurityGroup/Details/233">10</a> Users.

        </td>
        <td>

        </td>
        <td class="center hidden-phone hidden-tablet">



            <a class="btn btn-success" href="/SecurityGroup/Details/233">
    <i class="icon-zoom-in icon-white"></i>
    Details
    </a>

        </td>
    </tr>
    <tr id = "230">
        <td>
            <a href="/SecurityGroup/Edit/230">Edit</a> 
 |
<a data-ajax="true" data-ajax-confirm="Are You sure You want to delete (rwerwe)" data-ajax-failure="deletionerror" data-ajax-method="Post" data-ajax-success="deletionconfirmation" href="/SecurityGroup/Delete/230">Delete</a>  </td>
        <td>
            <a href="/SecurityGroup/Details/230">rwerwe</a>
        </td>
        <td class="hidden-phone hidden-tablet">

        </td>
        <td>
            The are <a href="/SecurityGroup/Details/230">0</a> Users.

        </td>
        <td>

        </td>
        <td class="center hidden-phone hidden-tablet">



            <a class="btn btn-success" href="/SecurityGroup/Details/230">
    <i class="icon-zoom-in icon-white"></i>
    Details
    </a>

        </td>
    </tr>
    <tr id = "231">
        <td>
            <a href="/SecurityGroup/Edit/231">Edit</a> 
  </td>
        <td>
            <a href="/SecurityGroup/Details/231">users</a>
        </td>
        <td class="hidden-phone hidden-tablet">

        </td>
        <td>
            The are <a href="/SecurityGroup/Details/231">1</a> Users.

        </td>
        <td>

        </td>
        <td class="center hidden-phone hidden-tablet">



            <a class="btn btn-success" href="/SecurityGroup/Details/231">
    <i class="icon-zoom-in icon-white"></i>
    Details
    </a>

        </td>
    </tr>
    <tr id = "232">
        <td>
            <a href="/SecurityGroup/Edit/232">Edit</a> 
  </td>
        <td>
            <a href="/SecurityGroup/Details/232">w</a>
        </td>
        <td class="hidden-phone hidden-tablet">
            w
        </td>
        <td>
            The are <a href="/SecurityGroup/Details/232">5</a> Users.

        </td>
        <td>

        </td>
        <td class="center hidden-phone hidden-tablet">



            <a class="btn btn-success" href="/SecurityGroup/Details/232">
    <i class="icon-zoom-in icon-white"></i>
    Details
    </a>

        </td>
    </tr>

</table></div></div></div>


<a href="#" class="export">Export Table data into Excel</a> </section>

but when i click on the export hyperlink , and i save the document ; the document size will be 1 kb only and when i open it using excel it shows empty sheet and if i open it using Notepad it will show "" so can anyone adivce ?

I'll leave a working fiddle example at the bottom.

The part that needed some work was primarily:

exportTableToCSV.apply(this, [$('#dvData>table'), 'export.csv']);

To:

exportTableToCSV.apply(this, [$('#dvData'), 'export.csv']);

Then it was a matter of formatting the results:

// actual delimiter characters for CSV format
colDelim = ",",
rowDelim = "\r\n",

// Grab text from table into CSV formatted string
csv = $rows.map(function (i, row) {
            var $row = $(row),
                $cols = $row.find('td');
            return $cols.map(function (j, col) {
                var $col = $(col),
                    text = '"' + $col.text().replace(/(\r\n|\n|\r)/gm,"").trim() + '"';
                return text //.replace('"', '""'); // escape double quotes
            }).get().join(tmpColDelim);
        }).get().join(tmpRowDelim)
            .split(tmpRowDelim).join(rowDelim)
            .split(tmpColDelim).join(colDelim),

It now returns a comma separated list, where each column is enclosed with quotes.

Example on jsFiddle

I'll leave the fine tuning to you.