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

加载datatables对象时出现问题。当我在页面加载时初始化并填充表格时，它工作正常。datatables初始化表按钮单击后（ajax，jquery）

此代码在以下页面重新开始工作完美。

<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”。按钮点击后显示消息警报（'Im in'）。

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

来源

2017-01-22 Maciejski Pawel

从什么我可以告诉（在尝试的jsfiddle它）它的工作（不加载原因的数据）。这里是链接：https：//jsfiddle.net/aqk0egy1/1/ –

是的，JS脚本的作品，但没有数据收回。在我的Web浏览器debuger（firefox）XHR部分页面加载时，我得到一个响应（数据），但当按钮单击时，响应为空且状态码为空，传输0个字节。这不能是服务器的问题:(两个Ajax请求都是一样的） –

你没有运行它们两个都是？一个接一个？ – Bindrid

按照你评论

这不可能是服务器的问题:(两个Ajax请求是

如果你正在显示数据到同一张表，那么可能有数据表初始化问题

如果是这样的话你需要destroy数据表和重新初始化它在布通点击：

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

来源

2017-01-23 13:37:48

不是，它不是问题，谢谢你的反应 –

我尽量简化测试。这两个选项的Html代码是相同的。我使用第一个JavaScript选项（带有$（document）.ready（... etc）的网站运行网站，并在页面重新加载时加载数据。第二个脚本（带有$（'＃proces_input'）。on（'click '，....等），并且ajax在按钮点击后不返回任何数据。我想我开始不喜欢DataTables：/ –

@MaciejskiPawel尝试将destroy选项添加到数据表的第一个实例（您初始化的那个文件准备就绪） – Sebastianb

如果你的目的是要重新加载表格中显示的数据，您可以简单地在点击回调中使用数据表中的重载API函数：

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

table虽然应该是一个全局变量。

如果由于某种原因需要重新创建表，则应在第一次创建数据表时将其添加到数据表中（即：在文档就绪时），并且在重新创建数据表时避免使用任何选项在点击回调：

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

来源

2017-01-24 19:36:40 Sebastianb

解决方案第一位的工作示例：https://jsfiddle.net/annoyingmouse/ju2bmtm7/ – annoyingmouse

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

回答

相关问题