AmanKumar AmanKumar - 1 month ago 10
HTML Question

Export selected row data of a table in csv format using jquery or javascript

I need to export table data in csv format of selected row.
right now i am able to export all table data.
how i do to export only particular selected row ?

<!DOCTYPE html>
<html>
<head>
<title>Sorting</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
.fixed-table-loading{display: none;}
span a{background-color: #eee;padding: 5px;}
</style>
</head>
<body>
<div class="container">
<span><a href="#" id="down">Download Csv</a></span>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<table class="table table-hover" id="home-table" data-toggle="table">
<thead>
<th>
<input type="checkbox" id="inp-chkbox1">
</th>
<th data-field="name" data-sortable="true">Name<span class="glyphicon glyphicon-sort"></span></th>
<th>Email</th>
<th>Phone No</th>
<th data-field="join-date" data-sortable="true" data-sorter="dsSorter">Join Date<span class="glyphicon glyphicon-sort"></span>
<!--th data-field="join-date" data-sortable="true" data-sorter="dsSorter">Join Date<span class="glyphicon glyphicon-sort"></span-->
</th>
<th data-field="stage" data-sortable="true">Status<span class="glyphicon glyphicon-sort"></span></th>
<th data-field="approval" data-sortable="true">Approved<span class="glyphicon glyphicon-sort"></span></th>
</thead>
<tbody class="table-body">
<tr>
<td><input type="checkbox" class="inpchk1">
<td>john</td>
<td>john@mail.com</td>
<td>9999999999</td>
<td>20/03/2013</td>
<td>like</td>
<td>no</td>
</tr>
<tr>
<td><input type="checkbox" class="inpchk1">
<td>duke</td>
<td>dk@exmail.com</td>
<td>8888888888</td>
<td>04/06/2010</td>
<td>dislike</td>
<td>yes</td>
</tr>
<tr>
<td><input type="checkbox" class="inpchk1">
<td>pole</td>
<td>ple@mail.com</td>
<td>7777777777</td>
<td>20/12/2013</td>
<td>like</td>
<td>no</td>
</tr>
<tr>
<td><input type="checkbox" class="inpchk1">
<td>bone</td>
<td>bn@exmail.com</td>
<td>1234567890</td>
<td>14/05/2016</td>
<td>like</td>
<td>yes</td>
</tr>
<tr>
<td><input type="checkbox" class="inpchk1">
<td>woli</td>
<td>wl@exmail.com</td>
<td>0987654321</td>
<td>02/01/2015</td>
<td>dislike</td>
<td>no</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#inp-chkbox1").change(function(){
$(".inpchk1").prop("checked",$(this).prop("checked"));
});
});

//Extraxt CSV

$(document).ready(function () {

function exportTableToCSV($table, filename) {

var $rows = $table.find('tr:has(td),tr:has(th)'),
//var $rows = $table.filter('tr:has(:checkbox:checked)').find('tr:has(td),tr:has(th)'),

tmpColDelim = String.fromCharCode(11),
tmpRowDelim = String.fromCharCode(0),

colDelim = '","',
rowDelim = '"\r\n"',

csv = '"' + $rows.map(function (i, row) {
var $row = $(row), $cols = $row.find('td,th');

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

return text.replace(/"/g, '""');
}).get().join(tmpColDelim);

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

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

console.log(csv);

if (window.navigator.msSaveBlob) {
window.navigator.msSaveOrOpenBlob(new Blob([csv], {type: "text/plain;charset=utf-8;"}), "csvname.csv")
}
else {
$(this).attr({ 'download': filename, 'href': csvData, 'target': '_blank' });
}
}

$("#down").on('click', function (event) {

exportTableToCSV.apply(this, [$('#home-table'), 'data.csv']);

});
});
</script>
</body>
</html>


Jsfiddle link

Answer

You could filter the rows containing checked inputs before mapping them:

$rows
.filter((i, row) => $(row).find("td input:checked").length)
.map(function (i, row) {
  var $row = $(row), $cols = $row.find('td,th');

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

    return text.replace(/"/g, '""');
  }).get().join(tmpColDelim);
})

Alternatively, you could select just the rows that contain checked inputs (as well as the header row):

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