JQueryとライブテーブルの更新
-
06-07-2019 - |
質問
私が達成しようとしているがまだクラックできていないテーブル操作に関するいくつかの例について、例やサンプルコードの方向を教えてくれる人がいるかどうか疑問に思っていました。
現在、JQueryの Tablesorter プラグインを使用してソートおよび表示されるデータのテーブルが作成されています。
これらの追加機能を追加したい
- ページを更新せずに、新しいデータで数秒ごとにテーブルを自動的に更新し、ソートを維持します。 PHPスクリプトを作成して新しいデータのjsonを出力できますが、どういうわけか表示される最後の行のIDを送信する必要があります(表示する新しい行を見つけることができるように)
- 新しい行が追加されると(理想的にはフェードのような滑らかな遷移で)、CSSクラスは<!> quot; new <!> quot;になります。または新しい色を与えるもの
- 新しい色は、ページがフォーカスを維持してから15秒以内に通常の表スタイル(クラスを削除)にフェードします
- ページにフォーカスがなく、新しいデータが存在する場合(つまり、バックグラウンドで更新しているが、ユーザーが別のウィンドウ/タブを見ている場合)、ユーザーがウィンドウ/タブにフォーカスを持つまで待機し、次にフェードを実行します3.で説明した通常の色。
これが明確になったことを願っています。私が最も懐疑的であるのは、フォーカスの問題に関するポイント4です。しかし、FacebookはLiveニュースフィードでそれを行っているようです。ウィンドウにフォーカスが置かれるまで(またはそうなると)更新されるようには見えません
ヘルプやガイダンスは大歓迎です!
私のテーブルは次の形式です:
<table class="tablesorter" cellspacing="1">
<thead>
<tr>
<th>ID</th>
<th>lid</th>
<th>Time</th>
<th>Season</th>
<th>Keyword</th>
<th>Campaign</th>
<th>IP</th>
</tr>
</thead>
<tbody>
<tr>
<td class="id">6875</td>
<td class="lid">-----</td>
<td class="time">28 Nov 09 16:35:24</td>
<td class="season">xxx xxx</td>
<td class="keyword">xx xx xxxx</td>
<td class="campaign">xxx</td>
<td class="ip">xx.xx.xx.xx</td>
</tr>
<tbody>
<table>
解決
1:JavaScriptで数秒ごとにイベントをトリガーするには、 setTimeout()
。 :last
フィルターを使用して、その最後の行を取得しやすくします。最後の行内の非表示の入力フィールドにIDを保存します。
2:最後に試したところ、テーブル行ではフェードとロールダウンがうまく機能しませんでした。行ごとにまったく新しい<table>
を作成するなど、この機能を動作させるには、本当にいハックを作成する必要がありました。 jQueryの最近のバージョンで改善されたのでしょうか?コンテンツをアニメーション化する方法のリストについては、効果をご覧ください。
3:フェード、ロールダウン、その他のエフェクトと同様に、コールバックを使用してこれを実装できます。
4:ウィンドウフォーカスを検出した経験はありませんが、これに役立つリソースがあるようです。ここにカップルがあります: http://www.webdeveloper.com/forum/archive/ index.php / t-33457.html http://www.thefutureoftheweb.com/blog/detect-browser-window-フォーカス