How to implement pagination with HTML table

Here, this table shows almost 500 records. so in pagination it shows 60 page anchors.

instead of that i had modified to single anchor. Now it display as <>.

If it displays with first, previous, next, last buttons and user to select how many rows per page.

function pagination() {
    var rowsShown = 8;
    var rowsTotal = $('#tblSupplierDetails tr:visible').length - 1;
    var numPages = rowsTotal / rowsShown;
    if (numPages == 0) {
        $('#nav').remove();
    } else {
        if ($('#nav').length > 0) {
            $("#nav a").remove();
        }
        else {
            $('#tblSupplierDetails').after('<div id="nav"></div>');
        }
    }
    $('#nav').append('<a href="#" rel="-1">&lt;</a>');
    $('#nav').append('<a href="#" rel="1">&gt;</a>');
 
    $("#tblSupplierDetails > tbody > tr:visible").hide().slice(0, rowsShown).animate({ opacity: 1 }, 300).show();
    $('#nav a:first').addClass('active');
    $('#nav a').bind('click', function () {
        currPage += Number($(this).attr('rel'));
        var startItem = currPage * rowsShown;
        var endItem = startItem + rowsShown;
        Filter();
        $('#tblSupplierDetails tbody tr:visible').css('opacity', '0.0').hide().slice(startItem, endItem).
            css('display', 'table-row').animate({ opacity: 1 }, 300);
    });
}