javascript - 单击按钮后数据表初始化表(ajax，jquery)

Question

我在加载数据表对象时遇到问题。当我在页面加载时初始化和填充表格时，它工作正常。

下面的代码在页面重新加载时完美运行。

<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf-8">

$(document).ready(function(){
  var table = $('#dt_110x_complex').DataTable({
    paging : true,
    scrollY: 300,
    ajax: "{{ url_for('complex_data') }}"
  });

});
</script>

但是下面的这段代码在按钮点击时不起作用。我做错了什么？

$(function() {
    $('#proces_input').on('click', function() {
        alert('Im in')
        var table = $('#dt_110x_complex').DataTable({
        paging : true,
        scrollY: 300,
        ajax: "{{ url_for('complex_data') }}"
        });

        });
    });

按钮 id = "proces_input"。单击按钮后显示消息警报('我在')。

下面是我的数据表的 html 表代码(两个样本相同):

<div class="row">
<div class="col-lg-12">
<table id="dt_110x_complex" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>id</th>
<th>code</th>
<th>date</th>
<th>blocade</th>
<th>konti</th>
<th>free</th>
<th>occ</th>
<th>origin</th>
<th>type</th>
<th>created</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>

Answer 1

根据你的评论

This can not be server problem :( both ajax request are the same.

如果您正在向同一个表显示数据，则可能存在数据表初始化问题

如果是这样，您需要销毁 数据表并重新初始化它点击按钮:

使用 destroy : true,

$(function() {
    $('#proces_input').on('click', function() {
        alert('Im in')
        var table = $('#dt_110x_complex').DataTable({
            paging : true,
            destroy : true,    <-------Added this 
            scrollY: 300,
            ajax: "{{ url_for('complex_data') }}"
        });
    });
});