3

I'm using jQuery tablesorter plugin to generate dynamically a table from a csv file, and that part is working fine. However whenever i try to sort the table by clicking on the table headers, firebug reports this problem in the console:

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

Initially i though this problem was being caused by the table not being ready after the document loads, so i fixed that by manually calling tablesorter() after my table was rendered from the csv file. this didn't fix the issue though.

Also, at the very end of the table, the table is drawn garbled with some gray areas at the end. I suppose this is related to the error above.

The code in question is this:

<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>

Thanks in advance for your help.

Improve this question
4
  • um, do you think anyone has a chance to try and guess what it might be? You need to provide the rendered markup or better still a url showing the problem. Needle and haystack spring to mind! Commented Aug 9, 2009 at 15:07
  • I've used the tablesorter plugin without seeing this problem. I think you should post the relevant code snippets and your table markup. Commented Aug 9, 2009 at 15:07
  • could you give a skimmed down version of the problem on jsbin.com ? Commented Aug 9, 2009 at 15:17
  • @Russ Cam: jsbin.com/esose/edit Commented Aug 9, 2009 at 15:33

3 Answers 3

Reset to default
12

I experienced a similar problem, but the error was thrown because the table was empty (aside from the headers). I think you're getting the error for the same reason.

I believe the problem is that the tablesorter is not aware of the table data since you're modifying it after the page is loaded using the $.get() method. To alert the tablesorter to the change in table data use this call before calling sortThis().

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

That should handle your problem.

As part of the tablesorter call, you can also use the following syntax to avoid this error: 

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

I found the help on a jQuery Google Group posting.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I'd the same issue with empty tables and metcalfe's solutions fixes it.
I had the problem with an empty table. I like the :has(tbody tr) solution. Simple and elegant :)
-___- i didn't know that tablesorter cannot work without tbody tag, this post save my life..
Ah! Thank you so much, this solved my problem as well. It was slightly different but required an update as data came in via AJAX.
2

I can't comment on the javascript error. But the display part of the problem is that you are appending the string to the table, not the tbody.

Change this:

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

to this:

$('#myTable tbody').append(str);
Improve this answer

5 Comments

i just tried this and i am still having the same display error.
Looks like the problem is with jquery csv. If i manually set an array of data, your for loops display them correctly: "myfile = [['a','b','c'], ['d','e','f']]"
the data is being correctly parsed from the csv files, and jquery.csv is working as expected. the problem is with the tablesorter plugin, when trying to sort a column, but i havent been able to figure out what's wrong with it
I don't belive it is. I tested it with a simple csv file consisting of the same data above, 2 rows, one with a,b,c and one with d,e,f. When I load the csv and echo out myfile.length before the first for loop, it tells me 5 columns, not the expected 3 columns
if i use firebug DOM, i can see the myfile array being populated with all my data. moreover, if i disable the tablesorter plugin, all the data is correcly parsed and proper formatted into the table.
0

I think you were on the right track with the table not being fully written by the time you try to sort it. Although javascript will only start the next function when the previous one has completed, the browser is threaded so you can't guarantee that any DOM updates have completed just because the function that causes them has completed.

Jquery provides a method to wait until DOM elements are loaded before executing a function, this is the ready( function (){ ... }) method.

I would try the following replacement where you call your sortThis() function:


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

This will wait until the DOM has finished loading before trying to execute sortThis().

While writing this I realised you are using $.get() to update the table so I am sure the DOM isn't loaded, however the above solution may not do what you want because it may execute before the table is fully loaded. The $.get() function retrieves data 'in the background' so your sortThis() function is executed as soon as your get request is fired not when it is comleted. You have two possible solutions, one is to provide async=false to your get request, this way the next function will not execute until your GET request has completed and the callback function has been executed.


    $.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();

a better solution in my opinion is to put your sortThis() call inside the callback function. This should result in a page that takes less time to load and process, since the rest of your script can carry on while the server communication is happening. I would use the following solution:


    $.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();
        });

Hope this helps ;) let me know what results you get...

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.