How to enhance tables using jquery and css

Lately I have been posting all of this ‘how to articles’. Well, don’t leave me because there’s still more to come. And here comes another one of those.

This time I’m going to show you how you can enhance ordinary html tables using jquery and css. Here’s what were going to do:

  • Fetch records from a mysql table using php
  • Tabulate the fetched records
  • Add functionality to the generated table

 

Let’s go ahead and get started. It’s actually 11:29 PM, and I already want to sleep but there’s someone in the neighborhood who thinks its still morning that’s why I’m still up. Random fact: I don’t really like working late at night especially if I have already worked for 8 hours in the morning.

Requirements

 

Procedure

As usual, do the housekeeping. Prepare your working folder and place all the files you need. Link all the files that you need into the file that you’re going to work with.

PHP Files:

<?php
require_once('db_config.php');
?>

Stylesheets:

<link rel="stylesheet" href="tbl_sorter/themes/blue/style.css"/>
<link rel="stylesheet" href="tbl_sorter/themes/docs/jq.css"/>

And javascript files:

<script src="jq.js"></script>
<script src="jquery.tablesorter.min.js"></script>
<script src="tbl_sorter/addons/pager/jquery.tablesorter.pager.js"></script>

To be safe, just make sure that the jquery core is first to be linked. On the 2nd line we linked the tablesorter plugin. This will add a sorting functionality to the html table. On the 3rd line, we linked the table pager. This will add a pagination functionality to our table.

Next, generate the table using php:

<?php
$taxpayers = $db->get_results("SELECT * FROM tbl_taxpayers");
?>
<table id="test_tbl" class="tablesorter">
<thead>
	<tr>
	     <th>Taxpayer</th>
	     <th>Address</th>
	     <th>Type</th>
	</tr>
</thead>
<tbody>
	<?php
	foreach($taxpayers as $tp){
	?>
	<tr>
	     <td><?php echo $tp->strTaxpayer; ?></td>
	     <td><?php echo $tp->strTaxpayerAddress; ?></td>               <td><?php echo $tp->strTaxpayerType;?></td>
	</tr>
	<?php } ?>
</tbody>
</table>

As you can see, we are actually selecting all of the records from the table. This wouldn’t always be the best option. Especially if you want to add a search functionality to your table later on.

The output will actually look like this:

image

I wasn’t able to download the images for next, back, last , and first buttons that’s why it looks like that.The column with the darker blue header is an indicator that it’s the one being sorted. In this case in descending order.

 

Conclusion

That’s it for this tutorial. You learned how to add pagination, and sorting functionality to an ordinary html table generated from php.
Don’t forget to share this post if you find it useful.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s