单击按钮后数据表初始化表（ajax，jquery）答案

【问题标题】：datatables initialize table after button click (ajax, jquery)单击按钮后数据表初始化表（ajax，jquery）
【发布时间】：2017-01-22 22:04:13
【问题描述】：

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

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

<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>

【问题讨论】：

据我所知（在 jsfiddle 中尝试）它有效（没有加载原因数据）。这是链接：jsfiddle.net/aqk0egy1/1
是的，js 脚本有效，但没有收到数据。在我的 Web 浏览器调试器（firefox）XHR 部分中，页面加载时我得到一个响应（数据），但是当按钮单击时响应为空且状态代码为空，传输了 0 个字节。这不可能是服务器问题 :( 两个 ajax 请求是相同的。
你没有同时运行它们是吗？一个接一个？
是的，我的网站上都有。当页面重新加载时元素被填充，然后我单击按钮我有另一个表元素
测试女巫应该由其他 javascript 代码填充（带有 on '点击'事件）。当然它对应于
元素）。

你的两个表不一样？

标签： javascript jquery ajax datatables

【解决方案1】：

根据你的评论

这不可能是服务器问题:(两个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') }}"
        });
    });
});

【讨论】：

我尽量简化了测试。两个选项的 Html 代码相同。我使用第一个 javascript 选项运行网站（带有 $(document).ready(...etc) 的那个，它在页面重新加载时加载数据。第二个脚本（带有 $('#proces_input').on('click ',....等）和ajax在按钮点击后不返回任何数据。我想我开始不喜欢DataTables：/
@MaciejskiPawel 尝试将销毁选项添加到数据表的第一个实例（您在准备好文档时初始化的那个）

【解决方案2】：

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

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

table 应该是一个全局变量。

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

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

【讨论】：

第一个解决方案的工作示例：jsfiddle.net/annoyingmouse/ju2bmtm7

【解决方案3】：

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

// global variable
var grid;
jQuery(document).ready(function ($) {
 //initialise blank datatable on page load
  grid = $('#grd').DataTable({
           "processing": false, // control the processing indicator.
           paging: false,
            searching: false,
            info: false,
          // you can load data here also as per requirement
         });
});

jQuery(document).ready(function ($) {
  jQuery('#eventlistview').click(function () {
     // destroy datatable
     $("#grd").dataTable().fnDestroy()
     //reinitialise datatable
      $("#grd").dataTable({
          "processing": false, // control the processing indicator.
          "serverSide": true, // recommended to use serverSide when data is more than 10000 rows for performance reasons
          "ajax": {"url": "",
                    "type": "GET",
                   },
          "language": {"emptyTable": "No data found."
                      },
           columns: [{ "data": "TitleTxt" },
                      {"data": "StartDate"},
                      {"data": "EndDate"},
                    ],
           "order": [[0, "asc"]]            
                    });          
    });
});

【讨论】：