带有传入数据的Footable追加

Question

我正试图在我的网站上实现footable，但我遇到了一个问题，每次我在我的Footable中添加一组新的值时，表都不会自动分页。这意味着即使我将其设置为限制为10

data-paging-size="10" 

每次我追加到我的表中时，它不会自动重绘和分页。它将继续添加到我当前的页面，大小也将继续增加

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

这是我的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); 

}

感谢您抽出时间来帮忙。

Answer 1

表的大小不断增加，因为每次调用函数"localStorageLiveUpdate“时，您都在追加数据并添加新行

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