数据表！使用烧瓶创建动态表时无法应用数据表

Question

制作了一个表格，但没有应用“数据表”。 谢谢。

python(3.5)

html

<select id="name" class="selectpicker" data-width="100px" title="시도">
      <option value='Tiger Nixon'>Tiger Nixon</option>
      <option value='Garrett Winters'>Garrett Winters</option>
      <option value='Ashton Cox'>Ashton Cox</option>
      <option value='Cedric Kelly'>Cedric Kelly</option>
      <option value='Airi Satou'>Airi Satou</option>
      <option value='Brielle Williamson'>Brielle Williamson</option>
</select>
<button id = "start" class="btn btn-primary " >View</button>
<div id="result"></div>

html

脚本 向烧瓶发送值的代码

<script>
   $(document).ready(function() {
   $("#start").click(function(e) {
      e.preventDefault();
      var selected_name= $("#name").val();
      $.post("/result" ,{
        name: selected_name
      }, function(resp) {
          $("#result").html(resp);
     });
  });
});

</script>

脚本 数据表脚本

<script>
$(document).ready(function() {
    $('#example').DataTable();
} );
</script>

烧瓶应用

@app.route("/")
def index() :
    return render_template("table.html")


@app.route("/result", methods=["POST"])
def result():
    data = [
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
[ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
[ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
[ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
[ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ]
]

df = DataFrame(data,columns = ['name','Position','Office','Extn.','Start date','Salary'])
name = request.form.get("name")
table = df.query('name == "{0}"'.format(name))
return table.to_html(classes='display" id ="example" width="100%')

Answer 1

这是因为您没有使用 dataTable 创建表。您正在使用 dataTable 不知道的 jquery 附加表的内容。

DataTable 提供inbuilt option 进行ajax 调用。您必须按如下方式更改代码

$(document).ready(function() {
    $('#example').DataTable(
        "ajax": {
            "url": "/result",
            "type": "POST",
            "data" : {
               name : selected_name
            }
        },
    );
});

---

在 html 中，您必须创建表格元素，以便 dataTable 能够找到具有给定 id 或类的表格并将数据附加到该表格。

<div id="result">
 <table id="example">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Extn.</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
 </table>
</div>

---

在flask app中无需将内容更改为html格式。

@app.route("/")
def index() :
    return render_template("table.html")


@app.route("/result", methods=["POST"])
def result():
    data = [
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
[ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
[ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
[ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
[ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ]
]

    # return the results as json # import json
    return json.dumps(data)

---

---

除此之外，您还可以通过其他方式进行操作。在#result div 中附加响应后，初始化dataTable。

$(document).ready(function() {
  $("#start").click(function(e) {
    e.preventDefault();
    var selected_name= $("#name").val();
    $.post("/result" ,{ name: selected_name}, function(resp) {
      $("#result").html(resp);
      // now initialize dataTable 
      $('#example').DataTable({
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "age" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
      }); 
    });
  });
});