Created
October 24, 2012 04:15
-
-
Save rfessler/3943775 to your computer and use it in GitHub Desktop.
A CodePen by rfessler.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html > | |
| <head> | |
| <title>Display Data Using jQuery</title> | |
| <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">0 | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> | |
| <script src="application.js" type="text/javascript" charset="utf-8"></script> | |
| </head> | |
| <body id="index"> | |
| <div id="pagewrap"> | |
| <div id="search"> | |
| <label for="filter">Filter</label> <input type="text" name="filter" value="" id="filter" /> | |
| </div> | |
| <div id="body"> | |
| <table cellpadding="1" cellspacing="1" id="resultTable"> | |
| <thead> | |
| <tr> | |
| <th>First Name</th> | |
| <th>Last Name</th> | |
| <th>City</th> | |
| <th>State</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr><td>Mannix</td><td>Bolton</td><td>Merizo</td><td>Michigan</td></tr><tr><td>Suki</td><td>King</td><td>Fairmont</td><td>Oklahoma</td></tr><tr><td>Shelby</td><td>English</td><td>Durham</td><td>Arkansas</td></tr><tr><td>Portia</td><td>Burns</td><td>Princeton</td><td>Rhode Island</td></tr><tr><td>Dacey</td><td>Young</td><td>Covina</td><td>South Carolina</td></tr><tr><td>Clark</td><td>Reyes</td><td>Grand Rapids</td><td>New Jersey</td></tr><tr><td>Maris</td><td>Decker</td><td>Sierra Madre</td><td>Georgia</td></tr><tr><td>Yuli</td><td>Blackwell</td><td>Clearwater</td><td>Illinois</td></tr><tr><td>Carly</td><td>Burks</td><td>Beaumont</td><td>Massachusetts</td></tr><tr><td>Chloe</td><td>Christian</td><td>Gadsden</td><td>Virginia</td></tr><tr><td>Trevor</td><td>Carrillo</td><td>West Bend</td><td>Connecticut</td></tr><tr><td>Azalia</td><td>Gallegos</td><td>Plainfield</td><td>Michigan</td></tr><tr><td>Jamal</td><td>Blair</td><td>Centennial</td><td>Indiana</td></tr><tr><td>Sacha</td><td>Evans</td><td>Grand Island</td><td>Alabama</td></tr><tr><td>Cain</td><td>Chapman</td><td>Ontario</td><td>Georgia</td></tr><tr><td>Sigourney</td><td>Hendrix</td><td>Riverside</td><td>Florida</td></tr><tr><td>Nigel</td><td>Boyle</td><td>Lake Forest</td><td>North Carolina</td></tr><tr><td>Ifeoma</td><td>Pruitt</td><td>Mankato</td><td>Connecticut</td></tr><tr><td>Ivory</td><td>Mcclure</td><td>East Lansing</td><td>New Jersey</td></tr><tr><td>Kato</td><td>Higgins</td><td>Chandler</td><td>Utah</td></tr><tr><td>Nasim</td><td>Alvarado</td><td>Morrison</td><td>Louisiana</td></tr><tr><td>Caryn</td><td>Crosby</td><td>Nogales</td><td>Virginia</td></tr><tr><td>Winter</td><td>Middleton</td><td>Laramie</td><td>Michigan</td></tr><tr><td>Nasim</td><td>Snow</td><td>Annapolis</td><td>Hawaii</td></tr><tr><td>Ciaran</td><td>Noel</td><td>Midwest City</td><td>Minnesota</td></tr><tr><td>Iris</td><td>Williams</td><td>Peekskill</td><td>New Jersey</td></tr><tr><td>Bradley</td><td>Faulkner</td><td>St. Marys</td><td>Ohio</td></tr><tr><td>Avye</td><td>Stanton</td><td>South Bend</td><td>Oklahoma</td></tr><tr><td>Damon</td><td>Nunez</td><td>Inglewood</td><td>Oklahoma</td></tr><tr><td>Nayda</td><td>Hendrix</td><td>Whittier</td><td>Oklahoma</td></tr><tr><td>Wesley</td><td>Vaughan</td><td>Fort Dodge</td><td>Montana</td></tr><tr><td>Lane</td><td>Weeks</td><td>Great Falls</td><td>Illinois</td></tr><tr><td>Cheyenne</td><td>Hahn</td><td>Shamokin</td><td>Arizona</td></tr><tr><td>Jamalia</td><td>Callahan</td><td>Watervliet</td><td>Iowa</td></tr><tr><td>Orla</td><td>Logan</td><td>Manhattan</td><td>Delaware</td></tr><tr><td>Mark</td><td>Sheppard</td><td>Orem</td><td>New Mexico</td></tr><tr><td>Emerson</td><td>Marshall</td><td>Laramie</td><td>New Jersey</td></tr><tr><td>Shelly</td><td>Christian</td><td>Ashland</td><td>Georgia</td></tr><tr><td>Leah</td><td>Hayden</td><td>Santa Monica</td><td>Maryland</td></tr><tr><td>TaShya</td><td>Stanley</td><td>Moreno Valley</td><td>Tennessee</td></tr><tr><td>Iona</td><td>Marquez</td><td>Port Arthur</td><td>Wisconsin</td></tr><tr><td>Xena</td><td>Mcmillan</td><td>Memphis</td><td>New York</td></tr><tr><td>Blaze</td><td>Wagner</td><td>San Clemente</td><td>New Jersey</td></tr><tr><td>Sophia</td><td>House</td><td>Placentia</td><td>Virginia</td></tr><tr><td>Burke</td><td>Juarez</td><td>Bakersfield</td><td>West Virginia</td></tr><tr><td>Julie</td><td>Shannon</td><td>Rocky Mount</td><td>California</td></tr><tr><td>Velma</td><td>Le</td><td>Decatur</td><td>New York</td></tr><tr><td>Velma</td><td>Melton</td><td>Bowie</td><td>Mississippi</td></tr><tr><td>Flavia</td><td>Mccullough</td><td>Cohoes</td><td>Colorado</td></tr><tr><td>Nomlanga</td><td>Williamson</td><td>Newburyport</td><td>Massachusetts</td></tr><tr><td>Drew</td><td>Malone</td><td>Hampton</td><td>Kansas</td></tr><tr><td>Dennis</td><td>Serrano</td><td>Gloversville</td><td>Alabama</td></tr><tr><td>Abel</td><td>Weaver</td><td>Keene</td><td>Hawaii</td></tr><tr><td>Victor</td><td>Chambers</td><td>Cypress</td><td>Alaska</td></tr><tr><td>Jane</td><td>Gray</td><td>Denver</td><td>New York</td></tr><tr><td>Holly</td><td>Greer</td><td>Keene</td><td>Alaska</td></tr><tr><td>Fleur</td><td>Frazier</td><td>Gold Beach</td><td>Ohio</td></tr><tr><td>Shannon</td><td>Watson</td><td>LaGrange</td><td>Florida</td></tr><tr><td>Haviva</td><td>Combs</td><td>Vallejo</td><td>Tennessee</td></tr><tr><td>Karly</td><td>Richardson</td><td>Monterey</td><td>Oregon</td></tr><tr><td>Connor</td><td>Combs</td><td>Chicopee</td><td>Michigan</td></tr><tr><td>Malcolm</td><td>Snyder</td><td>Cortland</td><td>Arkansas</td></tr><tr><td>Yvette</td><td>Hays</td><td>Cortland</td><td>Kansas</td></tr><tr><td>Selma</td><td>Church</td><td>Attleboro</td><td>Iowa</td></tr><tr><td>Adena</td><td>Pace</td><td>Meridian</td><td>Washington</td></tr><tr><td>Xyla</td><td>House</td><td>Flagstaff</td><td>Nevada</td></tr><tr><td>Bernard</td><td>Rios</td><td>Hannibal</td><td>Illinois</td></tr><tr><td>Clayton</td><td>Thomas</td><td>Benton Harbor</td><td>Maryland</td></tr><tr><td>Xavier</td><td>Harrington</td><td>Hazleton</td><td>District of Columbia</td></tr><tr><td>Jemima</td><td>Allison</td><td>Thiensville</td><td>Montana</td></tr><tr><td>Debra</td><td>Lawson</td><td>Alpharetta</td><td>South Dakota</td></tr><tr><td>Kevyn</td><td>Roberts</td><td>Truth or Consequences</td><td>Tennessee</td></tr><tr><td>Aurelia</td><td>Walton</td><td>Bradford</td><td>Michigan</td></tr><tr><td>Florence</td><td>Moss</td><td>Bradbury</td><td>Maryland</td></tr><tr><td>Austin</td><td>Guy</td><td>Ketchikan</td><td>Minnesota</td></tr><tr><td>Casey</td><td>Vinson</td><td>Merizo</td><td>Arkansas</td></tr><tr><td>Stewart</td><td>Freeman</td><td>Whittier</td><td>Vermont</td></tr><tr><td>Illana</td><td>Holmes</td><td>Torrance</td><td>Kansas</td></tr><tr><td>Dai</td><td>Hebert</td><td>Danville</td><td>Kentucky</td></tr><tr><td>Iliana</td><td>Nash</td><td>Lock Haven</td><td>Montana</td></tr><tr><td>Kylie</td><td>Mcmillan</td><td>Juneau</td><td>Alabama</td></tr><tr><td>Yoshi</td><td>Cline</td><td>Ypsilanti</td><td>Nebraska</td></tr><tr><td>Isaac</td><td>Hensley</td><td>Meriden</td><td>Maryland</td></tr><tr><td>Michael</td><td>Shaw</td><td>Rawlins</td><td>New Hampshire</td></tr><tr><td>Aidan</td><td>Roy</td><td>Minot</td><td>Hawaii</td></tr><tr><td>Ignacia</td><td>Murray</td><td>San Luis Obispo</td><td>Washington</td></tr><tr><td>Sigourney</td><td>Justice</td><td>San Juan</td><td>Iowa</td></tr><tr><td>Simon</td><td>Everett</td><td>Pasadena</td><td>Texas</td></tr><tr><td>Uriah</td><td>Forbes</td><td>Davis</td><td>Mississippi</td></tr><tr><td>Kathleen</td><td>Carr</td><td>Memphis</td><td>Illinois</td></tr><tr><td>Noelani</td><td>Ewing</td><td>Lynchburg</td><td>Indiana</td></tr><tr><td>Matthew</td><td>Parker</td><td>Chino Hills</td><td>Michigan</td></tr><tr><td>Germane</td><td>Franco</td><td>Brookfield</td><td>Delaware</td></tr><tr><td>Lydia</td><td>Aguilar</td><td>Tacoma</td><td>Iowa</td></tr><tr><td>Nadine</td><td>Dale</td><td>Chickasha</td><td>Virginia</td></tr><tr><td>Stephen</td><td>Holder</td><td>Slidell</td><td>Massachusetts</td></tr><tr><td>Kuame</td><td>Calhoun</td><td>Whittier</td><td>Arkansas</td></tr><tr><td>Jerry</td><td>Pitts</td><td>Brownsville</td><td>New York</td></tr><tr><td>Patience</td><td>Young</td><td>Las Cruces</td><td>Texas</td></tr><tr><td>Ayanna</td><td>James</td><td>Champaign</td><td>Wisconsin</td></tr><tr><td>Adrian</td><td>Mosley</td><td>Woodruff</td><td>District of Columbia</td></tr><tr><td>Moana</td><td>Bates</td><td>Yonkers</td><td>Montana</td></tr><tr><td>Myles</td><td>Blankenship</td><td>Naperville</td><td>North Carolina</td></tr><tr><td>Aimee</td><td>Camacho</td><td>Tempe</td><td>Connecticut</td></tr><tr><td>Aquila</td><td>Stone</td><td>Salem</td><td>Nebraska</td></tr><tr><td>Upton</td><td>Miranda</td><td>Covington</td><td>Arkansas</td></tr><tr><td>Xenos</td><td>Booker</td><td>Dubuque</td><td>West Virginia</td></tr><tr><td>Ria</td><td>Montgomery</td><td>Fort Wayne</td><td>South Carolina</td></tr><tr><td>Rafael</td><td>Jordan</td><td>Des Moines</td><td>Maine</td></tr><tr><td>Harrison</td><td>Harvey</td><td>Ephraim</td><td>Illinois</td></tr><tr><td>Angelica</td><td>Garza</td><td>Idaho Springs</td><td>Tennessee</td></tr><tr><td>Cairo</td><td>Raymond</td><td>Lock Haven</td><td>Kentucky</td></tr><tr><td>Beck</td><td>Gallegos</td><td>Two Rivers</td><td>Kentucky</td></tr><tr><td>Caryn</td><td>Cantrell</td><td>Union City</td><td>Mississippi</td></tr><tr><td>Ariana</td><td>Downs</td><td>Irwindale</td><td>Iowa</td></tr><tr><td>Kitra</td><td>Oconnor</td><td>Annapolis</td><td>Tennessee</td></tr><tr><td>Kitra</td><td>Suarez</td><td>Evanston</td><td>Wisconsin</td></tr><tr><td>Cameran</td><td>Bryant</td><td>Laguna Beach</td><td>North Carolina</td></tr><tr><td>Emerson</td><td>Rasmussen</td><td>San Angelo</td><td>Georgia</td></tr><tr><td>Arden</td><td>Guy</td><td>Derby</td><td>Wisconsin</td></tr><tr><td>Carolyn</td><td>Barker</td><td>Boston</td><td>New Hampshire</td></tr><tr><td>Olivia</td><td>Campos</td><td>Alexandria</td><td>Pennsylvania</td></tr><tr><td>Winter</td><td>Franco</td><td>Spartanburg</td><td>Idaho</td></tr><tr><td>Lacy</td><td>Harrison</td><td>Hermitage</td><td>Alaska</td></tr><tr><td>Shad</td><td>Gentry</td><td>Sanford</td><td>New York</td></tr><tr><td>Tanek</td><td>Orr</td><td>Union City</td><td>Connecticut</td></tr><tr><td>Portia</td><td>Finch</td><td>Pierre</td><td>Texas</td></tr><tr><td>Ali</td><td>Mcclain</td><td>Alameda</td><td>Arizona</td></tr><tr><td>Yen</td><td>Acosta</td><td>North Chicago</td><td>Tennessee</td></tr><tr><td>Todd</td><td>Hart</td><td>Normal</td><td>Iowa</td></tr><tr><td>Murphy</td><td>Campos</td><td>Rosemead</td><td>Mississippi</td></tr><tr><td>Erich</td><td>Hammond</td><td>Knoxville</td><td>Hawaii</td></tr><tr><td>Brenda</td><td>William</td><td>San Clemente</td><td>South Dakota</td></tr><tr><td>May</td><td>Simpson</td><td>Inglewood</td><td>North Carolina</td></tr><tr><td>Paul</td><td>Moran</td><td>Thousand Oaks</td><td>Maine</td></tr><tr><td>Brynn</td><td>Foley</td><td>Statesboro</td><td>Rhode Island</td></tr><tr><td>Elvis</td><td>Hughes</td><td>Racine</td><td>Arkansas</td></tr><tr><td>Joshua</td><td>Griffin</td><td>Galveston</td><td>West Virginia</td></tr><tr><td>Rylee</td><td>Bird</td><td>Mesa</td><td>New Mexico</td></tr><tr><td>Hashim</td><td>Ellis</td><td>Rancho Palos Verdes</td><td>South Carolina</td></tr><tr><td>Madison</td><td>Lowery</td><td>Mission Viejo</td><td>Montana</td></tr><tr><td>Alvin</td><td>Moss</td><td>Des Moines</td><td>Vermont</td></tr><tr><td>Rylee</td><td>Contreras</td><td>Tampa</td><td>Nevada</td></tr><tr><td>Rylee</td><td>Baxter</td><td>New Rochelle</td><td>Delaware</td></tr><tr><td>Clare</td><td>Wiley</td><td>Bellingham</td><td>Pennsylvania</td></tr><tr><td>Wylie</td><td>Carney</td><td>South Burlington</td><td>Ohio</td></tr><tr><td>Rafael</td><td>Gallagher</td><td>Layton</td><td>Kentucky</td></tr><tr><td>Iliana</td><td>Hardin</td><td>Lawrenceville</td><td>North Carolina</td></tr><tr><td>Travis</td><td>Johnson</td><td>Las Cruces</td><td>South Carolina</td></tr><tr><td>Paloma</td><td>Melendez</td><td>Beverly</td><td>Louisiana</td></tr><tr><td>Barclay</td><td>Marsh</td><td>Raleigh</td><td>District of Columbia</td></tr><tr><td>Faith</td><td>Burton</td><td>Laconia</td><td>District of Columbia</td></tr><tr><td>Howard</td><td>Wallace</td><td>Catskill</td><td>Virginia</td></tr><tr><td>Yoshi</td><td>Garrett</td><td>Oro Valley</td><td>Minnesota</td></tr><tr><td>Whoopi</td><td>Haney</td><td>La Habra Heights</td><td>Michigan</td></tr><tr><td>Joseph</td><td>Clayton</td><td>San Dimas</td><td>New Hampshire</td></tr><tr><td>Kimberly</td><td>Nielsen</td><td>Bozeman</td><td>Indiana</td></tr><tr><td>Illana</td><td>Mcguire</td><td>West Lafayette</td><td>Vermont</td></tr><tr><td>Raja</td><td>Fox</td><td>Pembroke Pines</td><td>Virginia</td></tr><tr><td>Xyla</td><td>Todd</td><td>Marshfield</td><td>New York</td></tr><tr><td>Kasper</td><td>Mcgowan</td><td>Roanoke</td><td>Wyoming</td></tr><tr><td>Valentine</td><td>Johns</td><td>Culver City</td><td>Oklahoma</td></tr><tr><td>Perry</td><td>Emerson</td><td>Provo</td><td>Texas</td></tr><tr><td>Kristen</td><td>Farley</td><td>Cedarburg</td><td>Montana</td></tr><tr><td>Teagan</td><td>Fleming</td><td>Lake Charles</td><td>New Jersey</td></tr><tr><td>Moses</td><td>Martinez</td><td>Brookings</td><td>Hawaii</td></tr><tr><td>Jocelyn</td><td>Price</td><td>Santa Barbara</td><td>Idaho</td></tr><tr><td>Scarlet</td><td>Chavez</td><td>Corpus Christi</td><td>Arizona</td></tr><tr><td>Demetrius</td><td>Ross</td><td>Charleston</td><td>Wyoming</td></tr><tr><td>Neville</td><td>Long</td><td>Vicksburg</td><td>Texas</td></tr><tr><td>Belle</td><td>Rasmussen</td><td>Grand Rapids</td><td>New Hampshire</td></tr><tr><td>Kylee</td><td>Duke</td><td>Union City</td><td>North Dakota</td></tr><tr><td>Brenden</td><td>Chan</td><td>Dana Point</td><td>Washington</td></tr><tr><td>Vincent</td><td>Reid</td><td>Minot</td><td>Delaware</td></tr><tr><td>Jaden</td><td>Hartman</td><td>Nanticoke</td><td>New Jersey</td></tr><tr><td>Dean</td><td>Frazier</td><td>Vallejo</td><td>Florida</td></tr><tr><td>Yasir</td><td>Evans</td><td>Union City</td><td>Kansas</td></tr><tr><td>Demetria</td><td>Summers</td><td>Bozeman</td><td>District of Columbia</td></tr><tr><td>Laurel</td><td>Finley</td><td>Prescott</td><td>South Carolina</td></tr><tr><td>Brianna</td><td>Potts</td><td>White Plains</td><td>Ohio</td></tr><tr><td>Rae</td><td>Carson</td><td>Elmira</td><td>Maine</td></tr><tr><td>Martin</td><td>Miller</td><td>Beaumont</td><td>Nevada</td></tr><tr><td>Cynthia</td><td>Lopez</td><td>Berkeley</td><td>Delaware</td></tr><tr><td>Ursula</td><td>Hartman</td><td>Richmond</td><td>Alaska</td></tr><tr><td>Faith</td><td>Mcmillan</td><td>Spokane</td><td>Alaska</td></tr><tr><td>Arden</td><td>Chambers</td><td>Carson City</td><td>Alaska</td></tr><tr><td>Adrienne</td><td>Rutledge</td><td>Aguadilla</td><td>Indiana</td></tr><tr><td>Quail</td><td>Vinson</td><td>Santa Rosa</td><td>Tennessee</td></tr><tr><td>Lynn</td><td>Bell</td><td>Atlanta</td><td>Ohio</td></tr><tr><td>Thomas</td><td>Merritt</td><td>Mount Vernon</td><td>North Carolina</td></tr><tr><td>Camilla</td><td>Wilkerson</td><td>Edina</td><td>Alabama</td></tr><tr><td>Melodie</td><td>Berry</td><td>Chula Vista</td><td>South Carolina</td></tr><tr><td>Alec</td><td>Santiago</td><td>Turlock</td><td>Alaska</td></tr><tr><td>Barclay</td><td>Rosales</td><td>Ardmore</td><td>Vermont</td></tr><tr><td>Keaton</td><td>Lamb</td><td>Pascagoula</td><td>Nevada</td></tr><tr><td>Sybil</td><td>Jennings</td><td>Sheboygan</td><td>Mississippi</td></tr><tr><td>Jescie</td><td>Miller</td><td>Bradford</td><td>Oregon</td></tr><tr><td>Bo</td><td>Head</td><td>Placentia</td><td>Indiana</td></tr><tr><td>Richard</td><td>Fowler</td><td>Anderson</td><td>Oklahoma</td></tr><tr><td>Brent</td><td>Rowe</td><td>Calabasas</td><td>Delaware</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| zebraRows('tr:odd td', 'odd'); | |
| $('tbody tr').hover(function(){ | |
| $(this).find('td').addClass('hovered'); | |
| }, function(){ | |
| $(this).find('td').removeClass('hovered'); | |
| }); | |
| //default each row to visible | |
| $('tbody tr').addClass('visible'); | |
| //overrides CSS display:none property | |
| //so only users w/ JS will see the | |
| //filter box | |
| $('#search').show(); | |
| $('#filter').keyup(function(event) { | |
| //if esc is pressed or nothing is entered | |
| if (event.keyCode == 27 || $(this).val() == '') { | |
| //if esc is pressed we want to clear the value of search box | |
| $(this).val(''); | |
| //we want each row to be visible because if nothing | |
| //is entered then all rows are matched. | |
| $('tbody tr').removeClass('visible').show().addClass('visible'); | |
| } | |
| //if there is text, lets filter | |
| else { | |
| filter('tbody tr', $(this).val()); | |
| } | |
| //reapply zebra rows | |
| $('.visible td').removeClass('odd'); | |
| zebraRows('.visible:even td', 'odd'); | |
| }); | |
| //grab all header rows | |
| $('thead th').each(function(column) { | |
| $(this).addClass('sortable') | |
| .click(function(){ | |
| var findSortKey = function($cell) { | |
| return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase(); | |
| }; | |
| var sortDirection = $(this).is('.sorted-asc') ? -1 : 1; | |
| //step back up the tree and get the rows with data | |
| //for sorting | |
| var $rows = $(this).parent() | |
| .parent() | |
| .parent() | |
| .find('tbody tr') | |
| .get(); | |
| //loop through all the rows and find | |
| $.each($rows, function(index, row) { | |
| row.sortKey = findSortKey($(row).children('td').eq(column)); | |
| }); | |
| //compare and sort the rows alphabetically | |
| $rows.sort(function(a, b) { | |
| if (a.sortKey < b.sortKey) return -sortDirection; | |
| if (a.sortKey > b.sortKey) return sortDirection; | |
| return 0; | |
| }); | |
| //add the rows in the correct order to the bottom of the table | |
| $.each($rows, function(index, row) { | |
| $('tbody').append(row); | |
| row.sortKey = null; | |
| }); | |
| //identify the column sort order | |
| $('th').removeClass('sorted-asc sorted-desc'); | |
| var $sortHead = $('th').filter(':nth-child(' + (column + 1) + ')'); | |
| sortDirection == 1 ? $sortHead.addClass('sorted-asc') : $sortHead.addClass('sorted-desc'); | |
| //identify the column to be sorted by | |
| $('td').removeClass('sorted') | |
| .filter(':nth-child(' + (column + 1) + ')') | |
| .addClass('sorted'); | |
| $('.visible td').removeClass('odd'); | |
| zebraRows('.visible:even td', 'odd'); | |
| }); | |
| }); | |
| }); | |
| //used to apply alternating row styles | |
| function zebraRows(selector, className) | |
| { | |
| $(selector).removeClass(className) | |
| .addClass(className); | |
| } | |
| //filter results based on query | |
| function filter(selector, query) { | |
| query = $.trim(query); //trim white space | |
| query = query.replace(/ /gi, '|'); //add OR for regex | |
| $(selector).each(function() { | |
| ($(this).text().search(new RegExp(query, "i")) < 0) ? $(this).hide().removeClass('visible') : $(this).show().addClass('visible'); | |
| }); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body, html { | |
| background-color: lightblue; | |
| font: normal normal normal 1em/1.5em Helvetica, sans-serif; | |
| } | |
| pre { font-family: monospace;} | |
| #pagewrap { | |
| margin: 0 auto; | |
| width: 700px; | |
| } | |
| #search { | |
| -webkit-border-radius: 10px; | |
| background-color: white; | |
| padding: 10px; | |
| position: fixed; | |
| right:40px; | |
| display: none; | |
| } | |
| #body { | |
| } | |
| table { | |
| background-color: white; | |
| -webkit-border-radius: 10px; | |
| width: 100%; | |
| padding: 10px; | |
| } | |
| th.sortable { | |
| color: #666; | |
| cursor: pointer; | |
| text-decoration: underline; | |
| } | |
| th.sortable:hover { color: black; } | |
| th.sorted-asc, th.sorted-desc { color: black; } | |
| td { | |
| background-color: white; | |
| } | |
| td.odd { | |
| background-color: #666; | |
| color: white; | |
| } | |
| td.hovered { | |
| background-color: lightblue; | |
| color: #666; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment