PythonのFlaskマイクロフレームワークを使用してAJAXでテーブルコンテンツを更新する

Question

AJAXでデータテーブルをページ付けしようとしています。私はユーザー入力を取り込むSQLAlchemyクエリを作成しました。そこから、クエリの各結果を保持する辞書のリストを作成しました。データJSONをシリアライズ可能にする必要がありますが、this JavaScript toolを試してみましたが、クエリオブジェクト（models.pyの変数 "select"）はシリアル化できません。私はそれを回避し、 "行"というdictsのリストを使用してみましたが、それぞれのクエリはフラスコの "セッション"オブジェクト（views.pyに見られるように）に格納するには大きすぎます。

私はSQLAlchemyのpaginate関数について知っていますが、それが私のテーブルにページ機能を実装する最良の方法であるかどうかは分かりません。私はAJAXを使用したい（sqlalchemyのpaginate関数とAJAXを併用することはできますか？）、私はJSの初心者で、AJAXの実装方法を知らない。どんな助け？

ここまでは自分のコードの内訳です。私はテーブルのスキーマは投稿する必要はないと思うが、私はクラスを作成してオートロードをTrueにすることで既存のテーブルをロードしていることに注意してください。各クエリに表示されるdatetimeオブジェクトがあるので、クエリオブジェクトがJSONシリアライザブルでない理由が考えられます。

models.py：

class Stations(Base): 
    __tablename__ = "stations" 
    __table_args__ = {'autoload':True} 

class Metar(Base): 
    __tablename__ = "metar" 
    __table_args__ = {'autoload':True} 

def loadSession(form): 
    clear_mappers() 
    metadata = MetaData() 
    metadata.reflect(engine, only=['metar', 'stations']) 
    stations = Table('stations', metadata, \ 
        Column('stationID', Integer, \ 
        ForeignKey("metar.stationID"), primary_key=True), \ 
        autoload=True, autoload_with=engine, extend_existing=True) 
    mapper(Stations, stations) 
    metar = Table('metar', metadata, autoload=True, autoload_with=engine) 
    mapper(Metar, metar) 

    Session = sessionmaker(bind=engine) 
    connect = Session() 

    queries = [] 
    # 
    # Code not pertinent to question 
    # takes user input query params and enters them into query 

    time_constraints = [] 
    # 
    # Code not pertinent to question 
    # takes user input query params and enters them into query 

    # creates sqlalchemy query object 
    select = connect.query(Metar.stationID, Metar.ldatetime, Metar.temp, Metar.dew, 
          Metar.wspd, Metar.wdir, Metar.wgust, Metar.vrb, 
          Stations.id, Stations.name, Stations.state).\ 
         join(Stations).\ 
         filter(or_(*queries), and_(*time_constraints)) 

    # creates list of dicts containing query response information 
    rows = [] 
    for result in select: 
     rows.append(dict(zip(result.keys(), result))) 

    return rows, select 

views.py

@app.route('/data_post', methods=['GET', 'POST']) 
def data_post(): 
    rows, select = loadSession(form=form) 
    session['rows'] = rows 
    return redirect(url_for('results')) 

@app.route('/results', methods=['GET','POST']) 
def results(): 
    rows = session.get('rows', None) 
    return render_template('data_display.html', rows=rows) 

data_display.html

<div class="data_display" id="ajax"> 
    <table> 
     <tr> 
      <th>ID</th> 
      <th>ICAO ID</th> 
      <th>State</th> 
      <th>Station Name</th> 
      <th>Local Time</th> 
      <th>Temp</th> 
      <th>Dew Point</th> 
      <th>Wind Speed</th> 
      <th>Wind Direction</th> 
      <th>Wind Gust</th> 
      <th>Variable Wind</th> 
     </tr> 
     {% for row in rows %} 
     <tr> 
      <td>{{ row['stationID'] }}</td> 
      <td><a href="{{ url_for('stations', stationID = row['id']) }}">{{ row['id'] }}</td> 
      <td><a href="{{ url_for('state', state = row['state']) }}">{{ row['state'] }}</td> 
      <td>{{ row['name'] }}</td> 
      <td>{{ row['ldatetime'] }}</td> 
      <td>{{ row['temp'] }}</td> 
      <td>{{ row['dew'] }}</td> 
      <td>{{ row['wspd'] }}</td> 
      <td>{{ row['wdir'] }}</td> 
      <td>{{ row['wgust'] }}</td> 
      <td>{{ row['vrb'] }}</td> 
     </tr> 
     {% endfor %} 
    </table> 
</div> 

Answer 1

あなたは、私はそれに答えたhavent感じる場合、私は（あなたの質問に答えるために編集します）、しかし私は知っておく必要があります（それは少し曖昧です）フロントエンドやバックエンドをリフレッシュしようとしていますか？私はバックエンドであなたを助ける方法を知らないが、フロントエンドで行う。

まず、あなたがこのシナリオで

<script> 
    setInterval(function() 
    { 
    $('#ajax').load(document.URL + ' #ajax'); 
    }, 1000) 

</script> 

別のJavaスクリプトブロックを追加し、あなたのテーブルを含むdivの後に続いjqueryの

<script>src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

をロードする必要があり、私は唯一のスクリプトブロックを作りましたテーブルのdiv
を1秒ごとまたは1000ミリ秒ごとにリロードします。私はあなたが提供したdiv id（ 'ajax'）を使ってあなたのdivをリロードしました（ありがとう、それはずっと時間を節約しました）。 PSでは、表をスクロールすることはできませんが、表が長い場合はページ全体をスクロールする必要があります。これを解決するには、iframeを使うことができますが、それをしたいのかどうかは分かりません（以下のコメントで、そのコードを与えることができます）。