Footable issue using select option value for filtering table

Question

I am using Footable.js (plus all the other js files you need to make it work) and all looks great but when I use my dropdown (select option value) filter to filter the table by column 3 only 7 out of the 10 selects work. I checked spelling in all of them. Not sure why 3 of them will not work and filter the table like the other 7 do.

The Search filter

Search: <input id="filter" type="text"/></div>
   <div id="degree-bar">Type of Degree: <select class="filter-status">
    <option></option>
    <option value="certificate">Certificate</option>
    <option value="minor">Minor</option>
    <option value="associate">Associate</option>
    <option value="bachelor's">Bachelor's</option>
    <option value="bachelor's/master's">Bachelor's/Master's</option>
    <option value="licensure">Licensures</option>
    <option value="occupational">Occupational endorsements</option>
    <option value="post-baccalaureate">Post-baccalaureate licensure</option>
    <option value="special">Special training programs</option>
    <option value="pre-professional">Pre-professional opportunities</option>
  </select>

A portion of the table: It will sort bachelor's, associate and certificate but not special or occupational.

<tr>
      <td><a href="http://www.uaf.edu/catalog/current/programs/yupik_lang_culture.html">Yup'ik Language and Culture</a></td>
      <td><a href="http://www.uaf.edu/anlc/classes/">College of Liberal Arts</a></td>
      <td><span title="bachelor's">bachelor's</span></td>
    </tr>
     <tr>
      <td><a href="http://www.uaf.edu/catalog/current/programs/yupik_lang.html">Yup'ik Language Proficiency</a></td>
      <td><a href="http://www.uaf.edu/anlc/classes/">College of Liberal Arts</a></td>
      <td><span title="certificate">certificate</span>, <span title="associate">associate</span></td>
    </tr>
     <tr>
      <td><a href="http://www.uaf.edu/catalog/current/programs/alaska_law_enforcement.html">Law Enforcement Academy</a></td>
      <td><a href="http://www.ctc.uaf.edu/programs/lawacad/">College of Rural and Community Development</a></td>
      <td><span title="special">special training program</span></td>
    </tr>
     <tr>
      <td><a href="http://www.uaf.edu/catalog/current/programs/paramedic.html">Paramedic Academy</a></td>
      <td><a href="http://www.ctc.uaf.edu/programs/paramedic/">College of Rural and Community Development</a></td>
       <td><span title="special">special training program</span></td>
    </tr>
     <tr>
      <td><a href="http://www.uaf.edu/catalog/current/programs/wm_tech.html">Welding and Materials Technology</a></td>
      <td><a href="http://www.ctc.uaf.edu/programs/weld/">College of Rural and Community Development</a></td>
      <td><span title="special">special training program</span></td>
    </tr>
     <tr>
      <td><a href="http://www.uaf.edu/catalog/current/programs/admin_assist.html">Administrative Assistant</a></td>
      <td><a href="http://www.ctc.uaf.edu/programs/aaa/">College of Rural and Community Development</a></td>
      <td><span title="occupational">occupational endorsement</span></td>
    </tr>

To see it in action: Webpage complete

You say filter and sort. Are you having problems with both? The link you provided is broken. Perhaps you could provide a JSFiddle or a Plunk. — Jeff, May 29 '14 at 16:12

score 1 · Accepted Answer · answered Jun 18 '14 at 22:30

From the code you've posted, it seems like the problem is an 's' at the end of the value of the option and span.

The options values are: (Notice the 's' at the end of endorsements and programs)

<option value="occupational">Occupational endorsements</option>
<option value="special">Special training programs</option>

The span values in the rows look like: (Notice there is no 's' at the end of endorsement and program)

<span title="special">occupational endorsement</span>
<span title="special">special training program</span>

Here's a plunk that demonstrates the issue: (I put an 's' in both places) http://plnkr.co/edit/yCmyoJmFpkzcUplaMgVg

Footable issue using select option value for filtering table

1 Answers1