[英]Jquery - Bootstrap DataTable Refresh issue DATA
您能否幫助我解決與 Bootstrap - Jquery Table 相關的問題?
我想從 JSON 格式的數據庫服務器中檢索數據(通過 ajax 調用)到引導數據表中,然后僅重新加載數據表。
這是代碼,一旦按下點擊按鈕(搜索)就會運行:
var prova = null;
$(document).ready(function(){
prova = $('#prova_table').DataTable({
paging: true,
searching: false
});
prendivalori();
});
function prendivalori() {
$("#bottone").click(function() {
$("#prova_table").empty();
var sopravvissuti = $('#sopravvissuti').val();
var vita = $('#vita').val();
var provincia = $('#provincia').val();
var campi = $('#campi').val();
var table = $('#prova_table');
$.ajax({
type: 'GET',
url: './php/select.php',
data: {'sopravvissuti': sopravvissuti, 'vita': vita, 'provincia':provincia, 'campi':campi},
dataType: 'json',
success: function(data) {
table.append("<thead><tr><th class='th-sm'>Cognome</th><th class='th-sm'>Nome</th><th class='th-sm'>Sesso</th></tr></thead>");
console.log(data);
len=data[0].length;
table.append("<tbody>");
for(i=0; i< len; i++){
temp=data[0][i]
table.append("<tr><td>" + temp[1] + "</td><td>" + temp[0] + "</td><td>"
+ temp[2] +"</td></tr>");
}
table.append("</tbody>");
$('#prova_table').DataTable().ajax.reload();
}
,
error: function(data) {
alert('Assicurarsi di aver selezionato tutte le caselle');
}
});
});
};
這是單擊按鈕數據后收到的錯誤消息...
DataTables 警告:表 id=prova_table - 無效的 JSON 響應。 有關此錯誤的更多信息,請參閱http://datatables.net/tn/1
從服務器接收到的 json 數據是正確的,因為我們可以在表格中正確看到它們,但是我們無法使用 Bootstrap DataTable 提供的所有功能,例如分頁搜索和條目數...。
我正在使用所有更新的鏈接來運行網站..
等電通
這是 JSON 響應:
非常感謝您的所有支持祝您有美好的一天安德里亞
你不應該在 table 上做 table.append() 和任何其他直接的 dom 更改。 如果您以正確的方式將選項傳遞給 Jquery 數據表,它將為您執行此操作。
這樣做。
如果可用,首先使用列名初始化數據表,如下所示
var table = $("#myTable").DataTable({
data:[],
columns: [
{ "data": "Cognome" },
{ "data": "Nome" },
{ "data": "Sesso" },
{ "data": "data di nascita" }
],
});
在單擊按鈕時,執行 get ajax 調用並在完成回調中清除表table.clear().draw();
和table.rows.add(result).draw()
將數據呈現到表中。
$.ajax({
url: "https://www.mocky.io/v2/5e89289e3100005600d39c17",
type: "get",
}).done(function (result) {
table.clear().draw();
table.rows.add(result).draw();
})
JSFiddle: https://jsfiddle.net/k0d1mzgL/
var table = $("#myTable").DataTable({ data:[], columns: [ { "data": "Cognome","title": "Cognome"}, { "data": "Nome","title": "Nome"}, { "data": "Sesso","title": "Sesso"}, { "data": "data di nascita","title": "data di nascita" } ], }); $("#getDataBtn").click(function(){ $.ajax({ url: "https://www.mocky.io/v2/5e89289e3100005600d39c17", type: "get", }).done(function (result) { table.clear().draw(); table.rows.add(result).draw(); }).fail(function (jqXHR, textStatus, errorThrown) { //if failed console.log("Due to https issue,this request cant be made, go check jsfiddle link provided in answer"); }); });
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" > <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> <table id="myTable"> </table> <button id="getDataBtn">Get data</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.