我有一个由屏幕抓屏代码生成的表格,该表格运行良好。我还向该表添加了过滤器(搜索栏,下拉列表和显示条目限制)。此外,我刚刚添加了一个导出按钮,当单击并将所有表数据传输到csv时,该按钮将起作用。唯一的缺点是,即使启用了过滤器,导出按钮也将导出整个表。例如,如果我将下拉列表设置为仅在表格中显示男性,并将结果限制为每页10个,则“导出”按钮将仅导出整个表格。
我在这里搜索了一段时间,但没有找到解决方法。发送帮助。
这是我的html
<div class="table-responsive-sm">
<h2>The Law Society Solicitors</h2>
<p>This is a table of the output of The Law Society Web Scraping Code: Juan S. Gonzalez Jr.</p>
<div style="float:left" class= "col-sm-2">
<input class="form-control" id="Input" type="text" placeholder="Search...">
</div>
<div class="table-title">
</div>
<div id="show" style="float:right" class="table-filter">
<div class="col-lg-2">
<div class="show-entries">
<span>Show results</span>
<select class="form-control" name="limit" id="maxRows">
<option value="5000 ">Full Table</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</div>
</div>
</div>
<center>
<div class="col-sm-3">
<div class="filter-group">
<label>Desired Role</label>
<select id="mylist" onchange="myFunction()" class="form-control" >
<option>None</option>
<option>Assistant</option>
<option>Associate</option>
<option>Compliance Officer for Finance and Administration</option>
<option>Compliance Officer for Legal Practice</option>
<option>Consultant</option>
<option>Designated Partner</option>
<option>Director</option>
<option>Employee</option>
<option>In-house Solicitor</option>
<option>Locum</option>
<option>Member</option>
<option>Non-member Partner</option>
<option>Partner</option>
<option>Professional Support Lawyer</option>
<option>Prosecutor</option>
<option>Role not specified</option>
<option>SRA-approved manager - Director</option>
<option>SRA-approved manager - Member</option>
<option>SRA-approved manager - Partner</option>
<option>SRA-approved manager - Sole Practitioner</option>
</select>
</div>
</div>
</center>
</div>
<div id="Data">
<table id="tlaw" class="table table-striped">
<thead>
<tr>
<th>Solicitor</th>
<th>Office</th>
<th>Address</th>
<th>Primary_Role</th>
<th>Secondary_Role</th>
<th>Other_Role</th>
<th>Other_Role_1</th>
</tr>
</thead>
<tbody id="tls_table">
{% block content %}
{% endblock %}
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button><a href="#" type="button" class="export">Export Table data into Excel</a></button>
js代码
//export js code
$(document).ready(function() {
function exportTableToCSV($table, filename) {
var $rows = $table.find('tr:has(td)'),
tmpColDelim = String.fromCharCode(11), r
tmpRowDelim = String.fromCharCode(0),
colDelim = '","',
rowDelim = '"\r\n"',
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(/"/g, '""');
}).get().join(tmpColDelim);
}).get().join(tmpRowDelim)
.split(tmpRowDelim).join(rowDelim)
.split(tmpColDelim).join(colDelim) + '"';
if (false && window.navigator.msSaveBlob) {
var blob = new Blob([decodeURIComponent(csv)], {
type: 'text/csv;charset=utf8'
});
window.navigator.msSaveBlob(blob, filename);
} else if (window.Blob && window.URL) {
var blob = new Blob([csv], {
type: 'text/csv;charset=utf-8'
});
var csvUrl = URL.createObjectURL(blob);
$(this)
.attr({
'download': filename,
'href': csvUrl
});
} else {
var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
$(this)
.attr({
'download': filename,
'href': csvData,
'target': '_blank'
});
}
}
$(".export").on('click', function(event) {
// CSV
var args = [$('#Data>table'), 'export.csv'];
exportTableToCSV.apply(this, args);
});
});
</script>
我希望导出按钮能够与已经安装的过滤器一起很好地工作。