<script type="text/javascript">
jQuery(document).ready(function($){
  var body = $( 'body' );
$(document).ready(function() {
    setPagination();
});

function setPagination() {
    var totalRows = $('#tblData').find('tbody tr:has(td)').length;
    var recordPerPage = 15;
    var totalPages = Math.ceil(totalRows / recordPerPage);
    var $pages = $('<div id="pages"></div>');
    for (i = 0; i < totalPages; i++) {
      $('<span class="pageNumber"> ' + (i + 1) + '</span>').appendTo($pages);
    }
    $pages.appendTo('#tblData');

    $('.pageNumber').hover(
      function() {
        $(this).addClass('focus');
      },
      function() {
        $(this).removeClass('focus');
      }
    );

    $('table').find('tbody tr:has(td)').hide();
    var tr = $('table tbody tr:has(td)');
    for (var i = 0; i <= recordPerPage - 1; i++) {
      $(tr[i]).show();
    }
    $('span').click(function(event) {
      $('#tblData').find('tbody tr:has(td)').hide();
      var nBegin = ($(this).text() - 1) * recordPerPage;
      var nEnd = $(this).text() * recordPerPage - 1;
      for (var i = nBegin; i <= nEnd; i++) {
        $(tr[i]).show();
      }
    });
}

function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("tblData");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
  setPagination();
}

});

</script>