JSFiddle - React, Tailwind, and code Playground

by tommylylck

HTML

<title>jquery oxxo-sortTableTd plugin</title>



<p></p>
<body>
   <table id="table0">
    <tr><th sort="true" style="width:50px;">數字</th><th sort="true">字母</th><th sort="true" style="width:100px;">日期</th><th>數字不排序</th></tr>
    <tr><td>3</td><td>a</td><td>2012/06/26</td><td>-15</td></tr>
    <tr><td>1</td><td>e</td><td>2011/06/26</td><td>60</td></tr>
    <tr><td>9</td><td>b</td><td>2011/02/26</td><td>-1</td></tr>
    <tr><td>2</td><td>g</td><td>2011/02/20</td><td>-25</td></tr>
    <tr><td>8</td><td>f</td><td>2012/02/26</td><td>10</td></tr>
    <tr><td>4</td><td>c</td><td>2012/04/20</td><td>-30</td></tr>
    <tr><td>5</td><td>i</td><td>2012/04/25</td><td>-90</td></tr>
    <tr><td>7</td><td>d</td><td>2010/04/20</td><td>66</td></tr>
    <tr><td>6</td><td>h</td><td>2012/01/20</td><td>83</td></tr>
   </table>
</body>
</html>

CSS

body{margin:40px;}
    table,td,th{padding:0; border-spacing:0; border:1px solid #000; border-collapse:collapse; font-size:12px;}
    th{width:70px; height:30px; background-color:#666; color:#fff;}
    td{height:30px; text-align:center;}

JavaScript

$(function(){
     $("#table0").sortTableTd({
      iconImage : "img/sort_arrow.png", //排序icon圖檔
      iconWidth : 7,                    //圖檔寬度
      iconHeight : 11,                  //圖檔高度
      iconPaddingRight : 0,             //圖檔和右邊邊框的距離
      iconPAddingTop : 9               //圖檔和上面邊框的距離
     });
    });

/*
 * oxxo sortTableTd jQuery plugin
 * version 1.0 (2012.06.31)
 * author: oxxo studio
 * http://oxxo-studio.blogspot.tw
 */
 
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('(f($){$.15.B({16:f(E){2 e={V:"",T:7,U:11,D:0,H:11};$.B(e,E);2 a=[];2 b=[];2 c=[];2 d=[];2 3=$(q).I("10");2 4=$("#"+3+" 6 9").w;2 l=$("#"+3+" 6").w-1;$("J").1a("<o r=\'q\' 14=\'v:"+e.T+"R; Y:"+e.U+"R; 18-1b:X("+e.V+"); 17:19; A:-L; u:-L; z-Z:13;\'></o>");$("#"+3+" 6 9[g=h]").O({"12":"1c"});2 K=$("#"+3+" 6 9[g=h]").w;5(2 i=0;i<K;i++){$("o[r=q]").1k().1j("J").I("1i","1l"+i).1e("r").O({"u":($("#"+3+" 6 9[g=h]:8("+i+")").C().u+$("#"+3+" 6 9[g=h]:8("+i+")").v()-$("o[r=q]").v()-e.D),"A":($("#"+3+" 6 9[g=h]:8("+i+")").C().A+e.H)})};5(2 i=0;i<l;i++){G(i)};f G(i){a[i]=[];5(2 j=0;j<4;j++){a[i][j]=$("#"+3+" 6:8("+(i+1)+") x:8("+j+")").y()}};5(2 i=0;i<l;i++){b[i]=[];5(2 j=0;j<4;j++){b[i][j]=[];F(i,j)}};f F(i,j){5(2 k=0;k<4;k++){2 p=j+k;t(p<4){b[i][j][k]=a[i][p]}s{p=P.S(4-p);b[i][j][k]=a[i][p]}}};5(2 i=0;i<4;i++){c[i]=[];5(2 j=0;j<l;j++){c[i][j]=b[j][i]}};f Q(m,n){t(m>n){W 1}s{W-1}};5(2 i=0;i<4;i++){d[i]=c[i].g(Q)};5(2 i=0;i<4;i++){N(i)};f N(i){$("#"+3+" 6 9:8("+i+")").1h("M",f(){5(2 j=1;j<=l;j++){5(2 k=0;k<4;k++){2 p=k+i;t(p<4){$("#"+3+" 6:8("+j+") x:8("+p+")").y(d[i][j-1][k])}s{p=P.S(4-p);$("#"+3+" 6:8("+j+") x:8("+p+")").y(d[i][j-1][k])}}};d[i].1g()})};$("#"+3+" 6...