<form action="" class="live-search" method="post">
    <input type="text" value="" name="filter" id="filter" placeholder="Search" />
</form>
<table>
    <thead>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
        </tr>
        <tr>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
        </tr>
        <tr>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
        </tr>
        <tr>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
        </tr>
        <tr>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
        </tr>
        <tr>
            <td>Row 11</td>
            <td>Row 11</td>
            <td>Row 11</td>
            <td>Row 11</td>
            <td>Row 11</td>
        </tr>
        <tr>
            <td>Row 12</td>
            <td>Row 12</td>
            <td>Row 12</td>
            <td>Row 12</td>
            <td>Row 12</td>
        </tr>
    </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

$('table').each(function () {
  var currentPage = 0;
  var numPerPage = 5;
  var $table = $(this);

  $table.bind('repaginate', function () {
    $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
  });
  $table.trigger('repaginate');

  var numRows = $table.find('tbody tr').length;
  var numPages = Math.ceil(numRows / numPerPage);
  var $pager = $('<div class="pager"></div>');
  $('<span class="first"><</span>').bind('click', function (event) {
    currentPage = 0;
    $table.trigger('repaginate');
    $('span.page-number').each(function () {
      if (parseInt($(this).text()) == 1) {
        $(this).addClass('active')
      } else {
        $(this).removeClass('active');
      }
    });
    if (currentPage == 0) {
      $(this).addClass('disabled');
      $(this).parents('.pager').children('.prev').addClass('disabled');
    } else {
      $(this).removeClass('disabled');
      $(this).parents('.pager').children('.prev').remove('disabled');
    }
    if (currentPage == numPages - 1) {
      $(this).parents('.pager').children('span.next').addClass('disabled');
      $(this).parents('.pager').children('span.last').addClass('disabled');
    } else {
      $(this).parents('.pager').children('span.next').removeClass('disabled');
      $(this).parents('.pager').children('span.last').removeClass('disabled');
    }
  }).appendTo($pager);
  $('<span class="prev"><<</span>').bind('click', function (event) {
    if ((currentPage - 1) >= 0) {
      currentPage = currentPage - 1;
      $table.trigger('repaginate');
      $('span.page-number').each(function () {
        if (parseInt($(this).text()) - 1 == currentPage) {
          $(this).addClass('active')
        } else {
          $(this).removeClass('active');
        }
      });
    }
    if (currentPage == 0) {
      $(this).addClass('disabled');
      $(this).parents('.pager').children('.first').addClass('disabled');
    } else {
      $(this).removeClass('disabled');
      $(this).parents('.pager').children('.first').removeClass('disabled');
    }
    if (currentPage == numPages - 1) {
      $(this).parents('.pager').children('span.next').addClass('disabled');
      $(this).parents('.pager').children('span.last').addClass('disabled');
    } else {
      $(this).parents('.pager').children('span.next').removeClass('disabled');
      $(this).parents('.pager').children('span.last').removeClass('disabled');
    }
  }).appendTo($pager);
  for (var page = 0; page < numPages; page++) {
    $('<span class="page-number"></span>').text(page + 1).bind('click', {
      newPage: page
    }, function (event) {
      currentPage = event.data['newPage'];
      $table.trigger('repaginate');
      $(this).addClass('active').siblings().removeClass('active');

      if (event.data['newPage'] == 0) {
        $(this).parents('.pager').children('span.prev').addClass('disabled');
        $(this).parents('.pager').children('span.first').addClass('disabled');
      } else {
        $(this).parents('.pager').children('span.prev').removeClass('disabled');
        $(this).parents('.pager').children('span.first').removeClass('disabled');
      }
      if (event.data['newPage'] == numPages - 1) {
        $(this).parents('.pager').children('span.next').addClass('disabled');
        $(this).parents('.pager').children('span.last').addClass('disabled');
      } else {
        $(this).parents('.pager').children('span.next').removeClass('disabled');
        $(this).parents('.pager').children('span.last').removeClass('disabled');
      }
    }).appendTo($pager).addClass('clickable');
  }
  $pager.insertAfter($table).find('span.page-number:first').addClass('active');
  $('<span class="next">></span>').bind('click', function (event) {
    if ((currentPage + 1) <= numPages) {
      currentPage = currentPage + 1;
      $table.trigger('repaginate');
      $('span.page-number').each(function () {
        if (parseInt($(this).text()) - 1 == currentPage) {
          $(this).addClass('active')
        } else {
          $(this).removeClass('active');
        }
      });
    }
    if (currentPage == numPages - 1) {
      $(this).addClass('disabled');
      $(this).parents('.pager').children('span.last').addClass('disabled');
    } else {
      $(this).removeClass('disabled');
      $(this).parents('.pager').children('span.last').removeClass('disabled');
    }
    if (currentPage == 0) {
      $(this).parents('.pager').children('.prev').addClass('disabled');
      $(this).parents('.pager').children('.first').addClass('disabled');
    } else {
      $(this).parents('.pager').children('.prev').removeClass('disabled');
      $(this).parents('.pager').children('.first').removeClass('disabled');
    }
  }).appendTo($pager);
  $('<span class="last">>></span>').bind('click', function (event) {
    currentPage = numPages - 1;
    $table.trigger('repaginate');
    $('span.page-number').each(function () {
      if (parseInt($(this).text()) == numPages) {
        $(this).addClass('active')
      } else {
        $(this).removeClass('active');
      }
    });
    if (currentPage == numPages - 1) {
      $(this).addClass('disabled');
      $(this).parents('.pager').children('span.next').addClass('disabled');
    } else {
      $(this).removeClass('disabled');
      $(this).parents('.pager').children('span.next').remove('disabled');
    }
    if (currentPage == 0) {
      $(this).parents('.pager').children('.prev').addClass('disabled');
      $(this).parents('.pager').children('.first').addClass('disabled');
    } else {
      $(this).parents('.pager').children('.prev').removeClass('disabled');
      $(this).parents('.pager').children('.first').removeClass('disabled');
    }
  }).appendTo($pager);
  if (currentPage == 0) {
    $pager.find('.first').addClass('disabled');
    $pager.find('.prev').addClass('disabled');
  }


  /** Filter Data - Live Search **/
  function filter(selector, query) {
    query = $.trim(query);
    query = query.replace(/ /gi, '|');

    $(selector).each(function () {
      if (($(this).text().search(new RegExp(query, "i")) < 0)) {
        $(this).hide().removeClass('visible');

      } else {
        $(this).show().addClass('visible');
      }
    });
  }

  $('#filter').keyup(function (event) {
    if (event.keyCode == 27 || $(this).val() == '') {
      $(this).val('');
      $('table tbody tr').removeClass('visible').show().addClass('visible');
    } else {
      filter('table tbody tr', $(this).val());
    }
  });

});

table, td, th {
    border: 1px solid black;
}
.pager {
    margin-top: 15px;
}
.pager span.page-number,
.pager span.first,
.pager span.prev,
.pager span.last,
.pager span.next {
    padding-right: 5px;
    cursor: pointer;
}
.pager span.page-number:hover,
.pager span.first:hover,
.pager span.prev:hover,
.pager span.last:hover,
.pager span.next:hover {
     color: green;
}
.pager span.page-number.active {
     color: red;
}