使用烧瓶数据并在制表器中显示答案

【问题标题】：consume flask data and display in tabulator使用烧瓶数据并在制表器中显示
【发布时间】：2020-10-28 13:51:49
【问题描述】：

我正在尝试将从烧瓶端点获取的以下数据显示到tabulator 这是我的 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>

这是我的烧瓶端点，它以 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)

我想将这些数据捕获到上面在 HTML 正文中使用的 Tabulator 插件中，现在我不确定如何实现这一点，因为没有明确的说明，有人可以在这里帮忙吗？

【问题讨论】：

标签： javascript python ajax flask tabulator

【解决方案1】：

Tabulators Ajax 文档指定了数据需要返回的格式，以便 Tabulator 处理它。查看Documentation了解完整详情。

基本上，您的 ajax 响应必须返回 JSON 编码的行对象数组，数组中的每个对象代表一行数据。例如：

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

如果您无法以该格式返回数据，那么您可以使用 ajaxResponse 回调来处理响应并将其转换为该格式，然后再将其传递给表。

所有这些的全部细节可以在Ajax Documentation中找到

更新 - 将数据传递到表中

加载数据的问题是因为您在事件创建表之前调用了 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 Documentation

【讨论】：

但是如何将数据发送到表中