HTML table sortable with Jquery Tablesorter?

Question

I am using the following code to create a HTML table from a CSV file. How can I make this table sortable? I tried using Jquery tablesorter but the problem seems to be that when I click on a row to sort it, that it gets recreated by the PHP afterwards which results in an unsorted table.

<!DOCTYPE html>
<html>

<?php
function jj_readcsv($filename, $header=false) {
$handle = fopen($filename, "r");
echo '<table>';
//display header row if true
if ($header) {
$csvcontents = fgetcsv($handle);
echo '<tr>';
foreach ($csvcontents as $headercolumn) {
    echo "<th>$headercolumn</th>";
}
echo '</tr>';
}
// displaying contents
while ($csvcontents = fgetcsv($handle)) {
echo '<tr>';
foreach ($csvcontents as $column) {
    echo "<td>$column</td>";
}
echo '</tr>';
}
echo '</table>';
fclose($handle);

}

jj_readcsv('table.csv',true);
?>

Be more clear, the php code is giving out a HTML table. And you are using Jquery Tablesorter to make it sorted. Which part of it is causing the browser to reload the page?. Plugin as it is is not supposed to cause that. — NT_
– NT_, Commented May 3, 2012 at 12:36
tablesorter should not be resubmitting the page when it does the sort, and thus your php should not be firing when the sort event occurs. Could you post the code for your tablesorter and show how you are applying the tablesorter events to the headers? — rmmoul
– rmmoul, Commented May 3, 2012 at 12:38
@Hans Is the tablesorter now working after using this code ? — NT_
– NT_, Commented May 3, 2012 at 13:12

NT_ · Accepted Answer · 2012-05-03 12:59:55Z

3

The page redirection is due to some other bad PHP code (possibly) or can be a script as well.

Edit: Indented all the code and checked it as well.

PHP code :

<?php
function jj_readcsv($filename, $header=false) {
$handle = fopen($filename, "r");
?>
<table id="tb" >
<?php
if ($header) {
$csvcontents = fgetcsv($handle);
?>
    <thead>
        <tr>
    <?php foreach ($csvcontents as $headercolumn) { ?>
            <th><?php echo $headercolumn; ?></th>
    <?php } ?>
        </tr>
    </thead>
    <tbody>
<?php } 
while ($csvcontents = fgetcsv($handle)) { ?>
        <tr>
    <?php foreach ($csvcontents as $column) { ?>
            <th><?php echo $column; ?>
    <?php } ?>
        </tr>
<?php } ?>
    </tbody>
</table>
<?php fclose($handle); 

}
jj_readcsv('table.csv',true);
?>

JQuery JS:

$("#tb").tablesorter();

edited May 3, 2012 at 12:59

answered May 3, 2012 at 12:46

NT_

2,2461 gold badge19 silver badges23 bronze badges

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

Comments

rmmoul · Accepted Answer · 2012-05-03 12:45:00Z

2

According to the tablesorter website you need to apply their class to your table and use a thead tag for the main column headings like:

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr>

etc...

Your php is not generating the proper html for the tablesorter jquery to work on, acording to their docs at http://tablesorter.com/docs/

answered May 3, 2012 at 12:45

rmmoul

3,2373 gold badges29 silver badges35 bronze badges

Collectives™ on Stack Overflow

HTML table sortable with Jquery Tablesorter?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related