Is isotope the best way to filter and sort a list of data?

My understanding of javascript and php is shaky at best, so I apologize in advance if this code makes your eyes water in pain :)

THE PROBLEM:

I am building a listing of all the schools that offer degrees in a specific field. I have gathered the data I want to start with, and want to find an easy way for users to sort and filter the data.

After doing some googling on filtering and sorting data, i came across the Isotope jquery plugin and thought that it would be an easy fix for my problem. Now that I have implemented it, I am having issues with

• getting the final filter to work (essentially, when the user selects a state from the last filtering group, only the schools in that state should be shown.)
• understanding how to sort the data in the listing by state or concentration (the user should have the ability to click on the title 'State', or the title 'Concentration' at the top of the listing, and have the list items be arranged in ascending order according to the selected filter).

I have this nagging feeling that I have the implementation all wrong. Anyone have any suggestions?

The live page is here: http://forensicnexus.com/programs

I am using html/php as follows to pull the date from mysql:

<div class="option-combo accr">
    <ul class="filter option-set">
        <li><a href="#filter-accr-all" data-filter="" data-group="accr" class="selected">accredited & non-accredited</a></li>
        <li><a href="#filter-accr-yes" data-group="accr" data-filter=".accredited">accredited only</a></li>
        <li><a href="#filter-accr-no" data-group="accr" data-filter=".non-accredited">non-accredited only</a></li>
    </ul>
</div>

<div class="option-combo level">
    <ul class="filter option-set">
        <li><a href="#filter-level-all" data-filter="" data-group="level" class="selected">All Degree Levels</a></li>
        <li><a href="#filter-level-cert" data-group="level" data-filter=".cert">Certificate</a></li>
        <li><a href="#filter-level-as" data-group="level" data-filter=".ass">Associates</a></li>
        <li><a href="#filter-level-bs" data-group="level" data-filter=".bachelors">Bachelors</a></li>
    </ul>
</div>

<div class="option-combo country">
    <ul class="filter option-set">
        <li><a href="#filter-country-all" data-filter="" data-group="country" class="selected">All Locations</a></li>

        <li><a href="#filter-country-aus" data-group="country" data-filter=".aus">Australia</a></li>
        <li><a href="#filter-country-can" data-group="country" data-filter=".country-can">Canada</a></li>
        <li><a href="#filter-country-ind" data-group="country" data-filter=".ind">India</a&g开发者_C百科t;</li>
    </ul>

</div>

<div class="option-combo state">
    <ul class="filter option-set">
        <li><a href="#filter-state-all"data-filter="" data-group="state" class="selected">All</a></li>
        <li><a href="#filter-state-alabama" data-group="state" data-filter=".alabama">AL</a></li>
        <li><a href="#filter-state-az" data-group="state" data-filter=".az">AZ</a></li>
    </ul>
</div>
</section>

    <ul id="prog_table_title">
            <li id="t_con">Concentration</li>  
            <li id="t_acc">Accred.</li>
            <li id="t_sch">School Name</li>
            <li id="t_lev">Level</li> 
            <li id="t_sta">State</li> 
            <li id="t_cou">Country</li> 
            <li id="t_lin">Link</li>                
    </ul>

<div id="programlisting">   
    <ul id="container"> 
    <?php

    while($ext_db_row = mysql_fetch_array($result)) 
        {       
        echo "<li class=\"schoolinfo\"><p class=\"concentration\">" . $ext_db_row['concentration'] . "</p>\n";      
        if ($ext_db_row['concentration'] != null)                                   
            echo "<p class=\"accreditation\">" . $ext_db_row['accreditation'] . "</p>\n";
            else echo "<br/>&nbsp;</p>\n";
        if ($ext_db_row['accreditation'] != null) 
            echo "<p class=\"school\">" . $ext_db_row['school'] . "</p>\n";
            else echo "<p>&nbsp;</p>\n";
        if ($ext_db_row['school'] != null)
            echo "<p class=\"level\">" . $ext_db_row['level'] . "</p>\n";
            else echo "<p>&nbsp;</p>\n";
        if ($ext_db_row['level'] != null)
            echo "<p class=\"state\">" . $ext_db_row['state'] . "</p>\n";
            else echo "<p>&nbsp;</p>\n";        
        if ($ext_db_row['level'] != null)
            echo "<p class=\"country\">" . $ext_db_row['country'] . "</p>\n";
            else echo "<p>&nbsp;</p>\n";    
        if ($ext_db_row['country'] != null)
            echo "<p class=\"link\"><a href=\"http://" . $ext_db_row['link'] . "\" title=\"Click here to visit the website\" target=\"_blank\"><img src=\"" . $linkicon . "\" /></a></p>\n";
            else echo "<p>&nbsp;</p>\n";            
        echo "</li>\n\n";
        }//end while

    mysql_close($con);  
    ?>  
    </ul>
    </div>

