从 Python 返回的 JSON 创建 jquery DataTable

2023年4月8日上午11:46 • Python开发

【问题标题】：Create jquery DataTable from JSON returned by Python从 Python 返回的 JSON 创建 jquery DataTable
【发布时间】：2023-04-01 07:50:01
【问题描述】：

我正在尝试从我从服务器提取数据后创建的 json 构建一个 html 表。

数据似乎以正确的格式显示，但 DataTable 正在为“CIK”错误返回一个请求的未知参数。 JavaScript 调试器说 assign:"[{"CIK": "20", "Date": "2005-12-31"}]"

我尝试了各种方法，但我似乎无法让它发挥作用。

这是使用 Python/Flask 提取数据的代码

@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>

【问题讨论】：