1
選択した行のCSV形式で表データをエクスポートする必要があります。 今、私はすべてのテーブルデータをエクスポートすることができます。 選択した特定の行のみをエクスポートするにはどうすればよいですか？jqueryまたはjavascriptを使用して、csv形式で表の選択した行データをエクスポートします。
<!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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>