單擊按鈕后數據表初始化表（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"。 單擊按鈕后顯示消息 alert('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>

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

Answer 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();
    });
});

Answer 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"]]            
                    });          
    });
});