在下面的DEMO中，您可以使用复选框打开/关闭列。
该表具有分页
也。您可以通过点击“ CSV”导出表格
//Export As CSV
function download_csv(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(html, filename) {
var csv = [];
var rows = document.querySelectorAll("table 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++)
if($(cols[j]).is(':visible')) {
row.push(cols[j].innerText[0]=='0' ? ("'" + cols[j].innerText) : cols[j].innerText);
}
csv.push(row.join(","));
}
// Download CSV
download_csv(csv.join("\n"), filename);
}
document.querySelector("#CSV").addEventListener("click", function () {
var html = document.querySelector("table").outerHTML;
export_table_to_csv(html, "DMA_Zipcode_Export.csv");
});
//Table Pagination
$(document).ready(function(){
$('ul').remove();
$('#stbutton').click();
$('#data').after('<ul class="pagination"></ul');
var rowsShown = 3;
var rowsTotal = $('#data tbody tr').length;
var numPages = rowsTotal/rowsShown;
for(i = 0;i < numPages;i++) {
var pageNum = i + 1;
$('ul').append('<li><a id="bread" href="#" rel="'+i+'">'+pageNum+'</a></li>');
}
$('#data tbody tr').hide();
$('#data tbody tr').slice(0, rowsShown).show();
$('li a:first').addClass('active');
$('li a').bind('click', function(){
$('li a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#data tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
css('display','table-row').animate({opacity:1}, 300);
});
});
/** CONNECT CHECKBOX TO TH - BEG**/
$(document).ready(function(e) {
$("input:checkbox:not(:checked)").each(function() {
var apndcss='';
var column = "table ." + $(this).attr("name");
apndcss+=column+"{display:none;}";
$('#appnedcss').html(apndcss)
console.log(apndcss);
});
$("#chkbtn").on('change','input',function(){
var apndcss='';
$("#chkbtn input:checkbox").each(function() {
if($(this).is(":not(:checked)")){
var column = "table ." + $(this).attr("name");
apndcss+=column+"{display:none;}";
}
})
$('#appnedcss').html(apndcss)
})
});
/** CONNECT CHECKBOX TO TH - END**/<!DOCTYPE html>
<html>
<head>
<title>Zipcode Table</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style id="appnedcss"></style>
</head>
<body>
<fieldset>
<button class="button button2" id="CSV">CSV</button>
</br>
<p id="chkbtn" style="margin-left: 5px;">
<input type="checkbox" class="theader" name="theader1" checked="checked"> CODE
<input type="checkbox" class="theader" name="theader2" checked="checked"> DIVISION
<input type="checkbox" class="theader" name="theader3" checked="checked"> PROVINCE
<input type="checkbox" class="theader" name="theader4" checked="checked"> NAME
</p>
</fieldset>
</br>
<table border="1px" id="data">
<thead>
<tr>
<th class="theader1" id="theader1">CODE TH</th>
<th class="theader2" id="theader2">DIVISION TH</th>
<th class="theader3" id="theader3">PROVINCE TH</th>
<th class="theader4" id="theader4">NAME TH</th>
</tr>
</thead>
<tbody>
<tr>
<td class="theader1" id="theader1">CODE 2</td>
<td class="theader2" id="theader2">DIVISION 2</td>
<td class="theader3" id="theader3">PROVINCE 2</td>
<td class="theader4" id="theader4">NAME 3</td>
</tr>
<tr>
<td class="theader1" id="theader1">CODE 4</td>
<td class="theader2" id="theader2">DIVISION 4</td>
<td class="theader3" id="theader3">PROVINCE 4</td>
<td class="theader4" id="theader4">NAME 4</td>
</tr>
<tr>
<td class="theader1" id="theader1">CODE 5</td>
<td class="theader2" id="theader2">DIVISION 5</td>
<td class="theader3" id="theader3">PROVINCE 5</td>
<td class="theader4" id="theader4">NAME 5</td>
</tr>
<tr>
<td class="theader1" id="theader1">CODE 6</td>
<td class="theader2" id="theader2">DIVISION 6</td>
<td class="theader3" id="theader3">PROVINCE 6</td>
<td class="theader4" id="theader4">NAME 6</td>
</tr>
<tr>
<td class="theader1" id="theader1">CODE 7</td>
<td class="theader2" id="theader2">DIVISION 7</td>
<td class="theader3" id="theader3">PROVINCE 7</td>
<td class="theader4" id="theader4">NAME 7</td>
</tr>
<tr>
<td class="theader1" id="theader1">CODE 8</td>
<td class="theader2" id="theader2">DIVISION 8</td>
<td class="theader3" id="theader3">PROVINCE 8</td>
<td class="theader4" id="theader4">NAME 8</td>
</tr>
<tr>
<td class="theader1" id="theader1">CODE 9</td>
<td class="theader2" id="theader2">DIVISION 9</td>
<td class="theader3" id="theader3">PROVINCE 9</td>
<td class="theader4" id="theader4">NAME 9</td>
</tr>
<tr>
<td class="theader1" id="theader1">CODE 10</td>
<td class="theader2" id="theader2">DIVISION 10</td>
<td class="theader3" id="theader3">PROVINCE 10</td>
<td class="theader4" id="theader4">NAME 10</td>
</tr>
<tr>
<td class="theader1" id="theader1">CODE 11</td>
<td class="theader2" id="theader2">DIVISION 11</td>
<td class="theader3" id="theader3">PROVINCE 11</td>
<td class="theader4" id="theader4">NAME 11</td>
</tr>
</tbody>
</table>
</body>
</html>
问题在于，当您仅导出表时，当前的3个表行都将被导出。
其他页面上的行将被忽略。
冲突在这里
if($(cols[j]).is(':visible')) {
row.push(cols[j].innerText[0]=='0' ? ("'" + cols[j].innerText) : cols[j].innerText);
}
它仅导出表的可视部分。
但是，如果您摆脱了该代码段，则可以切换复选框，但是CSV按钮将返回WHOLE表。
因此，我希望复选框可以控制表格的可见性和可导出性，但我希望CSV函数也可以导出其他页面上的行。