1

Bootstrap v2でjQueryデータテーブルを使用しています。ページが最初に読み込まれると、「処理中...」と表示されますが、これは問題ありません。また、ページを変更したりソートしたりするときにもこのメッセージが表示されます。これも良いことです。

ほとんどの場合、バックエンドのデータベースは高速であり、処理中のメッセージが画面に表示されるのは 1 秒以下です。

ただし、多数の行にわたって検索を実行している場合など、場合によっては、これが完了するまでに数秒かかることがあります。

処理中のメッセージが x 秒後も表示される場合は、スタイルを変更して背景色を追加するなど、何らかの形で更新するようにしたいと考えています。 。 お待ちください..."。

最初のステップは Filter イベントにバインドすることだと思いました。私はそれができました。しかし、処理を行うテーブルの初期ロードにバインドする方法を理解できませんでした...クエリによっては時間がかかる場合があります。

同様に、これはかなり一般的なことだと思うので、誰かが必要なイベントに添付され、Processing div を自動的に見つけて x 秒後にその場で更新するコードのスニペットを共有できるかどうか疑問に思っていました。次にそれをクリアして、次に Processing... メッセージを実行するときに、x 秒後にのみ変更されると仮定して、再び開始します。

前もって感謝します！

4

1 に答える 1

3

fnPreDrawCallback を使用してタイムアウトを開始し、次に fnDrawCallback を使用してタイムアウトをクリア (およびメッセージ状態をリセット) してみてください。

これは携帯電話で入力したものなので、エラーがある場合はご容赦ください。

$(document).ready(function() {
    var extendedLoadingTimer,
        setExtendedLoadingMessage = function(){
            // Do the stuff to change the message
            // Like adding a css class and changing the text
        },
        resetLoadingMessage  = function(){
            // Do stuff to reset the message back to it's starting state
            // Like removing the css class and resetting the text
        };

    $('#your-table-id').dataTable({
        // Add your other data table options here ...
        "fnPreDrawCallback": function() { 
            // Start the timer
            extendedLoadingTimer = setTimeout(function(){
                // When the timer is done ( after 400 miliseconds ) 
                // update the message
                setExtendedLoadingMessage();
            }, 400);
        },
        "fnDrawCallback": function() {
            // Stop the timer from changing after its done ( although 
            // it might already be done at this point )
            clearTimeout(extendedLoadingTimer);

            // Whether the timer was done or not, always reset 
            // the message back to its original state
            resetLoadingMessage();
        }
    });
});
于 2013-11-15T06:42:52.807 に答える