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

我想通过tablesorter插件将过滤的记录写入csv格式的外部文件。我正在关注this answer Mottie，创建Tablesorter插件。在FireBug错误控制台中，出现错误，说Tablesorter - >将过滤的数据提取到csv文件

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>

这可能是可能的错误在上面的代码中提前:)

更新感谢：？解决方案

这两个答案都是对的！很难过，我可以只接受一个:(

问题是我使用的是一个早于1.4的Jquery版本，所以将它升级到最新的google cdn's-1.8，解决了这个问题。 :)

来源

2013-04-10 Learner

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

来源

2013-04-10 21:36:51

嗯，还是同样的错误，先生:( – Learner 2013-04-10 22:08:38

http://api.jquery.com/on/看看。我想想$（）。on只存在于jQuery 1.7+中，你正在使用jQuery 1.4，试着用一个新版本 – 2013-04-11 18:43:57

Spon！你是对的，只需检查一下，它工作正常:)谢谢！ – Learner 2013-04-12 06:34:47

的jQuery 1.4版不具有on()功能，将其更改为使用bind()代替。

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

或更新您的jQuery的版本使用到版本1.7+

来源

2013-04-12 04:07:54 Mottie

你说得对，先生！非常感谢:)因为，我可以只接受一个，我会用第一个答案！ – Learner 2013-04-12 06:35:09

没问题：P ...我没有注意到膝盖在他的评论中有同样的答案，直到我发布。 – Mottie 2013-04-12 12:56:02

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

回答

相关问题