同位素是过滤和排序数据列表的最佳方法吗？

Question

我对javascript和php的理解充其量是不稳定的，所以如果这段代码让你的眼睛充满痛苦，我会提前道歉：）

问题：

我正在建立所有提供特定领域学位的学校的名单。我收集了我想要开始的数据，并希望找到一种简单的方法供用户对数据进行排序和过滤。

在进行了一些关于过滤和排序数据的谷歌搜索后，我遇到了Isotope jquery插件，并认为这对我的问题很容易解决。现在我已经实现了它，我遇到了

的问题

• 让最后的过滤器工作（基本上，当用户从最后一个过滤组中选择一个州时，只应显示该州的学校。）
• 了解如何按州或集中对列表中的数据进行排序（用户应该能够点击标题'状态'，或列表顶部的标题'浓度'，并拥有列表项按照选定的过滤器按升序排列。

我有这种唠叨的感觉，我的执行都错了。有人有什么建议吗？

实况页面在这里： http://forensicnexus.com/programs

我使用html / php如下从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></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>

这是我和isotope.js一起使用的javascript

 $(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',
    });

  });

Answer 1

Zeroth，请写下更短的问题。这可能是你在6个月以上没有得到回应的原因。

首先，请摆脱过滤器和内容之间的那个讨厌的广告。我几乎看不到我在你的页面上做了什么。 （此外，谷歌将为此标记你）

其次，没有“状态”过滤器 - 你删除它是因为它不起作用吗？过去一个月我一直在同位素游泳，很想回答你的问题。 ：^]

对列表进行排序：Isotope内置了排序功能，我没有在此代码中看到任何尝试。在这里查看文档：{​​{3}}

不错的网站，我可以看到这将非常有用。