Footable 附加传入数据

Question

我正在尝试在我的网站上实施 Footable，但我遇到了一个问题，即每次我将一组新值添加到我的 footable 时，table不会自动分页。也就是说尽管我已将它设置为 10

的限制

data-paging-size="10"

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

<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

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

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

Footable 附加传入数据

Footable append with incoming data

javascript

jquery

laravel

footable