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）

回答

相關問題