javascript - Jquery - Bootstrap DataTable 刷新问题 DATA

Question

您能帮我解决与 Bootstrap - Jquery Table 相关的问题吗？

我想从数据库服务器以 JSON 格式(通过 ajax 调用)检索数据到 Bootstrap 数据表中，然后仅重新加载数据表。

这是代码，按下单击按钮(搜索)后将运行该代码:

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 提供的所有功能，例如 分页 搜索和条目数量....

我正在使用所有更新的链接来运行网站..

ETC ECT

这是一个 JSON 响应:

提前非常感谢您的支持 祝你今天过得愉快 安德里亚

Answer 1

您不应该对表执行 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>