Создать jquery DataTable из JSON, возвращаемого Python

Я пытаюсь создать HTML-таблицу из JSON, который я создаю после получения данных с сервера.

Кажется, что данные отображаются в правильном формате, но 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>
Источник

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>
Источник

Я не уверен, поможет ли это, но у меня была похожая ситуация. Я использовал вызов 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();
      }
    }
Источник
Другие вопросы по тегам