Main menu

Post navigation

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.

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.

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:

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.