Flask+ajax实现点击按钮刷新datatable

HTML

首先创建一个datatable

<div class="card-body">
  <div class="table-responsive">
    <table id="dataTable" class="table table-bordered" style="font-size:13px">
      <thead>
        <tr>
          <th>数据1</th>
          <th>数据2</th>
          <th>数据3</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</div>

然后创建一个a标签，将其onclink设为刷新函数名

<a href="#" onclick="table_refresh()" class="btn btn-primary btn-sm">
  <span class="text">刷新表格</span>
</a>

Javascript

function table_refresh() {
  $.ajax({
    type: 'GET',
    url: '/table_refresh',
    timeout: 10000,
    success:function(data){
      var tty =$('#dataTable').dataTable();
      tty.fnClearTable(); //清空表格
      tty.fnAddData(data, true); //刷新表格
    },
  })
}

Flask

@app.route('/table_refresh')
def table_refresh():
    df = query.read_sql() #读取数据库中数据
    X = np.array(df).tolist() #dataframe转array再转list
    return X

注意要返回list

这篇好文章是转载于：学新通技术网