Блог

Главная - Вопросы по программированию - использование данных flask и отображение в табуляторе

использование данных flask и отображение в табуляторе

#javascript #python #ajax #flask #tabulator

#javascript #python #ajax #flask #табулятор

Вопрос:

Я пытаюсь отобразить следующие данные, которые я получаю из своей конечной точки flask, в табуляторе: вот мое тело html.

 <body>
<div style="text-align:center">
<iframe id="invisible" name="invisible" style="display:none;"></iframe>
<span class="labela successa" id="header"><b>tabledata</b></span><br>
<h3></h3>
<form target="invisible" action="http://127.0.0.1:5000/test" style="margin:10px;margin-bottom: 300px;" method="post">
 <span class="label success" id="select_d">Select custom period</span>
 
<input type="text" name="daterange" value="" />
<!-- <input type="submit" name="submit" id="btn" value="Submit"> -->
</form>

<script>
$(function() {
  $('input[name="daterange"]').daterangepicker({
    opens: 'left'
  }, function(start, end, label) {
    console.log("A new date selection was made: "   start.format('YYYY-MM-DD')   ' to '   end.format('YYYY-MM-DD'));
    var sd = start.format('YYYY-MM-DD')   " 00:00"
    var ed = end.format('YYYY-MM-DD')   " 23:59"
    console.log(sd)
    console.log(ed)
    var params = {};
    params.start = sd;
    params.end = ed;
    $.post('http://127.0.0.1:5000/test', params).done(function (data) {
    // callback
});
  });
});

</script>

<!---- Table here -start-->
<div id="example-table"></div>

<script>
 var tabledata = $("#example-table").tabulator("setData", "http://127.0.0.1:5000/test");
 var table = new Tabulator("#example-table", {
  height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
  data:tabledata, //assign data to table
  layout:"fitColumns", //fit columns to width of table (optional)
  columns:[ //Define Table Columns
    {title:"Name", field:"name", width:150},
    {title:"Age", field:"age", align:"left", formatter:"progress"},
    {title:"Favourite Color", field:"col"},
    {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
  ],
  rowClick:function(e, row){ //trigger an alert message when the row is clicked
    alert("Row "   row.getData().id   " Clicked!!!!");
  },
});

</script>

<!---- Table here -end-->
</body>

вот моя конечная точка flask, которая возвращает данные в формате json.

 from flask import Flask,render_template, request,json
from flask_cors import CORS, cross_origin
from jira import JIRA
import re
app = Flask(__name__)
cors = CORS(app)

@app.route('/')
def index():

  return render_template("table.html")

@app.route('/test',methods=['GET','POST'])
def tabledata():
  start_date = request.form['start']
  end_date = request.form['end']
  options = {'server': 'abc.com', 'verify': False}
  jira = JIRA(options, basic_auth=('username', 'Password'))
  issues= jira.search_issues('project="LSDF" AND issuetype = JKL AND created >="' start_date '" AND created <="' end_date '"', maxResults=100)
  issuelist = []
  for issue_names in issues:
    issuelist.append(issue_names.key)
  print(issuelist)
  data = []
  for ticket in issuelist:
    jiraissue = jira.issue(ticket)
    data.append({'age_id': jiraissue.key, 'scape':jiraissue.fields.customfield_18242[0].fields.summary, 'Description': jiraissue.fields.summary, 'incident_start': jiraissue.fields.customfield_14040})
  print (data)
  
  return json.dumps(data)


if __name__ == '__main__':
  app.run(debug=True)

Я хочу записать эти данные в плагин Tabulator, который я использовал выше в теле HTML, прямо сейчас я не уверен, как я могу этого добиться, поскольку нет четких инструкций, кто-нибудь может здесь помочь?

Ответ №1:

Документация Tabulators Ajax определяет формат, в котором данные должны быть возвращены, чтобы табулятор мог их обработать. Проверьте документацию для получения полной информации.

По сути, ваш ajax-ответ должен возвращать массив объектов строк в кодировке JSON, при этом каждый объект в массиве представляет строку данных. Например:

 [
    {"id":1, "name":"bob", "age":"23"},
    {"id":2, "name":"jim", "age":"45"},
    {"id":3, "name":"steve", "age":"32"}
]

Если вы не можете вернуть данные в этом формате, вы можете использовать обратный вызов ajaxResponse для обработки ответа и преобразования его в этот формат до его передачи в таблицу.

Полную информацию обо всем этом можно найти в документации Ajax

Обновление — передача данных в таблицу

Проблема с загрузкой данных заключается в том, что вы вызываете функцию setData перед событием, создающим таблицу:

 $("#example-table").tabulator("setData", "http://127.0.0.1:5000/test");

Эта функция не возвращает данные, она сообщает табулятору перейти и извлечь их, поэтому ваш приведенный выше параметр ничего не делает.

Если вам нужно загружать данные только при первой загрузке таблицы, то лучший подход — вообще не использовать setData или свойство data. Вместо этого используйте свойство ajaxURL в объекте конструктора таблицы и передайте ему URL-адрес

 var table = new Tabulator("#example-table", {
    ajaxURL:"http://www.getmydata.com/now",
    ....//other table setup options
});

Полную информацию обо всем этом можно найти в первом абзаце документации по загрузке данных при использовании ajax, см. Документацию Ajax

Комментарии:

1. Но как мне отправить данные в таблицу