在按钮点击后初始化Datatables表格（使用ajax和jquery）

Question

在按钮点击后初始化Datatables表格（使用ajax和jquery）

5

我有一个加载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 是 "proces_input"。点击按钮后会显示消息 alert('Im in')。

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

- Maciejski Pawel

从我在 jsfiddle 上尝试的情况来看，它似乎可以工作（当然没有加载数据）。这是链接：https://jsfiddle.net/aqk0egy1/1/。 - Michael Ritter

是的，JS脚本能够工作，但是没有收到数据。在我的Web浏览器调试器（Firefox）中，在页面加载时XHR部分我会得到一个回应（数据），但是当点击按钮时，回应为空而且状态码也为空，传输0字节。这不可能是服务器的问题：（两个Ajax请求都是相同的。 - Maciejski Pawel

你不是同时运行它们吧？一个接一个地运行？ - Bindrid

是的，我在我的网站上都有它们。当页面重新加载时，<table id="dt_110x_complex">元素被填充，然后我点击按钮，我有另一个表格元素<table id="dt_110x_click">用于测试，应该由其他JavaScript代码（具有“click”事件的代码）填充。当然，它对应于<table id="dt_110x_click">元素。 - Maciejski Pawel

你的两个表格不同吗？ - Shantaram Tupe

3个回答

2

如果您的目的是重新加载表格正在显示的数据，可以在单击回调函数中使用datatables的reload API函数：

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

变量应该是一个全局变量。

如果因某种原因需要重新创建表格，则应在第一次创建 Datatables 时（即：在文档准备就绪时）添加destroy选项，并在单击回调时省略任何选项以重新创建数据表：

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

- Sebastianb

1

这里有第一部分解决方案的工作示例：https://jsfiddle.net/annoyingmouse/ju2bmtm7/ - annoyingmouse

1

在经过大量研究后，我发现以下方法可行：我创建了一个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"]]            
                    });          
    });
});

- Kiran

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shantaram Tupe · Accepted Answer

根据您的评论，这可能不是服务器问题 :( 两个ajax请求都是相同的。

如果您正在将数据显示到相同的表格中，则可能存在Datatable初始化问题。

如果是这样，您需要在按钮单击时销毁datatable并重新初始化它：

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