SO - 36466324

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<h1>Multi table sorting on page load with filter/s + paging</h1>
<h2>First table below</h2>
<div class="sort_paging" tag="tab1">

    <p>
        <input type="checkbox" class="filter-free" /> Free Handset
        <select class="filter-gift">
          <!-- Options must be filled by jQuery from HTML $(.information)-->
        </select>
    </p>

    <table class="internalActivities">
        <thead>
            <tr>
                <th>head1</th>
                <th>head2</th>
                <th>head3</th>
                <th>head4</th>
            </tr>
        </thead>
        <tbody>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="handsetcost">£364.00 upfront</span>
                    <br><span class="amount">£10.10 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free TV
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£40.40 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free TV
                </p></td>
            </tr>

            <tr class="product-data-row">
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£30.30 per month</span></td>
            </tr>
            <tr class="product-information-row">
                <td colspan="100%"><p class="information">Free TV
                </p></td>
       ...

CSS

table,
tr,
td {
    border: 1px solid black;
    padding: 8px;
}

h1 {
    font-size: 18px;
    color: red;
}
.element_invisible {
	display: none;
}

.filter-gift {
  margin-left:50px;
}

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...