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

Question

创建了一个表，但未应用“数据表”。 谢谢。

蟒蛇（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>

脚本 DatTables脚本

<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提供了内置选项来进行Ajax调用。 您必须按以下方式更改代码

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

---

在html中，您必须创建table元素，以便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应用程序中，您无需更改即可将内容更改为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" }
        ]
      }); 
    });
  });
});