Javascript 不显示带有附加html表的jquery分页

我有一个对php文件的ajax请求，返回mysql表数据并附加到html表中

我想添加一个分页，我在jsfiddle（）和在$（function（）{}）中添加它时发现了这一点；它不会显示的事件。但是，当我在单击事件中添加分页编码时，当我单击按钮时，就会显示分页。我想在页面加载中添加分页，无需单击按钮。即使当我添加页面加载事件时，它也不会工作。我不明白为什么会这样

我想把它们附加到一个表中。这很有效。我在我的表格中获得了我的信息，但我似乎无法添加类或id，也无法在上面获得一些样式

下面是我的代码。 这里我附加了ajax方法从数据库HTMLTR标记中追加数据，因为我不能在internet上用db显示这一点

<script>
    $(function () {


        $.ajax({
            url: 'api.php',
            data: "",
            dataType: 'json',
            success: function (rows) {

                //   $('#table1').append('<table border="1" width="200"><tr><th width="30%">ID</th><th width="70%">NAME</th></tr>');
                for (var i in rows) {
                    var row = rows[i];

                    var id = row[0];
                    var vname = row[1];
                    $('#output').append('<tr><td>' + id + '</td><td>' + vname + '</td></tr>');

                }

                // $('#output').append('</table>');
            }

        });

    });
</script>

<script>
    $(function () {




        $('table#output').each(function () {


            var currentPage = 0;
            var numPerPage = 2;
            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>');
            var $previous = $('<span class="previous"><<</spnan>');
            var $next = $('<span class="next">>></spnan>');

            //  alert(numRows);
            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');
                }).appendTo($pager).addClass('clickable');
            }
            $pager.insertBefore($table).find('span.page-number:first').addClass('active');
            $previous.insertBefore('span.page-number:first');
            $next.insertAfter('span.page-number:last');

            $next.click(function (e) {
                $previous.addClass('clickable');
                $pager.find('.active').next('.page-number.clickable').click();
            });
            $previous.click(function (e) {
                $next.addClass('clickable');
                $pager.find('.active').prev('.page-number.clickable').click();
            });
            $table.on('repaginate', function () {
                $next.addClass('clickable');
                $previous.addClass('clickable');

                setTimeout(function () {
                    var $active = $pager.find('.page-number.active');
                    if ($active.next('.page-number.clickable').length === 0) {
                        $next.removeClass('clickable');
                    } else if ($active.prev('.page-number.clickable').length === 0) {
                        $previous.removeClass('clickable');
                    }
                });
            });
            $table.trigger('repaginate');

        });

    });
</script>

$（函数（）{
$.ajax({
url:'api.php'，
数据：“，
数据类型：“json”，
成功：函数（行）{
//$（'#表1'）。追加（'IDNAME'）；
用于（行中的变量i）{
变量行=行[i]；
变量id=行[0]；
var vname=行[1]；
$（'#output'）。追加（''+id+''+vname+''）；
}
//$（'#output'）。追加（''）；
}
});
});
$（函数（）{
$（'table#output'）。每个（函数（）{
var-currentPage=0；
var numPerPage=2；
var$表=$（此）；
$table.bind（'repaginate'，函数（）{
$table.find（'tbody tr'）.hide（）.slice（当前页面*numPerPage，（当前页面+1）*numPerPage.show（）；
});
$table.trigger（'repaginate'）；
var numRows=$table.find（'tbody tr'）.length；
var numPages=Math.ceil（numRows/numPerPage）；
变量$pager=$（''）；
变量$previous=$（''）；
//警报（numRows）；
对于（变量页面=0；页面

我的html表格代码

    <table class="paginated" id="output" width="200" border="1">
  <thead>
    <tr>
      <th width="30%">
        ID 
        <span class="ascdes">
        </span>
      </th>
      <th width="70%">
        NAME 
        <span class="ascdes">
        </span>
      </th>
    </tr>

  </thead>

</table>

身份证件
名称

尝试在下面添加

$('#output').append('<tr><td>' + id + '</td><td>' + vname + '</td></tr>');

$('table#output').each(function () {
  $(this).trigger('repaginate');
});

$（'#output'）。追加（''+id+''+vname+''）；
$（'table#output'）。每个（函数（）{
$（this.trigger（'repaginate'）；
});

这样您就可以在

success