<style type="text/css"> * {margin:0; padding:0; outline:none} body {font:10px Verdana,Arial; margin:25px; background:#fff url(http://sandbox.s criptiny.com/table-sorter/images/bg.gif) repeat-x; color:#091f30} .

sortable {width:980px; border-left:1px solid #c6d5e1; border-top:1px solid #c6d 5e1; border-bottom:none; margin:0 auto 15px} .sortable th {background:url(http://sandbox.scriptiny.com/table-sorter/images/he ader-bg.gif); text-align:left; color:#cfdce7; border:1px solid #fff; border-righ t:none} .sortable th h3 {font-size:10px; padding:6px 8px 8px} .sortable td {padding:4px 6px 6px; border-bottom:1px solid #c6d5e1; border-right :1px solid #c6d5e1} .sortable .head h3 {background:url(http://sandbox.scriptiny.com/table-sorter/ima ges/sort.gif) 7px center no-repeat; cursor:pointer; padding-left:18px} .sortable .desc, .sortable .asc {background:url(http://sandbox.scriptiny.com/tab le-sorter/images/header-selected-bg.gif)} .sortable .desc h3 {background:url(http://sandbox.scriptiny.com/table-sorter/ima ges/desc.gif) 7px center no-repeat; cursor:pointer; padding-left:18px} .sortable .asc h3 {background:url(http://sandbox.scriptiny.com/table-sorter/imag es/asc.gif) 7px center no-repeat; cursor:pointer; padding-left:18px} .sortable .head:hover, .sortable .desc:hover, .sortable .asc:hover {color:#fff} .sortable .evenrow td {background:#fff} .sortable .oddrow td {background:#ecf2f6} .sortable td.evenselected {background:#ecf2f6} .sortable td.oddselected {background:#dce6ee} #controls {width:980px; margin:0 auto; height:20px} #perpage {float:left; width:200px} #perpage select {float:left; font-size:11px} #perpage span {float:left; margin:2px 0 0 5px} #navigation {float:left; width:580px; text-align:center} #navigation img {cursor:pointer} #text {float:left; width:200px; text-align:right; margin-top:2px} </style> <table cellpadding="0" cellspacing="0" border="0" id="table" class="sort able"> <thead> <tr> <th class="nosort"><h3>ID</h3></th> <th><h3>Name</h3></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Ezekiel Hart</td> </tr> <tr> <td>2</td> <td>Jaquelyn Pace</td> </tr> <tr> <td>2</td> <td>Jaquelyn Pace</td> </tr> <tr> <td>2</td> <td>Jaquelyn Pace</td> </tr>

<tr> <td>2</td> <td>Jaquelyn Pace</td> </tr> <tr> <td>2</td> <td>Jaquelyn Pace</td> </tr> </tbody> </table> <div id="controls"> <div id="perpage"> <select onchange="sorter.size(this.value)"> <option value="5">5</option> <option value="10">10</option> <option value="20" selected="selected">20</optio n> <option value="50">50</option> <option value="100">100</option> </select> <span>Entries Per Page</span> </div> <div id="navigation"> <img src="http://sandbox.scriptiny.com/table-sorter/imag es/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,tr ue)" /> <img src="http://sandbox.scriptiny.com/table-sorter/imag es/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1 )" /> <img src="http://sandbox.scriptiny.com/table-sorter/imag es/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" /> <img src="http://sandbox.scriptiny.com/table-sorter/imag es/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true) " /> </div> <div id="text">Displaying Page <span id="currentpage"></span> of <span id="pagelimit"></span></div> </div> <script> var TINY={}; function T$(i){return document.getElementById(i)} function T$$(e,p){return p.getElementsByTagName(e)} TINY.table=function(){ function sorter(n){this.n=n; this.pagesize=20; this.paginate=0} sorter.prototype.init=function(e,f){ var t=ge(e), i=0; this.e=e; this.l=t.r.length; t.a=[]; t.h=T$$('thead',T$(e))[0].rows[0]; t.w=t.h.cells.length; for(i;i<t.w;i++){ var c=t.h.cells[i]; if(c.className!='nosort'){ c.className=this.head; c.onclick=new Function(th is.n+'.wk(this.cellIndex)') } } for(i=0;i<this.l;i++){t.a[i]={}} if(f!=null){var a=new Function(this.n+'.wk('+f+')'); a()} if(this.paginate){this.g=1; this.pages()}

}; sorter.prototype.wk=function(y){ var t=ge(this.e), x=t.h.cells[y], i=0; for(i;i<this.l;i++){ t.a[i].o=i; var v=t.r[i].cells[y]; t.r[i].style.display=''; while(v.hasChildNodes()){v=v.firstChild} t.a[i].v=v.nodeValue?v.nodeValue:'' } for(i=0;i<t.w;i++){var c=t.h.cells[i]; if(c.className!='nosort') {c.className=this.head}} if(t.p==y){t.a.reverse(); x.className=t.d?this.asc:this.desc; t. d=t.d?0:1} else{t.p=y; t.a.sort(cp); t.d=0; x.className=this.asc} var n=document.createElement('tbody'); for(i=0;i<this.l;i++){ var r=t.r[t.a[i].o].cloneNode(true); n.appendChild(r); r.className=i%2==0?this.even:this.odd; var cells=T$$('td ',r); for(var z=0;z<t.w;z++){cells[z].className=y==z?i%2==0?th is.evensel:this.oddsel:''} } t.replaceChild(n,t.b); if(this.paginate){this.size(this.pagesize )} }; sorter.prototype.page=function(s){ var t=ge(this.e), i=0, l=s+parseInt(this.pagesize); if(this.currentid&&this.limitid){T$(this.currentid).innerHTML=th is.g} for(i;i<this.l;i++){t.r[i].style.display=i>=s&&i<l?'':'none'} }; sorter.prototype.move=function(d,m){ var s=d==1?(m?this.d:this.g+1):(m?1:this.g-1); if(s<=this.d&&s>0){this.g=s; this.page((s-1)*this.pagesize)} }; sorter.prototype.size=function(s){ this.pagesize=s; this.g=1; this.pages(); this.page(0); if(this.currentid&&this.limitid){T$(this.limitid).innerHTML=this .d} }; sorter.prototype.pages=function(){this.d=Math.ceil(this.l/this.pagesize) }; function ge(e){var t=T$(e); t.b=T$$('tbody',t)[0]; t.r=t.b.rows; return t}; function cp(f,c){ var g,h; f=g=f.v.toLowerCase(), c=h=c.v.toLowerCase(); var i=parseFloat(f.replace(/(\$ \,)/g,'')), n=parseFloat(c.repla ce(/(\$ \,)/g,'')); if(!isNaN(i)&&!isNaN(n)){g=i,h=n} i=Date.parse(f); n=Date.parse(c); if(!isNaN(i)&&!isNaN(n)){g=i; h=n} return g>h?1:(g<h?-1:0) }; return{sorter:sorter} }(); </script> <script> var sorter = new TINY.table.sorter("sorter"); sorter.head = "head"; sorter.asc = "asc"; sorter.desc = "desc";

sorter.even = "evenrow"; sorter.odd = "oddrow"; sorter.evensel = "evenselected"; sorter.oddsel = "oddselected"; sorter.paginate = true; sorter.currentid = "currentpage"; sorter.limitid = "pagelimit"; sorter.init("table",1); </script>