Skip to content

Instantly share code, notes, and snippets.

@tilhom

tilhom/gist:c83de2e2ab3a42c719c56ebeb054560f

Last active December 4, 2018 16:58
Show Gist options
  • Save tilhom/c83de2e2ab3a42c719c56ebeb054560f to your computer and use it in GitHub Desktop.
Save tilhom/c83de2e2ab3a42c719c56ebeb054560f to your computer and use it in GitHub Desktop.
Download ZIP
sort search table
Raw
gistfile1.txt
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment