Tablesorter ->将过滤后的数据提取到csv文件
Tablesorter ->将过滤后的数据提取到csv文件
提问于 2013-04-10 13:13:27
我想把过滤过的记录，通过tablesorter插件，写成一个csv格式的外部文件。我跟随着this answer，Mottie，Tablesorter的创建者。在FireBug错误控制台中，我得到的错误是
TypeError：$(.).on不是函数$('.export').on('click'，function(){
这是我的文件，使用tablesorter提取csv格式的记录，
<%@page import="java.util.Iterator"%>
<%@page import="java.util.ArrayList"%>
<%
ArrayList<ArrayList<String>> resultsetlist = (ArrayList<ArrayList<String>>) request.getAttribute("SearchRecordsList");
%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Research Records</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
<!-- Demo stuff -->
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script>
<link href="js/tablesorter/docs/css/prettify.css" rel="stylesheet">
<script src="js/tablesorter/docs/js/prettify.js"></script>
<script src="js/tablesorter/docs/js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="js/tablesorter/css/theme.blue.css">
<script src="js/tablesorter/js/jquery.tablesorter.js"></script>
<script src="js/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script>
$(function() {
$('table').tablesorter({
theme : 'blue',
widgets: ['zebra', 'filter' ]
});
});
$('.exportcsv').on('click', function(){
var csv = [];
// find only visible rows; we're ignoring filtered/hidden rows
$('table').find('tbody tr:visible').find('td').each(function(){
alert("Value of text" + $(this).text());
csv.push( $(this).text());
});
// do what you want with the csv data here
$('textarea').val( csv.join(',') )
});
</script>
<link rel="stylesheet" type="text/css" href="stylesheet1.css">
<title>JSP Page</title>
</head>
<body>
<table class="tablesorter" id="tablesorter-id-variable">
<thead>
<tr>
<%
int index = 0;
String s = "null";
Iterator itrcol = resultsetlist.iterator();
if (itrcol.hasNext()) {
ArrayList<String> col_record = (ArrayList<String>) itrcol.next();
for (index = 0; index < col_record.size(); index++) {
s = col_record.get(index);
%>
<th>
<% out.println(s);%>
</th>
<%
} // End of -for-
%>
</tr>
<%
} //end if
%>
</thead>
<tbody>
<tr>
<%
Iterator itr = resultsetlist.iterator();
itr.next();
while (itr.hasNext()) {
ArrayList<String> each_record = (ArrayList<String>) itr.next();
for (index = 0; index < each_record.size(); index++) {
s = each_record.get(index);
%>
<td>
<% out.println(s);%>
</td>
<%
} // End of -for-
%>
</tr>
<%
} //end while
%>
</tbody>
</table>
<button class="exportcsv">export csv</button><br>
<textarea cols="40" rows="10"></textarea>
</body>
</html>在上面的代码中有什么可能的错误？(预先谢谢:)
更新:解决方案
两个答案都是对的！遗憾的是，我只能接受一个：
问题是，我使用的Jquery版本只有1.4。因此，将其升级到最新的谷歌cdn- 1.8，解决了这个问题。感谢答案:)
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-04-10 13:36:51
使用新版本的jQuery，因为$().on仅在jQuery 1.7+中可用，而您正在使用jQuery 1.4。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>您可以将其用于安全性，许多javascript库使用$作为默认值。在这个.ready()中，$引用jQuery对象。
jQuery(document).ready(function($) {
$(function() {
$('table').tablesorter({
theme : 'blue',
widgets: ['zebra', 'filter' ]
});
});
$('.exportcsv').on('click', function(){
var csv = [];
// find only visible rows; we're ignoring filtered/hidden rows
$('table').find('tbody tr:visible').find('td').each(function(){
alert("Value of text" + $(this).text());
csv.push( $(this).text());
});
// do what you want with the csv data here
$('textarea').val( csv.join(',') )
});
});Stack Overflow用户
发布于 2013-04-11 20:07:54
jQuery v1.4没有on()函数，改为使用bind()。
$('.exportcsv').bind('click', function(){或更新用于版本jQuery的1.7+版本。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15936538
复制
相似问题
jQuery:使用eq重新排列列表项
使用.eq查找所选div的顺序
使用JS查找表项
Jquery中的动画:使用eq重新排列列表项？
使用JQuery eq设置附加输入的值
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
