T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
« cPanel – dodajanje apache mod_geoip modula – omejitev glede na državo obiskovalca
Prenos domene od SIOL ponudnika – mail težave »
29th November

Tablesorter – jQuery plugin Tablesorter 2.0 – šumniki – nepravilno sortiranje šumnikov čšž – javascript sortiranje tabel

Za vse tiste, ki jQuery Tablesorter 2.0 še ne poznate. Je skripta, ki statični tabeli doda možnost sortiranja. Kako zadevo spraviti v delovanje je jasno napisano v dokumentaciji. Poglejmo si primer iz njihove strani.

Namestitev jQuery Tablesorter dodatka

PLAIN TEXT
HTML:
  1. <table id="myTable">
  4.     <th>Last Name</th>
  5.     <th>First Name</th>
  6.     <th>Email</th>
  7.     <th>Due</th>
  8.     <th>Web Site</th>
  9. </tr>
  10. </thead>
  13.     <td>Smith</td>
  14.     <td>John</td>
  15.     <td>jsmith@gmail.com</td>
  16.     <td>$50.00</td>
  17.     <td>http://www.jsmith.com</td>
  18. </tr>
  20.     <td>Bach</td>
  21.     <td>Frank</td>
  22.     <td>fbach@yahoo.com</td>
  23.     <td>$50.00</td>
  24.     <td>http://www.frank.com</td>
  25. </tr>
  27.     <td>Doe</td>
  28.     <td>Jason</td>
  29.     <td>jdoe@hotmail.com</td>
  30.     <td>$100.00</td>
  31.     <td>http://www.jdoe.com</td>
  32. </tr>
  33. </tbody>
  34. </table>

Statični tabeli sedaj dodamo funkcionalnost sortiranju z javascript klicem:

PLAIN TEXT
JAVASCRIPT:
  1. jQuery(document).ready(function() { jQuery("#myTable").tablesorter(); });

Nepravilno sortiranje šumnikov

V primeru, da imamo v tabeli nize, ki vsebujejo šumnike jih tablesorter nepravilno sortira, zato skripto malce predelamo in sicer tako, da šumnike Č,Š,Ž,č,š,ž nadomestimo z CZ, DZ, SZ, ZZ. Replace šumnikov lahko naredimo direktno v skripti in sicer v vrstici 424 nadomestimo kodo:

PLAIN TEXT
JAVASCRIPT:
  1. $.tableSorter.parsers.generic = {
  2.     id: ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''generic'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''',
  3.     is: function(s) {
  4.         return true;
  5.     },
  6.     format: function(s) {
  7.         var s = s.toLowerCase();
  8.         s = s.replace("Č", "CZ");
  9.         s = s.replace("Ć", "CZ");
  10.         s = s.replace("Đ", "DZ");
  11.         s = s.replace("Š", "SZ");
  12.         s = s.replace("Ž", "ZZ");
  13.         s = s.replace("č", "cz");
  14.         s = s.replace("ć", "cz");
  15.         s = s.replace("đ", "dz");
  16.         s = s.replace("š", "sz");
  17.         s = s.replace("ž", "zz");
  18.        
  19.         return s;
  20.     },
  21.     sorter: $.tableSorter.sorters.generic
  22. };

Lahko pa defeniramo nov text extraction funkcijo:

PLAIN TEXT
JAVASCRIPT:
  1. jQuery(document).ready(function() {
  2.     // call the tablesorter plugin
  3.     jQuery("table").tablesorter({
  4.         // define a custom text extraction function
  5.         textExtraction: function(node) {
  6.             // extract data from markup and return it 
  7.             var s= node.innerHTML;
  8.  
  9.             s = s.replace("Č", "CZ");
  10.             s = s.replace("Ć", "CZ");
  11.             s = s.replace("Đ", "DZ");
  12.             s = s.replace("Š", "SZ");
  13.             s = s.replace("Ž", "ZZ");
  14.             s = s.replace("č", "cz");
  15.             s = s.replace("ć", "cz");
  16.             s = s.replace("đ", "dz");
  17.             s = s.replace("š", "sz");
  18.             s = s.replace("ž", "zz");
  19.  
  20.             return s;
  21.         }
  22.     });
  23. });

Ostale težave - slovenski forumi:

Ostale javascript skripte za sortiranje tabel

Sedaj lahko pri izdelavi spletnih strani oz. v vašem sistemu za urejanje spletnih vsebin (CMS) vključite sortiranje pregledov preko statične HTML tabele brez pomoči PHP modula ali ostalih server-side programskih jezikov.

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. Javascript – scrolling – jQuery.scrollTo – jQuery.SerialScroll
  2. Javascript koledar – izbira datuma – jQuery date picker
  3. Javascript – fade efekt – jQuery – fadeIn – fadeOut – setTimeout – removeChild
  4. jQuery – traversing – dodatki – javascript frameworks
  5. jQuery each snippet
  6. Textarea defaultValute – Javascript string replace – uidatepicker onClose
  7. Stalno osveževanje del spletne vsebine – ajax jquery.get – javascript setinterval
  8. Javascript search in replace string funkcije
  9. Javascript – delci uporabne kode
  10. PHP funkcije v Javascript jeziku – isset

Antony || Sunday, November 29th, 2009 ob 1:46 pm || Splet, Splet (Javascript, Ajax) || RSS 2.0 | Dodaj komentar || Trackback


Dodaj komentar