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="test">


  <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" : ""
            <!-- TODO:...

JavaScript

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

  function filterList(el) {
    //var choice = el.toUpperCase();
    $("table 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 = "filter=Undergraduate";
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
      var sParameterName = sURLVariables[i].split('=');
      if (sParameterName[0] == sParam) {
        return sParameterName[1];
      }
    }
  }
});