Not display jquery pagination with appended html table

Question

I have an ajax request to a php file returning mysql table data and append to a html table.

I want to add a pagination and I found this on jsfiddle ( jquery pagination here ) and when I add it in $(function(){}); event it wont show. But when I add the pagination coding inside a click event and when I click the button, pagination get displayed. I want to add the pagination in page load without using a button click. Even though when I add page load event it wont work. I'm confused why it is happening like that.

I want to append these into a table. This works. I get my info in my table but I can't seem to add classes or id's and get some styling on it.

Below is my coding. Here I appended ajax method append data from database html tr tags since I cannot show this with db in internet.

<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>

my html table code

    <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>

Answer 1

Try adding under

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

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

So that you trigger the repaginate functionality on success