and here is the javascript i am using in conjunction with isotope.js

 $(function(){

    var $container = $('#container'),
        filters = {},
        // an object 
        classData = [
          {
            index: 1,
            classNames: {
              'Y' : 'accredited',
              'N' : 'non-accredited'
            }
          },
          {
            index: 3,
            classNames: {
              'Masters' : 'masters',
              'Bachelors' : 'bachelors',
              'UndergraduateCertificate' : 'undergrad',
              'Certificate' : 'cert',
              'Associates' : 'ass',
              'GraduateCertificate' : 'mascert',
              'Doctorate' : 'phd'
            }
          },
          {
            index: 5,
            classNames: {
              'UnitedStates' : 'country-us',
              'UnitedKingdom' : 'uk',
              'Canada' : 'country-can',
              'Australia' : 'aus',
              'India' : 'ind',
              'TheNetherlands' : 'neth',
              'Scotland' : 'scot',
              'Switzerland' : 'swi',
              'Taiwan' : 'tai',
              'Turkey' : 'tur',
              'Online' : 'online'
            }
          },
          {
            index: 7,
            classNames: {
                'AL' : 'alabama',
                'AZ' : 'az',
                'CA' : 'ca',
                'CO' : 'co',
                'CT' : 'ct',
                'DC' : 'dc',
                'FL' : 'fl',
                'GA' : 'ga',
                'IL' : 'il',
                'IN' : 'in',
                'KY' : 'ky',
                'MA' : 'ma',
                'MD' : 'md',
                'MI' : 'mi',
                'MS' : 'ms',
                'MT' : 'mt',
                'ND' : 'nd',
                'NY' : 'ny',
                'OH' : 'oh',
                'OK' : 'ok',
                'PA' : 'pa',
                'RI' : 'ri',
                'TX' : 'tx',
                'VA' : 'va',
                'WA' : 'wa',
                'WV' : 'wv',
            }
          }
        ];

    $container.children().each(function(){
      var $this = $(this),
          $cells = $this.children(),
          textContent,
          className,
          obj;
      for (var i=0, len = classData.length; i < len; i++) {
        obj = classData[i];
        // read text from cell,
        // strips ALL whitespace, even inbetween words
        textContent = $cells.eq( obj.index ).text().replace(/[\n\t ]/g,'');
        className = obj.classNames[ textContent ];
        $this.addClass( className );
      }
    });

    // filter buttons
    $('.filter a').click(function(){
      var $this = $(this),
          isoFilters = [],
          prop, selector;

      // don't proceed if already selected
      if ( $this.hasClass('selected') ) {
        return;
      }

      $this.parents('.option-set').find('.selected').removeClass('selected');
      $this.addClass('selected');


      // store filter value in object
      // i.e. filters.color = 'red'
      filters[ $this.data('group') ] = $this.data('filter');

      for ( prop in filters ) {
        isoFilters.push( filters[ prop ] )
      }
      selector = isoFilters.join('');
      $container.isotope({ filter: selector });

      return false;
    });


    $container.isotope({
      itemSelector : '.schoolinfo',
      layoutMode: 'straightDown',
    });

  });

Zeroth, PLEASE write shorter questions. This is probably why you haven't gotten a response in 6+ months.

Firstly, please get rid of that pesky ad between the filters and the content. I can hardly see what I'm doing on your page. (Also, Google will mark you down for this)

Second, there is no "states" filter -- did you remove it because it didn't work? I have been swimming in isotope for the past month and would love to answer your question. :^]

Sorting the list: Isotope has built in sorting functionality, and I didn't see any attempts in this code. Check out the documentation here: http://isotope.metafizzy.co/docs/sorting.html

Nice site, I can see how this would be very useful.