Footable append with incoming data

Question

I am trying to implement Footable on my website, but I encounter a problem whereby every time I added a new set of values into my footable, the table does not auto paginate it. which mean even though I have set it to have a limit of 10

data-paging-size="10" 

Every time I append into my table, it does not auto redraw and paginate. It will keep on adding to my current page and the size will keep increasing

<table id="myTable" class="table footable filter-dropdown-no bid-list-table " data-paging-size="10" data-sorting="true" data-filtering="true">
            <thead>
              <tr>
                <th data-breakpoints="xs sm">Photo</th>
                <th>Facebook Name/ID</th>
                <th >Qty</th>
                <th data-breakpoints="xs sm">Comment</th>
                <th data-breakpoints="xs sm">Comment Time</th>
                <th data-breakpoints="xs">Action</th>
              </tr>
            </thead>
            <tbody >
              ````
            </tbody>
          </table>

Here is my javascript

function localStorageLiveUpdate(value){

  $('.bid-item-customer-id-' + value.id).remove();
  $('.footable-empty').remove();
   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><td style="display: table-cell;">';
        html += '<form method="post" class="form-bid-delete-action" action="{{ config('app.url') }}/admin/bid/' + value.id + '/delete/action">';
                html += '<input type="hidden" name="_method" value="delete"><input type="hidden" name="_token" value="' + value.csrf + '">';
        html += '</form></td></tr>';

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

}

Thanks for spending your time to help.

Answer 1

Your table size keep increase because every time you call the function "localStorageLiveUpdate" you are appending data and adding new line

// Add this line before appending new element
$('.bid-list-table tbody tr').remove();
$('.bid-list-table tbody').append(html);