Tablesorter -> 将过滤后的数据提取到 csv 文件答案

【问题标题】：Tablesorter -> Extracting filtered data to csv fileTablesorter -> 将过滤后的数据提取到 csv 文件
【发布时间】：2013-04-02 22:12:32
【问题描述】：

我想将通过 tablesorter 插件过滤的记录写入 csv 格式的外部文件。我通过 Mottie 关注 this answer，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 一样旧。所以将它升级到最新的 google cdn's - 1.8 ，解决了这个问题。感谢答案:)

【问题讨论】：

标签： javascript jquery jquery-plugins tablesorter

【解决方案1】：

使用新版本的 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(',') )
        });
});

【讨论】：

api.jquery.com/on 看看。我认为 $().on 仅存在于 jQuery 1.7+ 中。您正在使用 jQuery 1.4。尝试使用新版本。
赞助！你是对的，刚刚检查过，它工作正常 :) 谢谢！

【解决方案2】：

jQuery v1.4 没有on() 函数，改为使用bind()。

$('.exportcsv').bind('click', function(){

或者将你正在使用的jQuery版本更新到1.7+版本

【讨论】：

您说得对，先生！非常感谢 :) 因为我只能接受一个，所以我会选择第一个答案！
没问题 :P... 在我发帖之前，我没有注意到 kneves 在他的 cmets 中有同样的答案。