У меня возникла проблема с моей новой функцией фильтрации таблиц. Проблема возникает при выборе предложения для фильтрации. Вместо того, чтобы отображать строки из всех фильтруемых данных внутри таблицы, фильтр фильтрует видимые строки только за вычетом данных спрятанное разбиением на страницы.
Кроме того, когда я нажимаю больше, чтобы показать больше строк, таблица начинает показывать данные за пределами текущего фильтра. Что плохого.
У меня также есть другая фильтрующая функция для фильтрации по "Свободным телефонам", которая была объединена с моим методом разбивки на страницы (ниже).
Как я могу объединить этот фильтр (раскрывающийся) с моим фильтром "Бесплатные трубки" (один флажок) и методом разбивки на страницы, так что, когда я выбираю параметр для фильтрации по фильтру, он обрабатывает все данные внутри таблицы а не только видимые строки, отображаемые разбиением на страницы.
https://jsfiddle.net/51Le6o06/48/
В приведенной выше скрипте показаны обе функции фильтрации, работающие бок о бок, но они плохо работают вместе.
Как вы можете видеть в приведенном выше jsfiddle, раскрывающийся фильтр собирает свои параметры из HTML, а затем отображает их в раскрывающемся меню, поэтому все параметры присутствуют, чтобы их отфильтровать, просто спрятанные с разбивкой по страницам.
Вот jQuery и Javascript для каждой из функций.
Это новый фильтр, который не работает хорошо.
$(document).ready(function() {
$('.filter-gift').each(filterItems);
});
function filterItems(e) {
var items = [];
var table = '';
tableId = $(this).parent().parent().attr('tag')
var listItems = "";
listItems += "<option value=''> -Select- </option>";
$('div[tag="' + tableId + '"] table.internalActivities .information').each(function (i) {
var itm = $(this)[0].innerText;
if ($.inArray(itm, items) == -1) {
items.push($(this)[0].innerText);
listItems += "<option value='" + i + "'>" + $(this)[0].innerText + "</option>";
}
});
$('div[tag="' + tableId+ '"] .filter-gift').html(listItems);
$('.filter-gift').change(function () {
if($(this).val()!= "") {
var tableIdC = $(this).parent().parent().attr('tag');
var text = $('div[tag="' + tableIdC + '"] select option:selected')[0].text.replace(/(\r\n|\n|\r| |)/gm, "");;
$('div[tag="' + tableIdC + '"] .product-information-row').each(function (i) {
if ($(this).text().replace(/(\r\n|\n|\r| |)/gm, "") == text) {
$(this).show();
$(this).prev().show();
$(this).next().show();
}
else {
$(this).hide();
$(this).prev().hide();
$(this).next().hide();
}
});
} else {
$(this).parent().parent().find('table tr').show();
}
});
}
Это функция фильтрации и разбиения на страницы, которую я хочу объединить с указанной выше функцией (работаю).
jQuery.fn.sortPaging = function(options) {
var defaults = {
pageRows: 2
};
var settings = $.extend(true, defaults, options);
return this.each(function() {
var container = $(this);
var tableBody = container.find('.internalActivities > tbody');
var dataRows = [];
var currentPage = 1;
var maxPages = 1;
var buttonMore = container.find('.seeMoreRecords');
var buttonLess = container.find('.seeLessRecords');
var buttonFree = container.find('.filter-free');
var tableRows = [];
var maxFree = 0;
var filterFree = buttonFree.is(':checked');
function displayRows() {
tableBody.empty();
var displayed = 0;
$.each(dataRows, function(i, ele) {
if( !filterFree || (filterFree && ele.isFree) ) {
tableBody.append(ele.thisRow).append(ele.nextRow);
displayed++;
if( displayed >= currentPage*settings.pageRows ) {
return false;
};
};
});
};
function checkButtons() {
buttonLess.toggleClass('element_invisible', currentPage<=1);
buttonMore.toggleClass('element_invisible', filterFree ? currentPage>=maxFreePages : currentPage>=maxPages);
};
function showMore() {
currentPage++;
displayRows();
checkButtons();
};
function showLess() {
currentPage--;
displayRows();
checkButtons();
};
function changedFree() {
filterFree = buttonFree.is(':checked');
if( filterFree && currentPage>maxFreePages ) {
currentPage=maxFreePages;
};
displayRows();
checkButtons();
};
tableBody.find('.product-data-row').each(function(i, j) {
var thisRow = $(this);
var nextRow = thisRow.next();
var amount = parseFloat(thisRow.find('.amount').text().replace(/£/, ''));
var isFree = thisRow.find('.free').length;
maxFree += isFree;
dataRows.push({
amount: amount,
thisRow: thisRow,
nextRow: nextRow,
isFree: isFree
});
})
dataRows.sort(function(a, b) {
return a.amount - b.amount;
});
maxPages = Math.ceil(dataRows.length/settings.pageRows);
maxFreePages = Math.ceil(maxFree/settings.pageRows);
tableRows = tableBody.find("tr");
buttonMore.on('click', showMore);
buttonLess.on('click', showLess);
buttonFree.on('change', changedFree);
displayRows();
checkButtons();
})
};
$('.sort_paging').sortPaging();
Цели
- Сделайте работу фильтра с работой с разбиением на страницы.
- Сделайте фильтр одновременно с фильтром "Бесплатная трубка".
