Append new row when api detect income data

[stevenleesf]

Hi there, I am trying to implement Footable into my websites, I encounter a problem with using append or prepend. Every time I append a new row into the data table. It did not redraw and check if the current page is fully occupied with data. How can I work around this error?

var html = '<tr class="bid-item bid-item-' + value.id;
        html += ' bid-item-customer-id-' + value.id + '" data-id="' + value.id + '" data-customer-id=" ' + value.customer_id + '">';
        html += '<td data-fb-user-id="' + value.fb_user_id + '" style="display: table-cell;"></td>';
        html += '<td style="display: table-cell;">' + value.from.name + '<p>(' + value.from.id + ')</p></td>';
                html += '<td style="display: table-cell;"><form method="post" class="form-bid-item-action" action="{{ config('app.url') }}/admin/bid/' + value.id + '/action">';
        html += '<input type="hidden" name="_token" value="' + value.csrf + '"><div class="input-group">';
        html += '</div></form></td><td style="display: table-cell;">' + value.message + '</td><td style="display: table-cell;">' + timeCreated + '</td>';
        html += '</td></tr>';

      $('.bid-list-table tbody').append(html);  

I am using a Facebook API to do this, where every income message is detected. it will send to my website and display. The problem is that it does not auto-paginate once it reached the max paginate value. only if I refresh my page then it will show correctly

Thanks for taking your time.