jQuery(document).ready(function($){
    var body = $( 'body' );
    $(document).ready(function() {
        setPagination();

        $('#myInput').on('keyup', function() {
            myFunction();
        });
    });

    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();
    }

});