Question

我在加载datatables对象时遇到问题。当我在页面加载时初始化并填充表时，它可以正常工作。

以下此代码在页面重新开始时完美无缺。

<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 =＆＃34; proces_input＆＃34;。点击按钮后显示消息提示（＆＃39;进入＆＃39;）。

以下是我的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

如果您打算重新加载表格所显示的数据，您只需在点击回调中使用数据表中的重新加载API函数：

$('#proces_input').on('click', function() {
       table.ajax.reload();
    });

table应该是一个全局变量。

如果出于某种原因需要重新创建表，则应在首次创建表时将destroy选项添加到Datatables（即：在文档就绪时），并在您重新创建时避免任何选项在点击回调上创建数据表：

$(function() {
    $('#proces_input').on('click', function() {
        alert('Im in')
        $('#dt_110x_complex').DataTable();
    });
});

Answer 2

根据您的评论

这可能不是服务器问题:(两个ajax请求都是一样的。

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

如果是这样你需要 destroy 数据表和重新初始化它on onon点击：

使用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') }}"
        });
    });
});

Answer 3

经过大量研究，这对我有用：-我创建了ID为“ eventlistview”的按钮，并单击此按钮重新初始化了数据表。

["5th 566","Complement"]

按钮单击后，datatables初始化表（ajax，jquery）

3 个答案: