overset - Animated Sortable Data Table jQuery plugin

CURRENT PROJECTS

loading CATEGORIES AND POSTS

DEVELOPMENT LOG FOR JIM PALMER Animated Sortable Data Table jQuery plugin - jTPS Posted 08/30/2008 in jquery
jTPS is a datatable jQuery plugin that offers pagination, animated scrolling through pages and intelligent natural sorting capability. The development version is currently 15KB.
DEMO loading demo.. ASSETS As they currently reside on Google Code ●jTPS.js - LATEST - core jTPS jQuery plugin code ●jTPS.css - styles required by jTPS ●jTPS.html - demonstration html instantiating jTPS ●remaining assets - graphics CHANGELOG ●0.5 ●Fixed natural sort algorithm ●No more quick sort - relying on built-in browser bubble sort algorithm ●Added proper selectors and child selectors for nested table support (this will break <0.5 tables in most cases) ●Added explicit nav class selector for navigation controls ●0.4 ●Optimized 1000% the fixed cell calculation and conversion to a fixed table-layout. This is now on by default ●Sped up the initial loading/render of the controls even more ●Fixed the pagination abbreviation ●Fixed scrolling animation causing inconsistent rows in relation to the page selected to be displayed or not displayed ●Added double click on page selector feature to "jump" to page without having to wait for animated scroll ●Clears any selection that might have been caused by clicking on pagination or sort headers ●Fixed initial footer controls render issue in Chrome/Safari ●The width attribute (or style) must be present on the table for fixed table-layout to calculate dimensions properly ●0.3 ●1000% speed increase in sorting and initial rendering ●Custom O(Nlog(N)) Quick Sort function for faster sorting than the browser's built in O(N^2) Bubble Sort ●Stopped using $.fn.replaceWith() for moving child nodes around and now using the browser's direct appendChild() function which is hugely faster. ●Any event bound to a row or table is retained in the sort ●Added ability to sort dates with the natural sort algorithm ●Changing from ASC to DESC sort on a column that already has been sorted takes a fraction of the time the initial sort took ●Now you can double click (FF, Safari, Chrome) to instantly get to a page - only works as a triple click or a lagged double click in IE7 ●Selecting display per page doesn't reload the entire dataset, nor does sorting. ●Now using more friendly namespace and not hogging the jQuery.fn BASIC USAGE You have a simple table you wish to bind jTPS to (different than demo above and simpler):

<html>
<head>
 <script language="JavaScript" type="text/javascript" src="jquery.js"></script>
 <script language="JavaScript" type="text/javascript" src="jTPS.js"></script>
 <link rel="stylesheet" type="text/css" href="jTPS.css">
 <script type="text/javascript">
  $(function () { 
   $('#demoTable').jTPS( {perPages:[5]} );
  });
 </script>
</head>
<body>
<table id="demoTable">
 <thead>
  <tr>
   <th sort="decrip">Description</th>
   <th sort="price">Price</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Product 1.09</td>
   <td>$1002.99</td>
  </tr>
  <tr>
   <td>Product 1.01</td>
   <td>$432.77</td>
  </tr>
  <tr>
   <td>Product 1.05</td>
   <td>$432.76</td>
  </tr>
  <tr>
   <td>Product 1.03</td>
   <td>$102.01</td>
  </tr>
  <tr>
   <td>Product 1.06</td>
   <td>$100.99</td>
  </tr>
  <tr>
   <td>Product 1.00</td>
   <td>$10202.00</td>
  </tr>
 </tbody>
 <tfoot class="nav">
  <tr>
   <td colspan="2">
    <div class="pagination"></div>
    <div class="paginationTitle">Page</div>
    <div class="selectPerPage"></div>
    <div class="status"></div>
   </td>
  </tr>
 </tfoot>
</table>
</body>
</html>

This will load the jTPS library after the jQuery core and then apply jTPS to the demoTable via the jQuery document.ready.
NOTES ●Default sort is first column ASCending ●When you click on a new column to sort, it defaults to DESCending ●The natural sort is driven by my algorithm /2008/09/01/javascript-natural-sort-algorithm/ which assumes a lot of things such as: alpha > numeric, case-insensitive, etc. comments

NAME EMAIL ME ON UPDATES EMAIL (hidden) URL MESSAGE TAGS ALLOWED: <code> <a> <pre class="code [tab4|tabX|inline|bash]"> <br> PREVIEW COMMENT TURING TEST