lambdaway :: tablesort

5 | list | login |load

| |

_h1 table sort

_p Following 
_ul [[client-side-table-sorting-using-javascript|http://www.satya-weblog.com/2007/06/client-side-table-sorting-using.html]]
_ul [[regex-to-check-whether-a-string-contains-only-numbers|https://stackoverflow.com/questions/9011524/regex-to-check-whether-a-string-contains-only-numbers]]

_p Click on titles to sort.

{center
 {{TABLE results}
  {thead
   {tr 
    {TH results 0 Id}
    {TH results 1 Nom}
    {TH results 2 Prénom}
    {TH results 3 Age}
  }}
  {tbody
   {tr {td 1} {td Dupond}   {td Philippe}       {td 32}}   
   {tr {td 2} {td Martin}   {td Antoine}        {td 17}}  
   {tr {td 3} {td Sanchez}  {td Louis}          {td 83}}  
   {tr {td 4} {td Bach}     {td Jean Sebastien} {td 51}} 
   {tr {td 5} {td Arestrup} {td Niels}          {td 12}}
}}}
{hr}
{center
 {{TABLE foo}
  {thead
   {tr 
    {TH foo 0 Id}
    {TH foo 1 Nom}
    {TH foo 2 Prénom}
    {TH foo 3 Age}
    {TH foo 4 Country}
  }}
  {tbody
   {tr {{TD} 1} {td Dupond}       {td Philippe}       {{TD} 32}  {td France}}   
   {tr {{TD} 2} {td Bolivar}      {td Simon}          {{TD} 17}  {td Venezuela}}  
   {tr {{TD} 3} {td Sanchez}      {td Luis}           {{TD} 83}  {td Spain}}  
   {tr {{TD} 4} {td Bach}         {td Jean Sebastien} {{TD} 51}  {td Germany}} 
   {tr {{TD} 5} {td Arestrup}     {td Niels}          {{TD} 12}  {td Danemark}}
   {tr {{TD} 6} {td foo}          {td bar}            {{TD} 1}   {td Mars}}
   {tr {{TD} 7} {td bar}          {td foo}            {{TD} 100} {td Moon}}
   {tr {{TD} 8} {td Le Corbusier} {td Corbu}          {{TD} 77}  {td France}}
   {tr {{TD} 9} {td Cunningham}   {td Ward}           {{TD} 70}  {td USA}}
   {tr {{TD} 10} {td Church}      {td Alonzo}         {{TD} 92}  {td USA}}
   {tr {{TD} 11} {td Assange}     {td Julian}         {{TD} 48}  {td Australia}}
   {tr {{TD} 1234} {td Turing}    {td Alan}           {{TD} 41}  {td UK}}
}}}

_h2 user code

{pre
 '{{TABLE results}
  {thead
   {tr 
    {TH results 0 Id}
    {TH results 1 Nom}
    {TH results 2 Prénom}
    {TH results 3 Age}
  }}
  {tbody
   {tr {td 1} {td Dupond}   {td Philippe}       {td 32}}   
   {tr {td 2} {td Martin}   {td Antoine}        {td 17}}  
   {tr {td 3} {td Sanchez}  {td Louis}          {td 83}}  
   {tr {td 4} {td Bach}     {td Jean Sebastien} {td 51}} 
   {tr {td 5} {td Arestrup} {td Niels}          {td 12}}
}}}

_h2 Notes
_ul Several tables can be created in a page,
_ul Currently can sort strings and positive integers, only in ascending order
_ul Capital letters are before lowercase letters

_h2 another one {sup ( only in '{lambda walks} )}

{center
 {{TABLE bar}
  {thead
   {tr 
    {TH bar 0 Id}
    {TH bar 1 Nom}
    {TH bar 2 Prénom}
    {TH bar 3 Age}
    {TH bar 4 Country}
  }}
  {tbody
 
   {S.map {lambda {}
    {tr {{TD} {rand_number 1000}}
        {td {rand_word}}
        {td {rand_word}} 
        {{TD} {rand_number 100}}
        {td {rand_word}}} } 
    {S.serie 1 50}}
}}}

;; coder's corner

{style 
table { width:80%; box-shadow:0 0 8px #000; margin:10px; }
thead { background:#888; color:#fff; width:33%;}
thead a { color:#fff;}
thead a:hover { color:#f00;}
tbody { background:#ccc; }
}

{{hide}

;; only in lambdawalks: start
{def rand_number {lambda {:n} {round {* {random} :n}}}}
{def rand_word 
 {def rand_word.chars abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ}
 {lambda {} 
  {S.replace \s by in 
        {S.map {lambda {} {W.get {round {* {random} 52}} {rand_word.chars}}}
        {S.serie 1 {round {* {random} 10}}}}}}}   
;; end

{def TABLE {lambda {:r} table {@ id=":r"}}}
{def TH {lambda {:r :i :nom} {th {a {@ onclick="SortTable(':r',:i);" href="javascript:;"}:nom}}}}
{def TD td {@ style="text-align:right; color:red;"}}
}

{script

// adding three new HTML tags forgotten (I'm sorry) in the lambdatalk builtin set

var htmltags = [ 'thead', 'tbody', 'th' ];

for (var i=0; i< htmltags.length; i++) {
  LAMBDATALK.DICT[htmltags[i]] = function(tag) {
    return function() {
      var args = arguments[0].trim(); // save spaces for pre
      var attr = args.match( /@@[\s\S]*?@@/ ); 
      if (attr == null) {
        return '<'+tag+'>'+args+'</'+tag+'>';
      } else {
        args = args.replace( attr[0], '' ).trim();
        attr = attr[0].replace(/^@@/, '').replace(/@@$/, '');
        return '<'+tag+' '+attr+'>'+args+'</'+tag+'>';
      }
    }
  }(htmltags[i]);      
}

}