I have a webpage with two tables https://jsfiddle.net/51Le6o06/37/ in this jsfiddle everything is working fine.

The tables are sorted on page load by (.amount) [to display in order of price] also the filter "free handsets" is working well, as you can see each row has a child row. You will also notice the dropdown box above each table which I will get to shortly.

jQuery used:

1. 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();

This is where it get's tricky remember the dropdown box I told you about above each table in the fiddle, well this is where I would like to add another filter for the table/s and merge the jQuery used into the jQuery functions above.

The problem is I can't get the function to work well with the jQuery above please take a look at the function currently in production for this filter you can also see this jQuery in action here https://jsfiddle.net/51Le6o06/31/ which does not include the jQuery above.

jQuery used: (not working as should)

1. $(document).ready(function () { // $('#div1').on('click', Logout); // Initialize(); $('.filter-free').click(filterItems); //wtf so wrong!! }) function filterItems(e) { var items = []; var checked = this.checked; var listItems = ""; listItems += "<option value='0'> -Select- </option>"; if (checked) { $('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>"; } }); } else { listItems = "<option value='0'> -Select- </option>"; } $('.filter-gift').html(listItems); $('.filter-gift').change(function () { var text = $("select option:selected")[0].text.replace(/(\r\n|\n|\r| |)/gm, "");; $('.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(); } }); }); }

As you can see from the jsfiddle the function contains several problems it only works if you select the "free handset" filter, it also contains no option to clear the filter and show all rows and finally it wont work with multiple tables on the same page (it's filtering both tables even when you try to filter just one)

How can I fix these problems to make this function:

• Work with multiple tables on the same page
• Contain an option to clear the filter (to show all rows)
  
• Work on page load without needing to select the WRONG filter
  
• Finally - Merge with my previous jsfiddle (https://jsfiddle.net/51Le6o06/37/)

Please can you guys also show me any fixes updates in jsfiddle as I find it easier to understand - thanks!