Awesome jQuery Tables - DataTables

Short asside: I've been mulling over this project of having a blog of things that I believe are of quality. That add to the quality of things in the world. This post is in that spirit.

When I first saw Ext-js I thought. "Awesome!!!" then I dug into implementing it. Right. building data structures into xml trees to pass to a javascript aware element on your page. Bam, right off the top of my list of fun things to work on. So, much to my joy did I discover the DataTables project. http://www.datatables.net/ Which extends the already awesome(and nearly painless to use) jQuery to make an html table come alive with some nice jQuery stylings.

Seriously. Take their "No Config" example and look at the code behind for some sweetness.

You take a page like


Then you drop in a few lines in the section. Drop in jQuery and the dataTables extension, then activate the table. (well, obvisouly you have the js files referenced)

<script type="text/javascript" language="javascript" src="/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
     $('#example').dataTable();} );
</script>

and right away you have pagination with counts, and and an Ajax search.


Sweet!! Thank you Allan Jardine.