List filter

Using jquery to add filter functionality to the school leaver site program lists.

by davehol

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="testi" class="dave">


  <table class="table xm-grouped-table">
    <caption class="sr-only">Browse programs similar to Business</caption>
    <thead>
      <tr>
        <th class="m-program-list-level hidden-xxs">type</th>
        <th class="m-program-list-program">Program name</th>
        <th class="m-program-list-location"><a class="c-tooltip" data-tooltip="Campuses where you can study this program.">Location</a></th>
        <th class="m-program-list-code hidden-xxs">Code</th>
      </tr>
    </thead>
    <tbody>
      <tr class="" data-rp-offering-target="Domestic,International" data-interest-area="Management business and administration|Business" data-path="/content/rmit-ui/en/study-with-us/levels-of-study/undergraduate-study/associate-degrees/ad010">
        <td class="hidden-xxs">Undergraduate</td>
        <td class="m-program-list-title">
          <div class="visible-xxs">Undergraduate</div>
          <a href="/content/rmit-ui/en/study-with-us/levels-of-study/undergraduate-study/associate-degrees/ad010.html">
      Associate Degree in Business
    </a>
          <div class="visible-xxs">AD010</div>
        </td>
        <td>
          <div class="" data-extract-major-delim="|" data-extract-glue=", ">Melbourne City</div>
        </td>
        <td class="hidden-xxs">AD010</td>
        <td class="hide">
          <!-- Need to sit it within a hidden TD so the div doesn't get moved -->
          <!-- navigation object: Integration - Program - Public -->
          <div class="hide js-integration-data-src">{ "Program code" : "AD010", "Program name" : "Associate Degree in Business", "School" : "Vocational Business Education", "Plan and CRICOS combination" : "",
            <!-- TODO: Get the value after integration -->
            "National curriculum code" : "",
            <!-- TODO: Get the value after integration -->
            "Career" : "Undergraduate", "College" : ""
          ...

JavaScript

$(document).ready(function() {
  var dave = $('<div/>').append("<span>Filter by: </span><a class='Undergraduate' href='#'>Undergraduate</a> | <a class='Vocational' href='#'>Vocational</a>");
  $('#testi').on('click', '.Undergraduate, .Vocational', function() {
    //filterList($(this).attr("id"));
    //alert($(this).parent().next("table").attr("class"));
    filterList($(this).attr("class"),$(this).parent().next("table"));
  });
//  if((GetQueryStringParams("filter")=='Undergraduate')||//(GetQueryStringParams("filter")=='Vocational')){
  //	filterList(GetQueryStringParams("filter"));
 // }
//  }
var tables = $("table").before(dave);;




  function filterList(el,tbl) {
  //alert(el);
    //var choice = el.toUpperCase();
    tbl.find("tr").each(function(index) {
      if (index !== 0) {
        $row = $(this);
        var id = $row.find("td").eq(0).text();
        //alert(id);
        if (id.indexOf(el) == -1) {
          $row.hide();
        } else {
          $row.show();
        }
      }
    });
  }
  
  
   function GetQueryStringParams(sParam) {
    var sPageURL = "";
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
      var sParameterName = sURLVariables[i].split('=');
      if (sParameterName[0] == sParam) {
        return sParameterName[1];
      }
    }
  }
});