jquery tablesorter和文件大小

Posted

技术标签:

【中文标题】jquery tablesorter和文件大小【英文标题】:jquery tablesorter and filesizes 【发布时间】:2010-10-21 03:52:02 【问题描述】:

我目前正在尝试实现 jquery tablesorter,并且我的列之一是文件大小,我已经找到了一个 sn-p 的代码,但是我不断收到错误。

如果有人可以帮助我,那就太好了。

jQuery TableSorter: http://tablesorter.com/

jQuery TableSorter 文件大小代码: http://groups.google.com/group/jquery-en/browse_thread/thread/fd5729a7175f6710?fwc=1

我的桌子:

<table cellspacing="0" cellpadding="0" class="tablesorter">
  <thead>
    <tr>
      <th valign="middle" align="left" class="filebox header"><input type="checkbox" id="checkboxAll" name="checkboxAll"></th>
      <th valign="middle" align="left" class="header filename"><strong>Filename</strong></th>
      <th valign="middle" align="left" class="header filesize"><strong>Size</strong></th>
      <th valign="middle" align="left" class="header filedate"><strong>Date</strong></th>
    </tr>
  </thead>
  <tbody class="file">
    <tr>
      <td valign="middle" align="left" class="filebox"><input type="checkbox" id="checkbox[]" name="checkbox[]"></td>
      <td valign="middle" align="left" class="filename">002.jpg</td>
      <td valign="middle" align="left" class="filesize">113 kb</td>
      <td valign="middle" align="left" class="filedate">21/10/2010 12:18</td>
    </tr>
    <tr>
      <td valign="middle" align="left" class="filebox"><input type="checkbox" id="checkbox[]" name="checkbox[]"></td>
      <td valign="middle" align="left" class="filename">kasper.jpg</td>
      <td valign="middle" align="left" class="filesize">41 kb</td>
      <td valign="middle" align="left" class="filedate">05/07/2010 11:33</td>
    </tr>
    <tr>
      <td valign="middle" align="left" class="filebox"><input type="checkbox" id="checkbox[]" name="checkbox[]"></td>
      <td valign="middle" align="left" class="filename">Linda__Angela.jpg</td>
      <td valign="middle" align="left" class="filesize">212 kb</td>
      <td valign="middle" align="left" class="filedate">05/07/2010 11:46</td>
    </tr>
    <tr>
      <td valign="middle" align="left" class="filebox"><input type="checkbox" id="checkbox[]" name="checkbox[]"></td>
      <td valign="middle" align="left" class="filename">loader.gif</td>
      <td valign="middle" align="left" class="filesize">5 kb</td>
      <td valign="middle" align="left" class="filedate">05/07/2010 11:33</td>
    </tr>
    <tr>
      <td valign="middle" align="left" class="filebox"><input type="checkbox" id="checkbox[]" name="checkbox[]"></td>
      <td valign="middle" align="left" class="filename">Lucas.jpg</td>
      <td valign="middle" align="left" class="filesize">111 kb</td>
      <td valign="middle" align="left" class="filedate">05/07/2010 11:46</td>
    </tr>
    <tr>
      <td valign="middle" align="left" class="filebox"><input type="checkbox" id="checkbox[]" name="checkbox[]"></td>
      <td valign="middle" align="left" class="filename">people.psd</td>
      <td valign="middle" align="left" class="filesize">2 mb</td>
      <td valign="middle" align="left" class="filedate">05/07/2010 11:33</td>
    </tr>
    <tr>
      <td valign="middle" align="left" class="filebox"><input type="checkbox" id="checkbox[]" name="checkbox[]"></td>
      <td valign="middle" align="left" class="filename">people1.jpg</td>
      <td valign="middle" align="left" class="filesize">16 kb</td>
      <td valign="middle" align="left" class="filedate">05/07/2010 11:33</td>
    </tr>
    <tr>
      <td valign="middle" align="left" class="filebox"><input type="checkbox" id="checkbox[]" name="checkbox[]"></td>
      <td valign="middle" align="left" class="filename">P_750g_Basmati_FCollection.zip</td>
      <td valign="middle" align="left" class="filesize">265 mb</td>
      <td valign="middle" align="left" class="filedate">05/07/2010 11:46</td>
    </tr>
    <tr>
      <td valign="middle" align="left" class="filebox"><input type="checkbox" id="checkbox[]" name="checkbox[]"></td>
      <td valign="middle" align="left" class="filename">T_2kg_LongWhite_FCollection.zip</td>
      <td valign="middle" align="left" class="filesize">441 mb</td>
      <td valign="middle" align="left" class="filedate">05/07/2010 11:50</td>
    </tr>
  </tbody>
</table>

我的 jQuery 代码:

jQuery(document).ready( function() 

          jQuery.tablesorter.addParser(
            id: 'filesize', 
            is: function(s)  
             return s.match(new RegExp( /[0-9]+(\.[0-9]+)?\ (KB|B|GB|MB|TB)/ ));
            , 
            format: function(s) 
              var suf = s.match(new RegExp( /(KB|B|GB|MB|TB)$/ ))[1];
              var num = parseFloat(s.match( new RegExp( /^[0-9]+(\.[0-9]+)?/ ))[0]);
              switch(suf) 
                case 'B':
                  return num;
                case 'KB':
                  return num * 1024;
                case 'MB':
                  return num * 1024 * 1024;
                case 'GB':
                  return num * 1024 * 1024 * 1024;
                case 'TB':
                  return num * 1024 * 1024 * 1024 * 1024;
                
            , 
            type: 'numeric' 
          ); 

          jQuery(".tablesorter").tablesorter(
            headers: 
              2:  sorter: 'filesize' 
                                            
          );
        );

错误:

s.match(new RegExp(/(KB|B|GB|MB|TB)$/)) 为空

【问题讨论】:

【参考方案1】:

我的猜测是正则表达式区分大小写。正则表达式包含 B、KB、MB 等,但您的值是 b、kB、mB 等。

在正则表达式后添加“i”以使其不区分大小写。像这样:

new RegExp(/[0-9]+(\.[0-9]+)?\ (KB|B|GB|MB|TB)/i)

new RegExp(/^[0-9]+(\.[0-9]+)?/i)

【讨论】:

【参考方案2】:

也许正则表达式应该是这样的?

 s.match(new RegExp(/.*(KB|B|GB|MB|TB)$/))

既然你想忽略那里的数字部分......

【讨论】:

以上是关于jquery tablesorter和文件大小的主要内容,如果未能解决你的问题,请参考以下文章

jQuery插件 tablesorter 表格排序 使用说明

jQuery插件 tablesorter 表格排序 使用说明

jQuery tablesorter 页面插件不起作用

tablesort jquery 插件在谷歌浏览器中工作吗

使用 jquery tablesorter 插件,有一个下拉框选择一个项目

Grails:尝试使用 tablesorter