Filter & Page

answer to http://stackoverflow.com/questions/37105299/merge-new-filter-function-with-existing-pagination-and-filter-jquery-javascript

HTML

<form>
  <select>
    <option>freeTv</option>
    <option>freeHandset</option>
  </select>
</form>
<table>
<tbody freeTv='false' freeHandset='false' cost='200'>
    <tr><td>content of product 1</td></tr>
    <tr><td>description of product 1</td></tr>
</tbody>
<tbody freeTv='true' freeHandset='false' cost='300'>
    <tr><td>content of product 2</td></tr>
    <tr><td>description of product 2</td></tr>
</tbody>
<tbody freeTv='true' freeHandset='false' cost='300'>
    <tr><td>content of product 3</td></tr>
    <tr><td>description of product 3</td></tr>
</tbody>
<tbody freeTv='true' freeHandset='true' cost='300'>
    <tr><td>content of product 4</td></tr>
    <tr><td>description of product 4</td></tr>
</tbody>
<tbody freeTv='false' freeHandset='true' cost='300'>
    <tr><td>content of product 5</td></tr>
    <tr><td>description of product 5</td></tr>
</tbody>
<tbody freeTv='false' freeHandset='true' cost='300'>
    <tr><td>content of product 6</td></tr>
    <tr><td>description of product 6</td></tr>
</tbody>
<tbody freeTv='true' freeHandset='false' cost='300'>
    <tr><td>content of product 7</td></tr>
    <tr><td>description of product 7</td></tr>
</tbody>
<tbody freeTv='true' freeHandset='true' cost='300'>
    <tr><td>content of product 8</td></tr>
    <tr><td>description of product 8</td></tr>
</tbody>
</table>
<a href='#'>next 2</a>

CSS

.filtered { display: none; }
.paged { display: none; }

JavaScript

function filterProducts(filter) {
    $('tbody').addClass('filtered');
    $('tbody[' + filter + '="true"]').removeClass('filtered');
}

function resetPagination() {
    $('tbody').addClass('paged');
    $('tbody.filtered').removeClass('paged');
}

function showNextPage() {
    $('tbody.paged').slice(0, 2).removeClass('paged');
}

$(function() {
	  $('select').change(function() {
        filterProducts($(this).val());
        resetPagination();
		    showNextPage();
    });
   	$('a').click(function() {
		    showNextPage();
    });
    $('select').change();
});