All geek questions in one place

JQuery tablesorter sorting not working

I use the jQuery tablesorter plugin to dynamically create a table from a csv file, and this part works fine. However, whenever I try to sort a table by clicking on the table headers, firebug reports this problem in the console:

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

Initially, although this problem was caused by the fact that the table was not ready after loading the document, so I fixed it by manually calling tablesorter () after my table was displayed from the csv file. this did not fix the problem.

In addition, at the very end of the table, the table is drawn distorted with gray areas at the end. I suppose this is due to the error above.

This code is as follows:

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

+3
3

, - , ( ). , .

, , tablesorter , $.get(). , tablesorter sortThis().

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

.

tablesorter , :

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

jQuery Google Group.

+12

javascript. , , .

:

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

:

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

, , , . , javascript , , , , - DOM , .

JQuery DOM , ready (function() {...}).

, sortThis():


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

, DOM , sortThis().

, $.get() , , DOM , , , , . $.get() " ", sortThis() , , . : 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();

the best solution, in my opinion, is to call your call to sortThis () inside the callback function. This will cause the page to take less time to load and process, since the rest of your script may continue while data is being exchanged with the server. 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 ...

0
source

Source: https://habr.com/ru/post/1714719/

More articles:


All Articles