How to sort a html table

[fomalhaut]

Hello.

I've a html table with five column:

<table style="text-align:center; border-color:blue" border='1' >
<caption><b>Liste des chants</b></caption>
<tr>
  <th class="tri" onclick="<?php $_SESSION['tri']='cote_classement'; ?>; recall()" >C&ocirc;te</th>
  <th class="tri" onclick="<?php $_SESSION['tri']='titre'; ?>; recall()" >Titre</th>
  <th>Auteur(s)</th>
  <th>Compositeurs(s)</th>
  <th>Livret</th>
</tr>

and I want the final user to be able to sort this table on the first or the second column, as he want.
Data are taken from mySql database:

<?php session_start();                // liste des chants (tables chants_t1 de jyc_applications)
if (!isset($_SESSION['tri'])) {$tri = 'cote_classement';}
else {$tri = $_SESSION['tri'];}
echo 'tri sur //'.$tri.'//';
$sqlChants = "SELECT * FROM jyc_applications.chants_t1 order by " . $tri;
$resChants = $dbh->query($sqlChants);
foreach ($resChants as $ligne) {
  echo '<tr style="color:red; text-indent:5; text-align:left">
<td><b>'.$ligne['cote_reelle'].'</b></td>
<td style="color:blue">'.noQuote($ligne['titre']).'</td>
<td style="color:green">'.noQuote($ligne['auteur']).'</td>
<td style="color:green">'.noQuote($ligne['compositeur']).'</td><td>'.$ligne['livret'].'</td></tr>';
}
?>

the JavaScript function recall() just call again the same page:

function recall(loc) {
if (window.location.hostname == 'localhost') {window.location = "http://localhost/fomalhaut/menus/visuChants.php";}
else {window.location = "http://" + window.location.hostname + "/menus/visuChants.php";}
}

The recall() function works correctly, but the $_SESSION['tri'] is already set to the 'titre' value (in fact to the latest value written).

I don't understand why. Perhaps is there a simpler manner to do that ?

Thanks for advance for your help.

[Deviante]

Mmm I think you should add an "&sort="+loc to the recall javascript function. And then in the PHP side, if $_GET["sort"] { $_SESSION["tri"] = $_GET["sort"]; } , and you set only once, the $_SESSION["tri"] only when recall is executed, setting correctly the value on this var. Then on the HTML code you should change the <?php $_SESSION['tri']='cote_classement'; ?>; recall() oNclick event for this : recall('cote_classement') , because your code sets the $_session twice, without questions, and you don't want to do this.

Sorry for my poor english, i'm spanish.
Salutes, DeV.

[hccchallenge]

Cher,

The onclick=" is executed in the browser,
when your visitor clicks.

Only browser-side javascript can be
executed dynamically in the browser.

The PHP code that I see will be executed by the server,
while the server is constructing the HTML...

Therefore, the last PHP code, setting "titre",
will have been executed on the server,
before the html arrived at your visitor's browser.

S.V.P. look at the html source that arrives in your
browser while testing. What do you see?

You will need to POST a http request with the
wanted sort name as the variable when your visitor clicks.

[fomalhaut]

Sorry for my poor english, i'm spanish.

Do not apologize, Deviante, mine is not better: I'm french !

I hav'not understand the javascript side. That are my modifications :

<table style="text-align:center; border-color:blue" border='1' >
<caption><b>Liste des chants</b></caption>
<tr>
  <th class="tri" onclick="recall('cote_classement')" >C&ocirc;te</th>
  <th class="tri" onclick="recall('titre')" >Titre</th>
  <th>Auteur(s)</th>
  <th>Compositeurs(s)</th>
  <th>Livret</th>
</tr>

<?php session_start();                // liste des chants (tables chants_t1 de jyc_applications)
if (isset($_GET['sort'])) {$_SESSION['tri'] = $_GET['sort']; }
else {$_SESSION['tri'] = 'cote_classement';}
$tri = $_SESSION['tri'];
echo 'tri sur //'.$tri.'//';
$sqlChants = "SELECT * FROM jyc_applications.chants_t1 order by " . $tri;
$resChants = $dbh->query($sqlChants);
foreach ($resChants as $ligne) {
  echo '<tr style="color:red; text-indent:5; text-align:left"><td><b>'.$ligne['cote_reelle'].'</b></td>
<td style="color:blue">'.noQuote($ligne['titre']).'</td>
<td style="color:green">'.noQuote($ligne['auteur']).'</td>
<td style="color:green">'.noQuote($ligne['compositeur']).'</td><td>'.$ligne['livret'].'</td></tr>';
}
?>

javascript:

function recall(tri) {
"&sort="+tri;
if (window.location.hostname == 'localhost') {window.location = "http://localhost/fomalhaut/menus/visuChants.php";}
else {window.location = "http://" + window.location.hostname + "/menus/visuChants.php";}
}

And this time, the table is already sorted on the first column (cote_classement) ! as if teh $_GET was not set !

thanks telling me where I'm wrong ?

[misson]

function recall(tri) {
    "&sort="+tri;
    if (window.location.hostname == 'localhost') {
        window.location = "http://localhost/fomalhaut/menus/visuChants.php";
    } else {
        window.location = "http://" + window.location.hostname + "/menus/visuChants.php";
    }
}

You aren't adding the sort parameter to the query string. Click a column heading and take a look at the URL; you won't see the sort parameter there. You need to do something like:

function recall(tri) {
    var query = "?sort="+tri,
        loc=window.location;
    window.location = loc.protocol+"//" + loc.hostname + loc.pathname +query;
}

<?php session_start();                // liste des chants (tables chants_t1 de jyc_applications)
if (isset($_GET['sort'])) {$_SESSION['tri'] = $_GET['sort']; }

This introduces an SQL injection vulnerability. Pass the input through a whitelist to prevent injection. Better yet, don't put the input directly into the query.

  <th class="tri" onclick="recall('cc')" >C&ocirc;te</th>
  <th class="tri" onclick="recall('t')" >Titre</th>

$sortFields = array('cc' => 'cote_classement', 't' => 'titre');
if (isset($_GET['sort']) && isset($sortFields[$_GET['sort']])) {
   $_SESSION['tri'] = $sortFields[$_GET['sort']]; 
} 

Sadly, prepared statements are of no help since you'd need to parameterize an identifier.

[fomalhaut]

Thank you Misson.

Now I understand. And thank you for having shown me the possible Sql injection. It's ok, that's what I'll do.