0

私は MySQL データベースを持っており、数分または数時間ごとに、新しいニュース項目を表す新しい行が挿入されます。開いているブラウザーは、これらの新しいニュース項目を HTML テーブルの一番上に配置するにはどうすればよいのでしょうか?

HTML テーブルの上部に「x 個の新しいアイテム」を表示でき (x は新しいアイテムが挿入されると定期的に変化します)、クリックすると新しいアイテムが新しい行としてテーブルの上部に配置されます。これは、Twitter 検索、disqus コメント、YT コメント、hckrnews など、他のほとんどのリアルタイム Web アプリと同じです。

私は LAMP セットアップを実行しており、HTML5 と Jquery を喜んで使用していますが、シンプルで簡単でユビキタスな状態を維持したいと考えています。更新のためにサーバーをポーリングしても構いません。理想的には、ポーリング (またはプッシュ) をオンまたはオフにするオプションをユーザーに提供したいと考えています。

4

2 に答える 2

2

X 秒または X 分ごとにAjax呼び出しを使用できます。次に、jQuery を使用して、新しいデータを既存のテーブルに挿入できます。

擬似コード:

  • 間隔 X 秒/分で JavaScript タイマーを設定します。

  • 各間隔の後、Ajax を使用してサーバーに要求を送信します。すでに表示されているレコードをサーバーに伝えるために、last id、last datetime などのパラメータが必要になる場合があります。

  • responseData.length応答を取得し、テーブルの上部に新しい行を動的に挿入し、どこかを使用して「X new items」を書き込みます。

Ajax のより複雑な代替手段は Comet を実装することですが、私が聞いたように (試していません)、PHP と Apache では少し難しいです。

テストされていない例: 

setInterval(function() {
    var currentRowsCount = $('#tableId tr').length - 1; // or ID or Date
    var table = $('#tableId');

    $.ajax({
        type: "POST",
        url: "some.php",
        data: { rows: currentRowsCount },
        dataType: "json"
    }).done(function( response ) {
        var data = $.parseJSON(response);

        $(data).each(function(key, value) {
            // add the new rows using any of the append, prepend, before or after methods
        })
    });
}, 60000); // 1 min
于 2013-04-19T11:11:39.113 に答える
1

私はjqueryでこれを行いますが、これはメッセージアラート用ですが、行ごとにコピーするのではなく、開発するための概念として十分に簡単にテーブル行を更新するように変更できます。

<script>
        var messages = {
        endpoint: 'endpoint.php',
        interval: 5, // polling interval, seconds

        poll: function(){
            $.ajax({
                type: 'POST',
                url: messages.endpoint,
                data: {
                    'method': 'messages-poll'
                },
                success: function(data){
                    $(data).each(function(){
                        //Your table update functionality here
                    });

                    setTimeout(function(){
                        messages.poll();
                    }, messages.interval * 1000);
                },
                dataType: 'json'
            });
        }
    };

    messages.poll();
</script>
于 2013-04-19T11:24:36.530 に答える