Last active
December 4, 2018 16:58
-
-
Save tilhom/c83de2e2ab3a42c719c56ebeb054560f to your computer and use it in GitHub Desktop.
Revisions
-
tilhom created this gist
Dec 4, 2018 .There are no files selected for viewing
This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,241 @@ <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Codeclass Tutorial | Search HTML Table Data by using JQuery</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script src="stupidtable.min.js"></script> <style type="text/css"> body{ padding-top: 96px; } th[data-sort]{ cursor:pointer; } @media (max-width: 577px){ body{ padding-top: 126px; } } </style> </head> <body> <div class="container-fluid"> <div class="text-light bg-success fixed-top pb-3"> <h4 align="center">Search JQuery</h4> <input type="text" name="search" id="search" class="form-control text-center col-4 mx-auto"> </div> <div class="table-responsive" > <table class="table table-striped" id="employee_table"> <thead class="text-light bg-dark sticky-top"> <tr> <th width="5%" data-sort="int">ID</th> <th width="25%" data-sort="string">Name</th> <th width="35%" data-sort="string">Address</th> <th width="10%" data-sort="string">Gender</th> <th width="20%" data-sort="string">Designation</th> <th width="5%" data-sort="string">Age</th> </tr> </thead> <tbody> <tr> <td>175</td> <td>Ronald D. Colella</td> <td>1571 Bingamon Branch Road, Barrington, IL 60010</td> <td>Male</td> <td>Top executive</td> <td>32</td> </tr> <tr> <td>174</td> <td>Martha B. Tomlinson</td> <td>4005 Bird Spring Lane, Houston, TX 77002</td> <td>Female</td> <td>Systems programmer</td> <td>38</td> </tr> <tr> <td>173</td> <td>Cameron K. Barnett</td> <td>2822 River Road, Colorado Springs, CO 80903</td> <td>Male</td> <td>Mortgage loan officer</td> <td>52</td> </tr> <tr> <td>172</td> <td>James V. Foreman</td> <td>4881 Adams Drive, Houston, TX 77002</td> <td>Male</td> <td>Sports instructor</td> <td>32</td> </tr> <tr> <td>171</td> <td>Dallas V. Jones</td> <td>2672 Broaddus Avenue, Bowling Green, KY 42103</td> <td>Male</td> <td>Tractor driver</td> <td>45</td> </tr> <tr> <td>170</td> <td>Patricia R. Lohman</td> <td>2653 Courtright Street, Garrison, ND 58540</td> <td>Female</td> <td>Counseling psychologist</td> <td>24</td> </tr> <tr> <td>169</td> <td>Lee H. Young</td> <td>4097 Cambridge Place, Cockeysville, MD 21030</td> <td>Male</td> <td>Refractory mason</td> <td>24</td> </tr> <tr> <td>168</td> <td>Melina T. Reza</td> <td>68 Elk Creek Road, Chamblee, GA 30341</td> <td>Female</td> <td>Manpower development manager</td> <td>40</td> </tr> <tr> <td>167</td> <td>Sandra P. Swain</td> <td>3563 Wolf Pen Road, San Jose, CA 95134</td> <td>Female</td> <td>Mortgage banker</td> <td>32</td> </tr> <tr> <td>166</td> <td>Thomas K. Herrman</td> <td>4342 Despard Street, Atlanta, GA 30331</td> <td>Male</td> <td>Scientific photographer</td> <td>47</td> </tr> <tr> <td>165</td> <td>Nick M. Gilligan</td> <td>4951 North Bend River Road, Lexington, KY 40505</td> <td>Male</td> <td>Supply manager</td> <td>42</td> </tr> <tr> <td>164</td> <td>Ronald S. Keefe</td> <td>4388 Goff Avenue, Grand Rapids, MI 49508</td> <td>Male</td> <td>Landscaping worker</td> <td>22</td> </tr> <tr> <td>163</td> <td>William C. Wright</td> <td>2653 Pyramid Valley Road, Cedar Rapids, IA 52404</td> <td>Male</td> <td>Political geographer</td> <td>33</td> </tr> <tr> <td>162</td> <td>Jarrod D. Jones</td> <td>3827 Bingamon Road, Garfield Heights, OH 44125</td> <td>Male</td> <td>Manpower development advisor</td> <td>64</td> </tr> <tr> <td>161</td> <td>Glenda J. Stewart</td> <td>3482 Pursglove Court, Rossburg, OH 45362</td> <td>Female</td> <td>Cost consultant</td> <td>28</td> </tr> <tr> <td>8</td> <td>Charles D. Horst</td> <td>1636 Walnut Hill Drive Cincinnati, OH 45202</td> <td>Male</td> <td>Financial investigator</td> <td>29</td> </tr> <tr> <td>7</td> <td>Antonio J. Forbes</td> <td>403 Snyder Avenue Charlotte, NC 28208</td> <td>Male</td> <td>Faller</td> <td>32</td> </tr> <tr> <td>6</td> <td>Barbra K. Hurley</td> <td>1241 Canis Heights Drive Los Angeles, CA 90017</td> <td>Female</td> <td>Service technician</td> <td>26</td> </tr> <tr> <td>5</td> <td>Clara Gilliam</td> <td>63 Woodridge Lane Memphis, TN 38138</td> <td>Female</td> <td>Programmer</td> <td>24</td> </tr> <tr> <td>1</td> <td>Bruce Tom</td> <td>656 Edsel Road Sherman Oaks, CA 91403</td> <td>Male</td> <td>Driver</td> <td>36</td> </tr> </tbody> </table> </div> </div> </body> </html> <script> $(document).ready(function(){ $("#employee_table").stupidtable(); $('#search').keyup(function(){ search_table($(this).val()); }); function search_table(value){ $('#employee_table tbody tr').each(function(){ var found = 'false'; $(this).each(function(){ if($(this).text().toLowerCase().indexOf(value.toLowerCase()) >= 0) { found = 'true'; } }); if(found == 'true') { $(this).show(); } else { $(this).hide(); } }); } }); </script>