javascript - テーブルのページネーション - li が正しく追加されない

Question

function pagination() {     
 $('.paginated').each(function() {
    var currentPage = 0;
    var numPerPage = $("#instancesPerPage").val();
    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 = $('<ul></ul>');

    for (var page = 0; page < numPages; page++) {
    var pageUrl = '<a href="#">' + page + '</a>';
        $('<li></li>').html(pageUrl).on('click', {
            newPage: page
        }, function(event) {
            currentPage = event.data['newPage'];
            $table.trigger('repaginate');
            $(this).addClass('active').siblings().removeClass('active');
        }).appendTo($pager);    
    }
    $pager.appendTo('#pager');
    $("ul li:first-child").addClass('active');
 });
};

テーブルに 8 行あり、numPerPage.value が 2 の場合、上記の関数は次のようになります。

<div class="pagination-instances pagination-small pagination-right" id="pager">
    <ul></ul>
    <ul>
        <li class="active"><a href="#">0</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

別の numPerPage.value を選択するときに次の関数を呼び出した場合:

 $('#instancesPerPage').on("change", function() {
  pagination();
 });

テーブル ページは正しい numPerPage.value に変更されますが、li は正しく更新されず、混乱します。

<div class="pagination-instances pagination-small pagination-right" id="pager">
    <ul></ul>
    <ul>
        <li class="active"><a href="#">0</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
    <ul>
        <li class="active"><a href="#">0</a></li>
        <li><a href="#">1</a></li>
    </ul>
    <ul>
        <li class="active"><a href="#">0</a></li>
        <li><a href="#">1</a></li>
    </ul>
</div>

どうやらこれは私が使用しているappendToと関係があるようですが、それを修正する方法がわかりません。また、空の がある理由もわかりません<ul></ul>。