Pull to refresh

Фильтруем с помощью jQuery большое количество данных

Reading time5 min
Views2.6K
image У меня на хабре очень крупное приданное избранное. Там что-то найти было очень сложно, а если ещё не помнишь как и что, то чрез чур. По сему решил написать на jQuery фильтр всего этого добра по тэгам. Для того бы сграбить закладки, прошлой весной ukko сделал простой граббер. В итоге у нас получался огромный htm в формате NETSCAPE Bookmarks и xml.

Принцип работы прост, устанавливаем себе грабер, получаем заветный habrabookmarks.htm, и просто запускаем мой файл сортировки рядом.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 <title>Sort Bookmarks</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript">
// делаем массив из уникальных значений
getUniqueValues = function (arr) {
  var hash = new Object();
  for (j = 0; j < arr.length; j++) {hash[arr[j]] = true}
  var array = new Array();
  for (value in hash) {array.push(value)};
  return array;
}

// аналог php функции
function nl2br (str, is_xhtml) {
  var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
  return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
}

// кастомные функции для проведения сортировок списка.

/*
* Фильтр тэгов по 1 символу
* Нам нужна только одна буква strg (String)
*/

function _sort (strg) {
  // покажем ссылку сброса фильтра
  $(".sat").show();
  // спрячем все тэги и запятые после них
  $("#tagz .tgs").hide().next().hide();
  // покажем тэги которые ничинаются на strg, и запятые после них
  $("#tagz .tgs[rel^="+strg+"]").show().next().show();
  return false;
}

/*
* Сброс фильтра тэгов
*/

function C_sort() {$(".sat").hide();$("#tagz .tgs").show().next().show();return false;}

/*
* Фильтр всех записей
* Нам нужен тег целиком strg (String)
*/

function _filter (strg) {
  // покажем ссылку сброса фильтра
  $(".sabm").show();
  // спрячем все записи и их описания
  $("DL A").parent().hide().next().hide();
  // покажем записи с тэгом strg, и их описание
  $("DL A[tags*="+strg+"]").parent().show().next().show();
  return false;
}

/*
* Сброс фильтра записей
*/

function C_filter () {$(".sabm").hide();$("DL A").parent().show().next().show();return false;}

// Обрабатываем файл к тором хранятся наши закладки
$.get('habrabookmarks.htm', function(data) {
  $('body').html(data);

// Создаём див для тэгов и фильтра тэгов, и помещаем его перед заголовком
$("<div>")
    .attr("id","tagz")
    .css({
      "float":"right",
      "padding":"10px",
      "width":"310px",
      "height":"auto",
      "overflow":"auto"
      })
    .insertBefore($("h1:eq(0)"));
    
  // Вставляем кнопку сброса фильтра записей
  $("h1:eq(0)").append(" <a href='javascript:' class='sabm' style='display: none; color: green;' onclick='C_filter();'><small>(show all)</small></a>");
  
  // Переменные для работы
  var
    allTags = aT = curSA = [],
    abc = ".-1234567890qwertyuiopasdfghjklzxcvbnmйцукенгшщзхфвапролджэячсмитбю",
    j = 0;
  
  // делим строку для фильтра тэгов на масив и сортируем
  abc = abc.split('').sort();
  // выводим в виде ссылок
  for (var i in abc)
    curSA[i] = "<a href='javascript:' onclick='_sort($(this).text())'>"+abc[i]+"</a>";
  // добавляем в начало нашего дива + ссылка сброса фильтра тэгов
  $("#tagz").append(curSA.join(", ") + " <a href='javascript:' class='sat' style='display: none; color: red;' onclick='C_sort();'>x</a> <br><br> ");

  // выбираем все тэги из записей
  // тэги хранятся в ссылках в параметре tags
  $("DL A").each(function(){
    // получаем значение атрибута и превращаем в масив с тегами
    allTags = $(this).attr("tags").split(',');
    // дальше получаем описание заметки
    var curTDA = $(this).parent().next();
    // преобразовываем его
    curTDA.html(nl2br(curTDA.html()));
    // если тэгов не ноль, обрабатываем их
    if (allTags.length > 0) {
      var curA = [];
      for (var i in allTags) {
        // один массив для всех-всех тэгов, другой только для тэгов данной заметки
        aT[j] = curA[i] = "<a class='tgs' rel='"+allTags[i]+"' href='javascript:' onclick='_filter($(this).text())'>"+allTags[i]+"</a>"
        j++;
      }
      // добавляем тэги(через запятую) к заметке
      curTDA.append("<br>" + curA.join(', ') + "<hr>");
    }
  }).attr("target","_blank"); // вконце просто пускае ссылки в новом окне
  // добавялем в наш див все уникальные тэги, отсортированные и разделённые запятыми
  $("#tagz").append(getUniqueValues(aT).sort().join('<span>, </span>'));
// Сказочке конец, а кто слушал молодец
});

</script>
</head>
<body>
</body>
</html>




Демо и исходный файл закладок
Архив
Tags:
Hubs:
+13
Comments38

Articles

Change theme settings