PHP output mySQL results into sortable columns

Question

My app executes a query that returns it's results to a listview . The results are currently displayed in a single column, with a variable amount of rows depending on the query results. The single column displays a patient names and a birth dates for each patient.

I want to make my results display in two columns the first will contain names and the second birth dates. I also need to allow users to sort the result rows by either column. I've tried incorporating tables into my code and rearranging the set up of my <UL> but I can't get anything to work.

Here is my query/row output code:

if(isset($_POST['dt']) && $_POST['dt'] != '')
{
  $dts = $_POST['dt'];
  $dts = mysql_real_escape_string($dts);
  $edit_date = str_replace("/", "-", $dts);
  $edit_date = explode(" ", $edit_date);
  $edit_date = explode("-", $edit_date[0]);
  $string = $edit_date[2] . "-" . $edit_date[0] . "-" . $edit_date[1];
  $query = "select * from VISIT JOIN PATIENT ON VISIT.PATIENT_ID=PATIENT.ID where VISIT.VISIT_DATE like '%".$string."%' ORDER BY PATIENT.LAST_NAME;";

  $res = mysql_query($query);
  $count = mysql_num_rows($res);
  $i = 0;
  if($count > 0)
  {
    $previous_letter = '';
    while($row = mysql_fetch_array($res))
    {
    $id = $row['ID'];
    $letter = strtoupper(substr($row['LAST_NAME'],0,1));
    echo "<li data-theme=\"c\" id=\"patient_name\">\n";
    echo "<a href=\"deeschdeesch.php?id=" . $id . "&fname=" . $row['FIRST_NAME'] . "&lname=" . $row['LAST_NAME'] . "\" rel=\"external\">\n";
    $date = $row['BIRTH_DATE']; 
    $date = explode(" ", $date);
    $date = explode("-", $date[0]);
    echo ucwords(strtolower($row['FIRST_NAME'] . " " . $row['LAST_NAME'])) . " - " . $date[1] . "-" . $date[2] . "-" . $date[0];
    echo "</a>\n";
    echo "</li>\n";
    $i++;
    }
  }
  else
  {
    $edit_date = str_replace("/", "-", $dts);
    $edit_date = explode(" ", $edit_date);
    $edit_date = explode("-", $edit_date[0]);
    $string = $edit_date[2] . "-" . $edit_date[0] . "-" . $edit_date[1];
    echo "<div id='no_result'>There were " . $count . " results found, but the input was " . $string . "</div>";
  }
}

Results are output here:

<div data-role="content" style="padding: 15px">
    <ul class="ui-body ui-body-d ui-corner-all" id="results" data-role="listview" data-divider-theme="b" data-filter-theme="a" data-inset="true" data-filter="false">
    </ul>
</div>

JS involved:

$(function(){
  $('#datepicker').datepicker({
      inline: true,
      showOn: "button",
      buttonImage: "images/calendar.gif",
      showAnim: "slideDown",
      changeMonth: true,
      showOtherMonths: true,
      selectOtherMonths: true,
      onSelect: function(dateText, inst) {
      var dt = dateText;

      if(dt != '')
       {
        $.ajax
        ({
        type: "POST",
        url: "search_date.php",
        data: "dt="+ dt,
        success: function(option)
        {
          $("#results").html(option).listview("refresh");
        }
        });
       }
       else
       {
         $("#results").html("");
       }
      return false;
      }
  });
});

Can anyone point me in the right direction on how to separate my results into multiple columns and/or make them sortable? Please and thank you all.

Answer 1

There are many javascript plugins out there to fulfil the result you want. Take a look at these two:

1. tablesorter - tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes;
2. DataTables - DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.