Pythonから返されたJSONからjquery DataTableを作成します。

サーバーからデータを取得した後に作成するjsonからhtmlテーブルを作成しようとしています。Pythonから返されたJSONからjquery DataTableを作成します。

データが正しい形式で表示されているように見えますが、DataTableは「CIK」エラーのために要求された未知パラメータを吐き出しています。 JavaScriptデバッガはassign： "[{" CIK "：" 20 "、" Date "：" 2005-12-31 "}" "

私はあらゆる種類のものを試しましたが、私は見えませんこれを機能させるには

は、ここではPython /フラスコ

@app.route('/getJobs') 
def getJobs(): 
    try: 
     if session.get('user'): 
      connection_string = r"mssql+pymssql://{0}:{1}@MSSQL/CashFlow".format(
      session['user'], 
      session['password'],) 
      engine= create_engine(connection_string, echo=True) 
      con = engine.connect() 
      assigned=con.execute('select cik, datadate from assignments where %s=ID', (session['user'])) 
      assign=[] 
      for job in assigned: 
       assigndict={'CIK':str(job[0]), 'Date':str(job[1])} 
       assign.append(assigndict) 
      print assign 
      return json.dumps(assign) 
     else: 
      return render_template('error.html', error = 'Unauthorized Access') 
    except Exception as e: 
     return render_template('error.html', error = str(e))

を使用してデータをプルコードです。これは私のHTMLです：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>Cash Flow App</title> 


    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> 

    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet"> 
    <link href="../static/css/signup.css" rel="stylesheet"> 
    <script src="../static/js/jquery-1.11.2.js"></script> 
    <script src="../static/js/jquery-datatables.js"></script> 


    <body> 

    <div class="container"> 
     <div class="header"> 
     <nav> 
      <ul class="nav nav-pills pull-right"> 
      <li role="presentation" class="active"><a href="/logout">Logout</a></li> 
      </ul> 
     </nav> 
     <h3 class="text-muted">Cash Flow App</h3> 
     </div> 
     <div class="jumbotron"> 
     <table id="asstable"> 
      <thead> 
      <tr> 
       <th>CIK</th> 
       <th>Date</th> 
      </tr> 
      </thead> 
      <tbody id="tbody"> 

      </tbody> 
      </table> 
     </div> 
     <footer class="footer"> 
     <p>&copy; 2015</p> 
     </footer> 

    </div> 
    </body> 
    <script type="text/javascript"> 
     $(function(){ 
     $.ajax({ 
      url : '/getJobs', 
      type : 'GET', 

      success: function(assign){ 
       $('#asstable').DataTable({ 
       data: assign, 
       columns:[ 
        {data: "CIK"}, 
        {data: "Date"} 
       ] 
       }); 
      }, 
      error: function(error){ 
      console.log(error); 
      } 
      }); 
     }); 
     </script> 


</html>

出典

2016-03-29 Chad Larson

は、サンプルJSONレスポンス –

で私たちを喜ばせるのDataTable（{ データ：[ {"CIK"： "20"、 "日付"： "2005-12-31"}]、列：[ {データ： "CIK"}、 {data： "Date"} ] }）;できます。 –

私はこれが役立つかどうかわからないのですが、私は似たような状況がありました。私はテーブルを埋めるためにデータを取得するためにajax呼び出しを使用していました。通常はテーブルを初期化し、コールが行われた後にJSONオブジェクトを解析し、DataTablesのrow.add（）関数を使用して行を追加しました。

var obj = JSON.parse(xhttp.responseText); 

    for (var key in obj) { 
     if (obj.hasOwnProperty(key)) { 
     adminTable.row.add([ 
      obj[key].value1, 
      obj[key].value2 
     ]).draw(); 
     } 
    }

出典

2016-03-29 18:35:59 Devon

元のコードが機能しなかった理由を私はまだ把握することはできませんので、これは私には全く満足のいく答えではありませんが、私はちょうど戻ったJSONファイルを解析するために、スクリプトを変更した場合ことがわかりました今、私は最初のコードから期待したものを返します：私は$（「＃のasstable」）と（割り当て）機能に割り当て、置き換えた場合

<script type="text/javascript"> 
     $(function(){ 
     $.ajax({ 
      url : '/getJobs', 
      type : 'GET', 

      success: function(assign){ 
      var assign2=JSON.parse(assign) 
      $('#asstable').DataTable({ 
       data: assign2, 
       columns:[ 
       {data: "CIK"}, 
       {data: "Date"} 
       ] 
      }); 
      }, 
      error: function(error){ 
      console.log(error); 
      } 
      }); 
     }); 
     </script>

出典

2016-03-29 20:01:27

Pythonから返されたJSONからjquery DataTableを作成します。

答えて

関連する問題