Question

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

数据似乎以正确的格式显示，但DataTable正在回放一个请求的未知参数，以便CIK＆＃39;错误。 JavaScript调试器说：＆＃34; [{＆＃34; CIK＆＃34;：＆＃34; 20＆＃34;，＆＃34; Date＆＃34;：＆＃34; 2005-12-31＆＃34 ;}]＆＃34;

我已经尝试了各种各样的事情，但我似乎无法让它发挥作用。

这是使用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>

Answer 1

我不确定这是否会有所帮助，但我有类似的情况。我正在使用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();
      }
    }

Answer 2

这对我来说不是一个完全令人满意的答案，因为我仍然无法弄清楚为什么原始代码不起作用，但我发现如果我只是更改了脚本来解析返回的JSON文件现在返回我对第一个代码的期望：

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

从Python返回的JSON创建jquery DataTable

2 个答案: