Фильтруем с помощью jQuery большое количество данных
У меня на хабре очень крупное Принцип работы прост, устанавливаем себе грабер, получаем заветный 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>
—
Демо и исходный файл закладок
Архив
комментарии (38)