Dealing with tables... You probably did it thousands of times... Sorting, filtering, pagination...
What do you use? Is there something nice and easy to spare our time and effort?
Here's one proposition, and if you have something better please let me know.
jQuery DataTables! Let's see... First you need to download couple of things:
1)
DataTables jQuery plugin - obtaining functionality and basic look and feel
2)
jQuery UI - to make it smooth
Instead of a plain table you can have something like this by adding only a few lines of code.
Source code can be downloaded from
here.
1) Include needed js and css files (you can find an example below) in the header section.
2) Add the following piece of code:
$(document).ready(function() {
$('table#people').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
} );
This tells browser that after document is fully loaded it should take table with "people" id and execute dataTable function, and thereby generate fancy table you saw above. Arguments bJQueryUI and sPaginationType tell that support for ThemeRoller should be enabled and that pagination should be presented by full numbers instead of two arrows ("two_button" is a default value), respectively. Beside two given options there are
others which you may find just as useful.
IMPORTANT: You need to use VALID table format if you want it to be properly rendered. If <thead>, <th>, and <tbody> tags are missing you'll get a weird result.
Example:
<html>
<head>
<title>DataTables Demo</title>
<style title="currentStyle" type="text/css">
@import "media/css/demo_page.css";
@import "media/css/demo_table_jui.css";
@import "media/css/redmond/jquery-ui.custom.css";
</style>
<script src="media/js/jquery.js" type="text/javascript"></script>
<script src="media/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="media/js/jquery-ui.lightness.min.js" type="text/javascript"></script>
<script charset="utf-8" type="text/javascript">
$(document).ready( function () {
$('table#people').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
} );
} );
</script>
</head>
<body>
<table class="display" id="people">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Field</th>
</tr>
</thead>
<tbody>
<tr><td>Walt</td><td>Disney</td><td>Art</td></tr>
<tr><td>Isac</td><td>Newton</td><td>Science</td></tr>
<tr><td>Charles</td><td>Dickens</td><td>Literature</td></tr>
<tr><td>Michael</td><td>Jordan</td><td>Sport</td></tr>
<tr><td>Thomas</td><td>Edison</td><td>Engineering</td></tr>
<tr><td>Niel</td><td>Armstrong</td><td>Art</td></tr>
<tr><td>Leonardo</td><td>Da Vinci</td><td>Art</td></tr>
<tr><td>Roger</td><td>Federer</td><td>Sport</td></tr>
<tr><td>Vincent</td><td>Van Gogh</td><td>Art</td></tr>
<tr><td>Louis</td><td>Pasteur</td><td>Science</td></tr>
<tr><td>Mark</td><td>Twain</td><td>Literature</td></tr>
<tr><td>Jesse</td><td>Owens</td><td>Sport</td></tr>
</tbody>
</table>
</body>
</html>
Note: class "display" is needed for adequate styling.
