Flask 使用服务器端处理通过数据表显示大型数据帧_Flask_Datatables

Flask 使用服务器端处理通过数据表显示大型数据帧

flask datatables

Flask 使用服务器端处理通过数据表显示大型数据帧,flask,datatables,Flask,Datatables,我正在尝试使用服务器端处理将超大数据帧（pandas）转换为数据表，但迄今为止没有成功。例如，我附加的dataframe只有2行，但我原来的dataframe大约有20K行14列烧瓶 HTML 屏幕上的错误网络日志 Object{columns:（6）[…]，index:（2）[…]，data:（2）[…]} 列：数组（6）[“名字”、“姓氏”、“位置”、…] 0:“名字” 1:“姓氏” 2：“职位” 3.“办公室” 4：“开始日期” 5.“工资” 长度：6 ：数组[] 数

我正在尝试使用服务器端处理将超大数据帧（pandas）转换为数据表，但迄今为止没有成功。例如，我附加的dataframe只有2行，但我原来的dataframe大约有20K行14列

烧瓶

HTML

屏幕上的错误

网络

日志

Object{columns:（6）[…]，index:（2）[…]，data:（2）[…]}

列：数组（6）[“名字”、“姓氏”、“位置”、…]
0:“名字”
1:“姓氏”
2：“职位”
3.“办公室”
4：“开始日期”
5.“工资”
长度：6
：数组[]

数据：数组[（6）[…]，（6）[…]
0:数组（6）[“Airi”、“Satou”、“accountary”、…]
1:Array（6）[“Angelica”、“Ramos”、“首席执行官（CEO）”，…]
长度：2
：数组[]

索引：数组[0，1]
0: 0
1: 1
长度：2
：数组[]
：对象{…}

JSON输出为文本：

{“列”：[“名字”、“姓氏”、“职位”、“办公室”、“开始” 日期，“工资”]，“指数”：[0,1]，“数据”：[[“航空”、“佐藤”、“会计”、“东京”、“28日 2008年11月“，”$162700“]，[“Angelica”，“Ramos”，“首席执行官（首席执行官），“伦敦”，“2009年10月9日”，“1200000美元]]

你能用你的问题来显示原始JSON（作为文本）是什么样子吗？旁注：为什么你在提问时不应该上传。@andrewjames我附上了原始JSON，以及我在控制台上记录它时它的样子。感谢您对我为什么不上传图像的评论和澄清。好的-JSON是有效的，应该显示出来（但是需要添加额外的数据以完全支持服务器端处理）。但是，首先，我将把JS简化为一个脚本，如下所示：

$（document）.ready（function（）{$（'#sortTable'）.DataTable（{“ajax:“您的URL在这里”}）；}）。首先让它工作起来——然后你就可以看到如何相应地修改你的Flask模板，以避免硬编码URL。对不起，我的烧瓶技术很差。
 @app.route(rule='/', methods=['GET', 'POST'])
 def index():
   df_to_table = pd.DataFrame({'First name':['Airi', 'Angelica'], 'Last name': ['Satou', 'Ramos'], 'Position': ['Accountant', 'Chief Executive Officer (CEO)'], 'Office': ['Tokyo', 'London'], 'Start date': ['28th Nov 08', '9th Oct 09'], 'Salary': ['$162,700', '$1,200,000']})

   ''' print of df_to_table:
        First name  Last name   Position                       Office   Start date   Salary
    0   Airi        Satou       Accountant                     Tokyo    28th Nov 08  $162,700
    1   Angelica    Ramos       Chief Executive Officer (CEO)  London   9th Oct 09   $1,200,000
   '''
   df_to_table = df_to_table.to_json(orient='split')
   return render_template('table.html', df_to_table=df_to_table)

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
   ...
  </head>

  <body>
     <table id="sortTable" class="display" style="width:100%">
       <thead>
         <tr>
           <th>First name</th>
           <th>Last name</th>
           <th>Position</th>
           <th>Office</th>
           <th>Start date</th>
           <th>Salary</th>
          </tr>
        </thead>
      </table>

   <script src="{{ url_for('static', filename='dataTables.js')}}"></script>
   <script>$(document).ready(start({{ df_to_table | safe }}));</script>
  </body>
</html>

function start(df_to_table) {
  return function() {
    $('#sortTable').DataTable ({
      "processing": true,
      "serverSide": true,
      "ajax": df_to_table,
    });
  };
};

Object { columns: (6) […], index: (2) […], data: (2) […] }

columns: Array(6) [ "First name", "Last name", "Position", … ]
  0: "First name"
  1: "Last name"
  2: "Position"
  3: "Office"
  4: "Start date"
  5: "Salary"
  length: 6
  <prototype>: Array []

data: Array [ (6) […], (6) […] ]
  0: Array(6) [ "Airi", "Satou", "Accountant", … ]
  1: Array(6) [ "Angelica", "Ramos", "Chief Executive Officer (CEO)", … ]
length: 2
<prototype>: Array []

index: Array [ 0, 1 ]
  0: 0
  1: 1
  length: 2
  <prototype>: Array []
<prototype>: Object { … }