CODEWITHSUNDEEP
phpjquerymysqltablesorter
Ezekiel Rage
Ezekiel Rage

Reputation: 581

jQuery Tablesorter does not work on a table that is generated with php

This is a similar question to this one: Mysql PHP generated table: doesn't work with Tablesorter

But, there is one slight difference: I generate tables directly in the same file, not an external file therefore .load is not an option.

My code:

<html>
 <head>
  <title>Tablesorter testing page</title>

  <link rel="stylesheet" href="style.css" type="text/css"/>

  <script src="jquery.js" type="text/javascript"></script>
  <script src="jquery.tablesorter.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function() { 
        $("#races").tablesorter();
    }); 
  </script>
 </head>
<body>
 <?php
    $db = new mysqli("localhost", "user", "password", "database");

    $query = "SELECT name, date FROM races";

    $result = $db->query($query, MYSQLI_STORE_RESULT);

    $o = '<table id="races"><thead><tr><th>Name</th><th>Date</th></tr></thead><tbody>';

    while(list($name, $date) = $result->fetch_row()) {
        $o .= '<tr><td>'.$name.'</td><td>'.$date.'</td></tr>';
    }

    $o .= '</tbody></table>';

    echo $o;
?>
</body>
</html>

The problem is that the table is not formatted, as if the Tablesorter is called on an empty table? If I hardcode a html table Tablesorter works ok on that on.

So, how do I make it work?

EDIT: Below is the generated .html code

<html>
     <head>
      <title>Tablesorter testing page</title>

      <link rel="stylesheet" href="style.css" type="text/css"/>

      <script src="jquery.js" type="text/javascript"></script>
      <script src="jquery.tablesorter.js" type="text/javascript"></script>
      <script>
        $(document).ready(function() { 
            $("#races").tablesorter();
        }); 
      </script>
     </head>
    <body>
     <table id="races">
<thead><tr><th>Name</th><th>Date</th></tr></thead>
<tbody><tr><td>Race 1</td><td>2012-01-01</td></tr><tr><td>Race 2</td><td>2012-01-01</td></tr></tbody></table>
</body>
</html>

Upvotes: 0

Views: 4555

Answers (1)

Jocelyn
Jocelyn

Reputation: 11393

Replace this line:

<table id="races">

With:

<table id="races" class="tablesorter">

I'm using this jquery plugin too, and had this problem until I added this CSS class to my table. You must be sure your CSS files contain the CSS code for the tablesorter CSS class.

Upvotes: 1

Related Questions