簡體   English   中英

Jquery - 引導數據表刷新問題數據

[英]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 響應:

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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM