Can I sort a static html table with angularJS/ Jquery / Javascript?

Question

Background information is that I have a table, that has to be static information and not javascript. The table is going to be edited by people who don't know HTML or Javascript. So each time that they get a new faculty member they are going to jump in and edit a GUI representation of a table. I've set up a codepen of what will be exported after the edit.

Here is the HTML Markup of what will be exported when the user is done adding people.

http://codepen.io/ddavisgraphics/pen/VYWmRo

<div class="searchTable"> 
 <label> Search Directory: </lable> 
 <input id="mysearch" type="search" /> 
</div>

<select> 
  <option> History </option> 
  <option> English </option> 
  <option> Economics </option> 
  <option> Computer Science </option> 
  <option> Business </option> 
  <option> Foreign Languages </option> 
  <option> Sociology </option> 
  <option> Nursing </option> 
  <option> Criminal Justice  </option> 
  <option> Management </option> 
  <option> Public Relations </option>
  <option> Communications </option>
</select> 

<select> 
  <option> West Viringia University </option>
  <option> Fairmont State University </option>
  <option> University of Charleston </option>
  <option> Glenville State College </option>
    <option> Shepherd University </option>
    <option> Wheeling Jesuit University </option>
    <option> Marshall University </option>
    <option> WVU-Parkersburg </option>
    <option> Davis & Elkins College </option>
   <option> Concord University </option>
  <option> Bluefield State College </option>
  <option> Salem International University </option>
  <option> Concord University </option>
   <option> Concord University </option>
   <option> Concord University </option>
   <option> Concord University </option>
</select> 


<table>
<tbody><tr>
    <th>Name</th>
    <th>Address</th>
    <th>Discipline</th>
  </tr>

  <tr>
    <td>Katherine B. Aaslestad</td> 
    <td>West Virginia University</td>
<td>History</td>
  </tr>

  <tr>
    <td>Sarah J. Adams</td>
    <td>University of Charleston</td>
<td>History</td>
  </tr>

  <tr>
    <td>Patrick Albano</td>
    <td>Fairmont State University </td>
<td>History</td>
  </tr>

  <tr>
    <td>Timothy C. Alderman</td>
    <td>WV State University</td>
<td>English</td>
  </tr>

  <tr>
    <td>Cyrus M. Aleseyed</td>
    <td>WV State University</td>
<td>Economics</td>
  </tr>

 <tr>
    <td>Heather R. Allman</td>
    <td>Glenville State College </td>
<td>Computer Science </td>
  </tr>

 <tr>
    <td>Mohamed Alshallah</td>
    <td>Fairmont State University</td>
<td>Business</td>
  </tr>

 <tr>
    <td>Maria Amores</td>
    <td>West Virginia University</td>
<td>Foreign Languages </td>
  </tr>

 <tr>
    <td>Robert M. Anthony</td>
    <td>Shepherd University
</td><td>Sociology</td>
  </tr>
<tr>
    <td>Gary L. Arbogast</td>
    <td>Glenville State College</td>
<td>Economics</td>
</tr>
<tr>
    <td>James R. Ashton</td>
    <td>Wheeling Jesuit University </td>
<td>Foreign Languages </td>
</tr>
<tr>
    <td>Debra Baker</td>
    <td><span class="caps">WVU</span>-Parkersburg </td>
<td>Business</td>
</tr>
<tr>
    <td>J. Robert Baker</td>
    <td>Fairmont State University </td>
<td>English</td>
</tr>
<tr>
    <td>Debra Barker</td>
    <td><span class="caps">WVU</span>-Parkersburg</td>
<td>Nursing</td>
</tr>
<tr>
    <td>Dorman C. Batson</td>
    <td>Glenville State College </td>
<td>Business</td>
</tr>
<tr>
    <td>Amy Otley Beckett</td>
    <td>Glenville State College </td>
<td>Criminal Justice </td>
</tr>
<tr>
    <td>Marybeth Beller</td>
    <td>Marshall University </td>
<td>Political Science  </td>
</tr>
<tr>
    <td>Helen Benigni</td>
    <td>Davis &amp; Elkins College</td>
<td>English</td>
</tr>
<tr>
    <td>Roland W. Bergman</td>
    <td>Shepherd University </td>
<td>Geography</td>
</tr>
<tr>
    <td>Jonathan Berkey</td>
    <td>Concord University</td>
<td>History</td>
</tr>
<tr>
    <td>Sheli Bernstein-Goff</td>
    <td>West Liberty University</td>
<td>Social Work </td>
</tr>
<tr>
    <td>Ingrid Bircann-Barkey</td>
    <td>Fairmont State University</td>
<td>Spanish</td>
</tr>
<tr>
    <td>Michael Blackwell</td>
    <td>West Liberty University </td>
<td>Accounting</td>
</tr>
<tr>
    <td>Les Boggess</td>
    <td>Fairmont State University</td>
<td>Criminal Justice </td>
</tr>
<tr>
    <td>Dhruba J. Bora/td&gt;
    </td><td>Marshall University </td>
<td>Criminal Justice</td>
</tr>
<tr>
    <td>Steve Bourne</td>
    <td>Bluefield State College </td>
<td>Management</td>
</tr>
<tr>
    <td>Daniel Boyd</td>
    <td>WV State University</td>
<td>Communications</td>
</tr>
<tr>
    <td>Susan Braidi</td>
    <td>West Virginia University</td>
<td>Foreign Languages </td>
</tr>
<tr>
    <td>Pam Braden</td>
    <td><span class="caps">WVU</span>-Parkersburg </td>
<td>Nursing</td>
</tr>
<tr>
    <td>Gonzalo Bravo</td>
    <td>West Virginia University</td>
<td>Sport Management </td>
</tr>
<tr>
    <td>Robin Broughton</td>
    <td>WV State University</td>
    <td> </td> 
</tr>
<tr>
    <td>Stephen W. Brown</td>
    <td><span class="caps">WVU</span> Institute of Technology </td>
<td>History</td>
</tr>
<tr>
    <td>Rick E. Bruner</td>
    <td>Shepherd University</td>
<td>Art</td>
</tr>
<tr>
    <td>Maria Cristina Burgueno</td>
    <td>Marshall University</td>
<td>Spanish</td>
</tr>
<tr>
    <td>Jeffrey Byrd</td>
    <td><span class="caps">WVU</span> at Parkersburg</td>
<td>Theatre</td>
</tr>
<tr>
    <td>Kevin Cain</td>
    <td>Glenville State College</td>
<td>Education</td>
</tr>
<tr>
    <td>Richard Cain</td>
    <td>Wheeling Jesuit University</td>
<td>Communications</td>
</tr>
<tr>
    <td>Steven Carelli</td>
    <td>Bethany College </td>
<td>Political Science </td>
</tr>
<tr>
    <td>Marvin H. Carr</td>
    <td>West Virginia Wesleyan College</td>
<td>History</td>
</tr>
<tr>
    <td>Thomas Chadwick</td>
    <td>Davis &amp; Elkins College </td>
<td>Political Science</td>
</tr>
<tr>
    <td>Cynthia Chalupa</td>
    <td>West Virginia University </td>
<td>Foreign Languages </td>
</tr>
<tr>
    <td>Gregory Chase</td>
    <td>West Liberty University </td>
<td>Economics and Finance</td>
</tr>
<tr>
    <td>Angela Cline</td>
    <td>Glenville State College</td>
<td>Business Administration </td>
</tr>
<tr>
    <td>Darrin Cox</td>
    <td>West Liberty University</td>
<td>History</td>
</tr>
<tr>
    <td>Brian Crawford</td>
    <td>West Liberty University </td>
<td>Geography</td>
</tr>
<tr>
    <td>Geri Crawley-Woods</td>
    <td>Shepherd University</td>
<td>Social Work </td>
</tr>
<tr>
    <td>Stephen Cresswell</td>
    <td>West Virginia Wesleyan College </td>
<td>History</td>
</tr>
<tr>
    <td>Gordon Crews</td>
    <td>Marshall University</td>
<td>Criminal Justice </td>
</tr>
<tr>
    <td>Scott Crichlow</td>
    <td>West Virginia University </td>
<td>Political Science </td>
</tr>
<tr>
    <td>Aaron Crites</td>
    <td><span class="caps">WVU</span>-Parkersburg </td>
<td>Political Science, History </td>
</tr>
<tr>
    <td>Karen Culcasi</td>
    <td>West Virginia University</td>
<td>Geography</td>
</tr>
<tr>
    <td>Sandra Czernek</td>
    <td>West Liberty University </td>
<td>History</td>
</tr>
<tr>
    <td>Momodou N. Darboe</td>
    <td>Shepherd University </td>
<td>Sociology</td>
</tr>
<tr>
    <td>S. Dianne Davis</td>
    <td><span class="caps">WVU</span>-Parkersburg</td>
<td>Business</td>
</tr>
<tr>
    <td>Tamra Dearing</td>
    <td>Bridgemont Community &amp; Technical College </td>
<td>Business, Computer Science,
 Entrepreneurship</td>
</tr>
<tr>
    <td>Frank L. DeCaria</td>
    <td>WV Northern Community College </td>
<td>Political Science/History </td>
</tr>
<tr>
    <td>Dominick A. DeFilippis</td>
    <td>Wheeling Jesuit University </td>
<td>Foreign Languages </td>
</tr>
<tr>
    <td>Lisa DeFrank-Cole</td>
    <td>West Virginia University</td>
<td>Leadership Studies </td>
</tr>
<tr>
    <td>Arthur DeMatteo</td>
    <td>Glenville State College </td>
<td>History</td>
</tr>
<tr>
    <td>Kimberly DeTardo-Bora</td>
    <td>Marshall University </td>
<td>Criminology</td>
</tr>
<tr>
    <td>Amy DeWitt</td>
    <td>Shepherd University </td>
<td>Sociology</td>
</tr>
<tr>
    <td>Sandra Dixon</td>
    <td>West Virginia University</td>
<td>Foreign Languages</td>
</tr>
<tr>
    <td>Christopher L. Dolmetsch</td>
    <td>Marshall University</td>
<td>Foreign Languages </td>
</tr>
<tr>
    <td>Miriam Roth Douglas</td>
    <td>West Liberty University </td>
<td>Education</td>
</tr>
<tr>
    <td>Carmen M. Durrani</td>
    <td>Concord University</td>
<td>Foreign Languages </td>
</tr>
<tr>
    <td>Marie DuToit </td>
    <td>West Liberty University </td>
<td>Nursing</td>
</tr>
<tr>
    <td>Robert D. Duval</td>
    <td>West Virginia University</td>
<td>Political Science </td>
</tr>
<tr>
    <td>Martha Eborall</td>
    <td>Bluefield State College  </td>
    <td>Environmental Science/Biology </td>
</tr>
<tr>
    <td>Clark Egnor</td>
    <td>Marshall University </td>
    <td><span class="caps">TESOL</span>; Education Administration </td>
</tr>
<tr>
    <td>Nadezhda Esque</td>
    <td>Marshall University </td>
    <td><span class="caps">EFL</span></td>
</tr>
<tr>
    <td>Xiaoli Etienne</td>
    <td>West Virginia University </td>
    <td>Ag and Resource Economics</td>
</tr>
<tr>
    <td>Sonya Evanisko</td>
    <td>Shepherd University  </td>
    <td>Art</td>
</tr>
<tr>
    <td>Joe Evans</td>
    <td>Glenville State College </td>
    <td>Science Education/Physical Science </td>
</tr>
<tr>
    <td>Sergio Falconi</td>
    <td>Fairmont State University  </td>
    <td>Italian</td>
</tr>
<tr>
    <td>Christina Fattore</td>
    <td>West Virginia University </td>
    <td>International Relations</td>
</tr>
<tr>
    <td>Stacy S. Fint</td>
    <td>West Virginia University</td>
    <td><span class="caps">TESOL</span></td>
</tr>
<tr>
    <td>Elizabeth Fones-Wolf</td>
    <td>West Virginia University3 </td>
    <td>History</td>
</tr>
<tr>
    <td>Trevellya (Tee) Ford-Ahmed</td>
    <td>WV State University</td>
    <td>Communication &amp; Media Studies </td>
</tr>
<tr>
    <td>Shirley Fortney</td>
    <td>West Virginia Wesleyan College </td>
    <td>Education</td>
</tr>
<tr>
    <td>Connie Morris Fox</td>
    <td>Bridgemont <span class="caps">CTC</span>  </td>
    <td>Business</td>
</tr>
<tr>
    <td>Carl M. Frasure</td>
    <td>Fairmont State University  </td>
    <td>Political Science </td>
</tr>
<tr>
    <td>Nicholas Freidin</td>
    <td>Marshall University  </td>
    <td>Anthropology</td>
</tr>
<tr>
    <td>James J. Friedberg</td>
    <td>West Virginia University  </td>
    <td>Law</td>
</tr>
<tr>
    <td>Mary Frye</td>
    <td>WV State University </td>
    <td>Foreign Languages </td>
</tr>
<tr>
    <td>Aaron Gale</td>
    <td>West Virginia University </td>
    <td>Religion</td>
</tr>
<tr>
    <td>Pablo Garcia</td>
    <td>West Virginia University  </td>
    <td>Spanish</td>
</tr>
<tr>
    <td>Richard A. Garnett</td>
    <td>Marshall University</td>
    <td>Sociology</td>
</tr>
<tr>
    <td>Patricia Gaston</td>
    <td><span class="caps">WVU</span>-Parkersburg </td>
    <td>English</td>
</tr>
<tr>
    <td>Kathryn G. Arano Gazal</td>
    <td>West Virginia University</td>    
<td>Forestry/Ecology </td>
</tr>
<tr>
    <td>Rico M. Gazal</td>
    <td>Glenville State College</td>
    <td>Forestry/Ecology </td>
</tr>
<tr>
    <td>Saba Gebrehiwot</td>
    <td>Marshall University </td>
    <td>German, African Politics </td>
</tr>
<tr>
    <td>Hannah Geffert</td>
    <td>Shepherd University </td>
    <td>History/Political Science</td>
</tr>
<tr>
    <td>Michael Gherke</td>
    <td>Glenville State College </td>
    <td>History</td>
</tr>
<tr>
    <td>Megan Gibbons</td>
    <td>Glenville State College </td>
    <td>Hispanic Language and Literature</td>
</tr>
<tr>
    <td>Tuncer Gocmen</td>
    <td>Shepherd University</td>
    <td>Economics</td>
</tr>
<tr>
    <td>Pablo Gonzalez</td>
    <td>West Virginia University </td>
    <td>Foreign Language </td>
</tr>
<tr>
    <td>David B. Gordon</td>
    <td>Shepherd University</td>
    <td>History</td>
</tr>
<tr>
    <td>Lindsey Graham</td>
    <td>Davis and Elkins College</td>
    <td>Sociology of Religion </td>
</tr>
<tr>
    <td>Marshall Griffin</td>
    <td><span class="caps">WVU</span>-Parkersburg</td>
    <td>Biology</td>
</tr>
<tr>
    <td>Kelly Grose</td>
    <td>Bridgemont Community College</td>
   <td> </td> 
</tr>
<tr>
    <td>Max Guirguis</td>
    <td>Shepherd University </td>
    <td>Constitutional Law</td>
</tr>
<tr>
    <td>Dan Gurash</td>
    <td>Fairmont State University  </td>
    <td>Sociology/Geography</td>
</tr>
<tr>
    <td>Joe D. Hagan</td>
    <td>West Virginia University</td>
    <td>Political Science </td>
</tr>
<tr>
    <td>Joshua Hagen</td>
    <td>Marshall University</td>
    <td>Geography</td>
</tr>
<tr>
    <td>Frew Hailou</td>
    <td>West Virginia State University</td>
    <td>International Trade &amp; Development </td>
</tr>
<tr>
    <td>Homan Hajiran</td>
    <td>Wheeling Jesuit University</td>
    <td>Economics</td>
</tr>
<tr>
    <td>Shannon Halicki</td>
    <td>West Liberty University</td>
    <td>French, Spanish, Linguistics </td>
</tr>
<tr>
    <td>Jonathan Hall</td>
    <td>West Virginia University  </td>
    <td>Ecology</td>
</tr>
<tr>
    <td>Deborah Halsey-Hunter</td>
    <td>Bluefield State College </td>
    <td>Technology/Business Communications</td>
</tr>
<tr>
    <td>Jack L. Hammersmith</td>
    <td>West Virginia University </td>
    <td>History</td>
</tr>
<tr>
    <td>Amy A. Garzon Hampton</td>
    <td>Shepherd University  </td>
    <td>Social Work </td>
