javascript - 在宽表上使用 bootstrapTable 时出现“页面无响应”警报

Question

我正在使用 bootstrap-table 和 bootstrap-table-filter-control。它适用于所有小尺寸的桌子。但是，使用宽表（600 行）时，我会收到“页面无响应”警报。如何使 bootstrapTable 与大尺寸表一起工作？

HTML

        <table class="table table-no-more table-bordered mb-none" id='documentsTable'
        data-filter-control="true" data-show-search-clear-button="true"
        data-show-filter-control-switch="true" data-show-multi-sort="true">
            <thead>
                <tr>
                    <th class="text-left"  style="width: 100px">type</th>
                    <th class="text-left" data-field="Description" data-filter-control="select" 
                       data-sortable="true">description</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>

Javascript

<script>
$(function () {
var $table = $('#documentsTable')
$table.bootstrapTable()
$('button[name="clearSearch"]').click(function() {
  $('select.bootstrap-table-filter-control-Description').multipleSelect('setSelects', [])
  filterData()
})

function customFilter(row,filter){
  const filterDescription = filter['description']
  var result = (filterDescription.length == 0 || filterDescription.includes(row.Description)) 
  return result
}

function filterData() {
  $table.bootstrapTable('filterBy', {
      description: $('select.bootstrap-table-filter-control-Description').multipleSelect('getSelects')
  }, 
  {
    'filterAlgorithm': customFilter
  }
  )
}

$('select.bootstrap-table-filter-control-Description').change(function () {
  filterData()
})


$(function () {
  var $select = $('select.bootstrap-table-filter-control-Description')
  $select.attr('multiple','multiple')
  $select.find('option[value=""]').remove();
  $select.multipleSelect({
    container: 'body',
    includeSelectAllOption: false,
    showClear: true,
    filter: true,
    filterPlaceholder: 'Suche',
    selectAll: true
  }) 
})
})
</script>

标签： javascriptbootstrap-table