使用烧瓶数据并在制表符中显示

Question

我正在尝试显示从烧瓶端点获取的以下数据到 tabulator 这是我的 html body.

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

这是我的烧瓶端点，其中 returns 数据采用 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 body 中使用的 Tabulator 插件中，现在我不确定如何实现，因为没有明确的说明, 有人可以帮忙吗？

Answer 1

制表符 Ajax 文档指定了数据需要 return 编辑的格式，以便制表符能够处理它。查看 Documentation 了解完整详情。

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

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

如果您无法 return 那种格式的数据，那么您可以使用 ajaxResponse回调以处理响应并将其转换为该格式，然后再传递到 table.

所有这些的完整详细信息可以在 Ajax Documentation

中找到

更新 - 将数据传递到 table

加载数据的问题是因为您在创建 table 事件之前调用了 setData 函数：

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

这个函数没有 return 数据，它告诉制表符去检索它，所以你上面的选项什么都不做。

如果你只需要在table第一次加载时加载数据那么最好的方法是不要使用setData 或 data 属性。而是在 table 构造函数对象中使用 ajaxURL 属性并传递url对它

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

所有这些的完整详细信息可以在使用 ajax 加载数据的文档的第一段中找到，请参阅 Ajax Documentation

使用烧瓶数据并在制表符中显示

consume flask data and display in tabulator

javascript

python

ajax

flask

tabulator

更新 - 将数据传递到 table