CodePen

HTML

            
              <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>FooTable - jQuery plugin for responsive HTML tables</title>
  <meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />
  
  <link href="./Js/footable/css/footable-0.1.css" rel="stylesheet" type="text/css" />
  <link href="./Js/footable/css/footable.sortable-0.1.css" rel="stylesheet" type="text/css" />
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
  <script src="./Js/footable/js/footable-0.1.js" type="text/javascript"></script>
  <script src="./Js/footable/js/footable.sortable.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      $('table').footable({
  breakpoints: {
    mamaBear: 960,
    babyBear: 600
  }
});
    });
  </script>
</head>
<?php
$user =& JFactory::getUser();
	if (!$user->guest)
$name = $user->username;
$db =& JFactory::getDbo();
$query = $db->getQuery(true);
	$query = "
		 SELECT image_url, name_test, image_date
		 FROM #__image_data
		 WHERE user_name = '$name'";
$db->setQuery($query);
$list = $db->loadObjectList();

echo '<body>';
    echo '<table class="footable">';
      echo '<thead>';
        echo '<tr>';
          echo '<th data-class="expand" data-sort-initial="true">
            <span title="table sorted by this column on load">Critters</span>
          </th>';
          echo '<th data-hide="phone,tablet">
            <span title="sortable">Name</span>
          </th>';
          echo '<th data-hide="phone,tablet" data-type="numeric">
            <span title="sortable">D.O.B</span>
          </th>';
          echo '<th data-hide="phone" data-type="numeric">
            <span title="sortable">Status</span>
          </th>';
        echo '</tr>';
      echo '</thead>';     
echo '<tbody>';

foreach ($list as $item){
      echo    $pic = $item->image_url;
      echo    $creatureName = $item->name_test;
      echo    $bornDate = $item->image_date;

echo '<tr><td><IMG SRC=" echo ($pic) "  /></td><td><?php echo"$item->name_test"?></td><td><?php echo date("M-d-Y", strtotime($bornDate)) ?></td><td data-value="1"><img title="active" src="Js/footable/images/active.png" /></td></tr>';
			
}			
echo '</tbody>';
echo '</table>';
   echo '</body>';
echo '</html>';
            
          
!

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................