Мое понимание javascript и php в лучшем случае шатко, поэтому я заранее прошу прощения, если этот код вызывает у вас боль в глазах:)
ПРОБЛЕМА:
Я составляю список всех школ, которые предлагают степени в определенной области. Я собрал данные, с которых хочу начать, и хочу найти простой способ для пользователей сортировать и фильтровать данные.
После некоторого поиска в Google по фильтрации и сортировке данных, я наткнулся на плагин 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/> </p>\n";
if ($ext_db_row['accreditation'] != null)
echo "<p class=\"school\">" . $ext_db_row['school'] . "</p>\n";
else echo "<p> </p>\n";
if ($ext_db_row['school'] != null)
echo "<p class=\"level\">" . $ext_db_row['level'] . "</p>\n";
else echo "<p> </p>\n";
if ($ext_db_row['level'] != null)
echo "<p class=\"state\">" . $ext_db_row['state'] . "</p>\n";
else echo "<p> </p>\n";
if ($ext_db_row['level'] != null)
echo "<p class=\"country\">" . $ext_db_row['country'] . "</p>\n";
else echo "<p> </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> </p>\n";
echo "</li>\n\n";
}//end while
mysql_close($con);
?>
</ul>
</div>
и вот javascript, который я использую вместе с 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',
});
});