ansaurus

Question

Answer 1

A:

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

Mark 2009-08-09 16:07:55

i just tried this and i am still having the same display error.

2009-08-09 16:15:14

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']]"

Mark 2009-08-09 16:27:05

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

2009-08-09 16:45:51

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

Mark 2009-08-09 17:16:10

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.

2009-08-09 17:26:49

if you say so

Mark 2009-08-09 18:41:26

Answer 2

A:

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

sillyMunky 2009-08-23 12:55:49

Answer 3

+2 A:

I experienced I 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.

Josh Metcalfe 2010-05-06 14:45:34

I'd the same issue with empty tables and metcalfe's solutions fixes it.

emeraldjava 2010-05-11 13:57:06

ansaurus

tags:

views:

answers:

jQuery tablesorter sorting not working

related questions