Question

我正在尝试显示从烧瓶终点到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>

这是我的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)

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

Answer 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 < / strong> 属性。而是使用表构造函数对象中的 ajaxURL 属性并将URL传递给它

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

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

消耗烧瓶数据并在制表符中显示

1 个答案:

更新-将数据传递到表中