如何通过javascript强制浏览器在对表进行排序之前显示模态

How to force browsers to show a modal before sorting a table via javascript?

本文关键字：排序 模态 显示 javascript 何通过 浏览器      更新时间：2023-09-26

我使用的是github上的stupid-table插件。(https://github.com/joequery/Stupid-Table-Plugin)

我正在处理一个非常大的表。Firefox和Chrome在不到3秒的时间内改变了表的排序。IE10、11和Edge需要30秒以上的时间。还有一些移动浏览器，首先是旧iPad 1上的Safari

我想在排序发生之前显示模态' sorting, please wait '，然后在排序结束后隐藏模态。

我试过了:

            var super_table = $('#result_div #result_table').stupidtable();    

            super_table.bind('beforetablesort', function (event, data) {
                // data.column - the index of the column sorted after a click
                // data.direction - the sorting direction (either asc or desc)
                // $(this) - this table object
                $('#sorting_modal').modal('show');
                console.log('The sorting direction: ' + data.direction);
                console.log('The column index: ' + data.column);
            });
            super_table.bind('aftertablesort', function (event, data) {
                // data.column - the index of the column sorted after a click
                // data.direction - the sorting direction (either asc or desc)
                // $(this) - this table object
                $('#sorting_modal').modal('hide');
                console.log('The sorting direction: ' + data.direction);
                console.log('The column index: ' + data.column);
            });

两个问题:

  1. 在Firefox和Chrome上，一切都是如此之快，用户现在在屏幕上只看到一个"闪光"，所以只会让用户讨厌

  2. 在IE上，排序在请求显示模态后立即开始，但是排序是"阻塞"IE的，所以用户在屏幕上看到30秒的"什么都没有发生"，然后闪烁(模态显示，表排序，模态隐藏)

理想:

  1. 用户点击，激活stupid-table插件
  2. on 'before table sorting'事件我想显示一个模态
  3. 等待1/2秒
  4. 做真正的排序
  5. 在'后表排序'事件我想首先更新表
  6. 然后隐藏模态，大约在排序结束后1/2秒。

我不知道是否有一种方法来强迫浏览器(和插件本身)"等待"后模态显示之前真正做排序

使用setTimeout来模拟隐藏模态之前的一点延迟:

super_table.bind('aftertablesort', function (event, data) {
       // data.column - the index of the column sorted after a click
       // data.direction - the sorting direction (either asc or desc)
       // $(this) - this table object
       setTimeout(function() {
              $('#sorting_modal').modal('hide');
       }, 1000);
       console.log('The sorting direction: ' + data.direction);
       console.log('The column index: ' + data.column);
});
相关文章：