</tr>
<tr>
    <td>Wes Harrison</td>
    <td>Ohio Valley College </td>
    <td>History/Political Science </td>
</tr>
<tr>
    <td>Clifford Hawley</td>
    <td>West Virginia University  </td>
    <td>Economics</td>
</tr>
<tr>
    <td>Dwight Heaster</td>
    <td>Glenville State College  </td>
    <td>Business</td>
</tr>
<tr>
    <td>Anders Henriksson</td>
    <td>Shepherd University  </td>
    <td>History</td>
</tr>
<tr>
    <td>Susan Herrick</td>
    <td>West Liberty University </td>
    <td>Sociology</td>
</tr>
<tr>
    <td>John Hicks</td>
    <td>Alderson-Broaddus University  </td>
    <td>History/Political Science</td>
</tr>
<tr>
    <td>Ellessa High</td>
    <td>West Virginia University </td>
    <td>English</td>
</tr>
<tr>
    <td>Geneva K. Hines</td>
    <td>Fairmont State University  </td>
    <td><span class="caps">ESL</span>/Advising</td>
</tr>
<tr>
    <td>Erin Hippolyte</td>
    <td>Fairmont State University  </td>
    <td>French</td>
</tr>
<tr>
    <td>Dominique Hoche</td>
    <td>West Liberty University  </td>
    <td>English</td>
</tr>
<tr>
    <td>Daniel Holbrook</td>
    <td>Marshall University  </td>
    <td>History </td>
</tr>
<tr>
    <td>Jeff Holland</td>
    <td><span class="caps">WVU</span>-Parkersburg  </td>
    <td>Business</td>
</tr>
<tr>
    <td>Aart Holtslag</td>
    <td>Shepherd University </td>
    <td>International Relations</td>
</tr>
<tr>
    <td>Gerald Hough</td>
    <td>New River Community &amp; Technical College  </td>
    <td>Business</td>
</tr>
<tr>
    <td>Sally Howard</td>
    <td>Concord University  </td>
    <td>Political Science </td>
</tr>
<tr>
    <td>Chiquita Howard-Bostic</td>
    <td>Shepherd University  </td>
    <td>Sociology</td>
</tr>
<tr>
    <td>Debra Hull</td>
    <td>Wheeling Jesuit University  </td>
    <td>Psychology </td>
</tr>
<tr>
    <td>Geoff Hunter</td>
    <td>Bluefield State College  </td>
    <td>Management</td>
</tr>
<tr>
    <td>Susan Hunter</td>
    <td>West Virginia University </td>
    <td>Political Science</td>
</tr>
</tbody></table>

I've looked at a few options that simply sort the table by in ascending or descending order, but I need to be able to search and sort by specific options. As displayed in the Codepen.

I know that i can use angular when loading the table using ng-repeat, but don't know how to do it with static tabular data. So using angular may not be a good solution.

My question is, what potentially would be a good solution that works in the same kind of fashion that angular does hiding and showing divs that are not part of the search criteria.

Answer 1

If you want to use angular for the whole table it's fairly trivial to parse html received from ajax request into an array of objects suitable for angular data binding as well as for numerous available angular table directives

  var cellProperties = ['name', 'address', 'discipline']

  $http.get('table.html').success(function(data) {
    /* using jQuery for quick demo, easy enough to convert if needed*/
    var $tableRows = $(data).find('tr');
    $scope.tableData = $tableRows.map(function(row) {
      var row = {};
      $(this).children().each(function(cellIndex) {
        row[cellProperties[cellIndex]] = $(this).text()
      });
      return row
    }).get();

  });

// returns    
[{
    "name": "Katherine B. Aaslestad",
    "address": "West Virginia University",
    "discipline": "History"
  },
  ....]

I didn't have time to parse out the headings row, but is easy to adapt this to do it.

This is also fairly simple to do in most server languages using a dom parser library

DEMO

Answer 2

This is really bad practice, to have people edit an html table for data. I would make an array that is easily readible to any human being so they can edit it:

var categoryData = [
  "History",
  "English",
  "Economics",
  "Computer Science"
  // and so on...
];

var universitiesData = [
  "West Virginia University",
  "Fairmont State University",
  "University of Charleston"
  // and so  on...
]

Then you can attach it in the $scope.categoriesData and $scope.universitiesData and use ng-repeat on it to sort and filter, etc.