jQuery表格排序器无法正常工作

Question

jQuery表格排序器无法正常工作

3

我正在使用jQuery tablesorter插件从csv文件动态生成表格，这一部分已经正常工作。但是，每当我尝试通过单击表头对表格进行排序时，Firebug会在控制台中报告此问题：

parsers is undefined
return parsers[i].type;\n

起初我认为这个问题是由于文档加载后表格没有准备好造成的，所以在从csv文件渲染表格后手动调用了tablesorter()来修复它。但这并没有解决问题。

此外，在表格的最末尾，表格会以一些灰色区域混乱的方式绘制出来。我想这与上述错误有关。

相关代码如下：

<html>

<head>  
    <link rel="stylesheet" href="blue/style.css" type="text/css" />

   <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
   <script type="text/javascript" src="jquery.tablesorter.js"></script>
   <script type="text/javascript" src="jquery.csv.js"></script>
   <script type="text/javascript" id="js">
   function sortThis() {
         $("#myTable").tablesorter({
            // sortList:[[0,0],[2,1]]
         });
   }; 
    </script> 
    <title>huh!?</title>

</head>

<body>

<table id="myTable" class="tablesorter" cellspacing="1" cellpadding="0" border="0"> 

<thead> 
<tr>    
<th>name</th> 
<th>type</th> 
<th>Date</th> 
</tr>
</thead>

<tbody>

    <script type="text/javascript">

        $.get('myfile.csv', function(data) {
            myfile = jQuery.csv()(data)
            for (var x = 0; x < myfile.length; x++) {
                str = "<tr>";
                for (var y = 0; y < myfile[x].length; y++) {
                    str += "<td>" + myfile[x][y] + "</td>";
                }
                str += "</tr>";
                $('#myTable').append(str);
            }
        });

        sortThis();
    </script>

</tbody>
</table>
</body>
</html>

提前感谢您的帮助。

- jknox

你认为有人有机会尝试猜测它可能是什么吗？你需要提供渲染标记，或者更好的方式是提供一个显示问题的URL。这就像是在大海捞针一样！ - redsquare

我使用了tablesorter插件，没有遇到这个问题。我认为你应该发布相关的代码片段和表格标记。 - tvanfosson

你能否在http://jsbin.com上给出一个简化版本的问题？ - Russ Cam

@Russ Cam：http://jsbin.com/esose/edit - jknox

3个回答

2

我无法对 JavaScript 错误进行评论。但问题的显示部分是，您将字符串附加到表而不是 tbody。

请更改为：

$('#myTable').append(str);

转换为：

$('#myTable tbody').append(str);

- Mark

我刚刚尝试了一下，但仍然出现相同的显示错误。 - jknox

看起来问题出在jquery csv上。如果我手动设置一个数据数组，你的for循环可以正确地显示它们： "myfile = [['a','b','c'], ['d','e','f']]" - Mark

数据已经从CSV文件中正确解析，并且jquery.csv也按预期工作。问题出在tablesorter插件上，当尝试对列进行排序时，但我还没有找出问题所在。 - jknox

我不相信这是真的。我用一个简单的 CSV 文件进行了测试，其中包含了上面相同的数据，2 行，一行是 a、b、c，另一行是 d、e、f。当我加载 CSV 并在第一个 for 循环之前输出 myfile.length 时，它告诉我有 5 列，而不是预期的 3 列。 - Mark

如果我使用Firebug DOM，我可以看到myfile数组被填充了所有的数据。此外，如果我禁用tablesorter插件，所有的数据都会被正确解析并格式化到表格中。 - jknox

0

我认为你的想法是对的，表格在排序时可能还没有完全写好。尽管javascript只有在前一个函数完成后才会开始下一个函数，但浏览器是多线程的，因此不能保证任何DOM更新已经完成，仅仅因为引起它们的函数已经完成。

Jquery提供了一种方法，在执行函数之前等待DOM元素加载完成，这就是准备好了（ready()）方法。

在调用sortThis()函数时，我建议您尝试以下替换：


$(document).ready( function() {
    sortThis();
});

在执行sortThis()之前，这将等待DOM完成加载。

在编写此文时，我意识到您正在使用$.get()更新表格，因此我确定DOM尚未加载，但是上述解决方案可能无法实现您想要的效果，因为它可能在表格完全加载之前执行。 $.get()函数在“后台”检索数据，因此您的sortThis()函数会在发出get请求时立即执行，而不是在完成时执行。您有两个可能的解决方案，一个是向get请求提供async=false，这样下一个函数将不会在GET请求完成并执行回调函数之前执行。


    $.get('myfile.csv', async=false, function(data) {
            myfile = jQuery.csv()(data)
            for (var x = 0; x ";
                for (var y = 0; y " + myfile[x][y] + "";
                }
                str += "";
                $('#myTable').append(str);
            }
        });

        sortThis();

在我看来，更好的解决方案是将sortThis()调用放在回调函数内部。这样应该会导致页面加载和处理所需的时间更短，因为在服务器通信时，脚本的其余部分可以继续执行。我会使用以下解决方案：


    $.get('myfile.csv', function(data) {
            myfile = jQuery.csv()(data)
            for (var x = 0; x ";
                for (var y = 0; y " + myfile[x][y] + "";
                }
                str += "";
                $('#myTable').append(str);
            }
            sortThis();
        });

希望这可以帮到你；）让我知道你得到了什么结果...

- sillyMunky

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Metcalfe · Accepted Answer

我遇到了类似的问题，但错误是因为空表（除了标题）而引起的。我想你之所以会得到同样的错误是因为同样的原因。

我认为问题在于tablesorter不知道表格数据，因为你是在页面加载后使用$.get()方法进行修改的。在调用sortThis()之前使用此调用来提醒tablesorter更改表格数据。

$('#myTable').trigger("update");

这应该可以解决你的问题。

作为 tablesorter 调用的一部分，你也可以使用以下语法来避免出现此错误：

$('#myTable:has(tbody tr)').tablesorter({
 ...
});

我在jQuery Google Group的讨论帖中找到了帮助。